CSS Pixel Is Coming

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

“CSS pixel.” “Reference pixel.” You may call it either one, but a pixel is not what it used to be when we were young.

Retina, Amoled, QuadHD…. You may have noticed that mobile devices have crazy resolutions. And the trend does not stop with mobile devices - take for instance MacBook Pro with Retina display.

However, web designers do not have to worry about displaying their websites using hardware resolutions. Browsers will calculate the resolution and display it in “CSS resolution”.

For the ratio between hardware and CSS resolution, we use a technical term, device-pixel-ratio or a newer one, resolution. The latter term might be a little confusing so for the sake of clarity we will use the first one.

HW to CSS resolution ratio of selected devices

So what impact will device-pixel-ratio have on UI designers? let’s find out!




Content

Introduction

Introduction

On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide

Introduction

Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties

End

End

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more