You're reading from Professional CSS3 Harness the power of CSS3 to design stunning, modern websites

Product type Paperback

Published in May 2016

Publisher Packt

ISBN-13 9781785880940

Length 362 pages

Edition 1st Edition

Languages

CSS

Concepts

Web Design

Author (1):

Piotr Sikora

View More author details

Table of Contents (16) Chapters

Preface

1. Foundations and Tools

2. Mastering of Fundamentals FREE CHAPTER

3. Mastering of Pseudoelements and Pseudoclasses

4. Responsive Websites – Prepare Your Code for Specific Devices

5. Using Background Images in CSS

6. Styling Forms

7. Resolving Classic Problems

8. Usage of Flexbox Transform

9. Calc, Gradients, and Shadows

10. Don't Repeat Yourself – Let's Create a Simple CSS Framework

11. Mailers Fundamentals

12. Scalability and Modularity

13. Code Optimization

14. Final Automatization and Processes Optimization

Index

Pixelperfect layouts tools

In a common workflow, a graphic designer creates the design of a website/application. Then, next in the process is the HTML/CSS coding. After the development process, the project is in the quality assurance (QA) phase. Sometimes it's focused only on the functional side of the project, but in a good workflow, it checks of graphic design phase. During the QA process, the designer is involved, he/she will find all pixels that are not good in your code. How would check all the details in a pixelperfect project?

The question is about mobile projects. How to check if it is still pixel perfect when it needs to be flexible in browsers? You will need to make it in described ranges. For example, you have to create HTML/CSS for the web page, which has three views for mobile, tablet, and desktop. You will need plugins, which will help you to build pixel perfect layouts.

Pixelfperfect plugin

Pixelperfect plugin will help you to compare design with your HTML/CSS in your browser. This plugin is available on Firefox and Chrome. To work with it, you need to make a screenshot of your design and add it in a plugin. Then you can set a position of image and opacity. This plugin is one of the most used by frontend developers to create pixel perfect HTML layouts.

MeasureIT plugin

This plugin will help you to keep proper distances between elements, fonts, and so on. As you can see in the following screenshot, it looks like a ruler over your web page. It is easy to use—just click on the plugin icon in the browser and then click on the website (it will start the ruler), and move the cursor to the place to which you want to know the distance, and voila!