How to use dp to calculate shadows - web development HTML CSS


Tags: html,css,css3,material-design,dpi

Problem :

I have question about using dp in web development. Im currently reading google material design guidelines and they are talking about elevation and shadows based on dp. How can I use this in web development? Is there any way to calculate this how to create shadow based on dp with HTML CSS?

Example from the web page:

Raised button

Resting state: 2dp

Pressed state: 8dp

For desktop only, raised buttons can have an elevation of:

Resting state: 0dp

Pressed state: 2dp



Solution :

As mentioned in the Google Material design documents:

A dp is equal to one physical pixel on a screen with a density of 160. To calculate dp:

dp = (width in pixels * 160) / screen density

When writing CSS, use px wherever dp or sp is stated. Dp only needs to be used in developing for Android.

and screen density is

Screen resolution refers to the total number pixels in a display.

screen density = screen width (or height) in pixels / screen width (or height) in inches

So it depends on the screen width and height. There are some converters on the web to calculate for each density. But as most screens are still 72dpi (not mentioned the HDPI screens), I think that is a proper starting point.


    CSS Howto..

    How do I simulate a hover with a touch in touch enabled browsers?

    How to make content inside a circle div fitting correctly

    jQuery, given a Variable with DIV with items, how to scroll an Item to the Left

    How to make hover-active whole
  • , not just ?
  • Show nested list on click in Joomla (1.7.0)

    How to make CSS file more important than another CSS file? [closed]

    How to Build fieldSets with fixed width/height & 2 columns of checkboxes

    How do you change the theme and colors of Site.Master in ASP.NET / C#?

    How do I insert tag using :after css property?

    How to make section element in css to full width

    Using vi, how can I remove all lines that contain [searchterm]?

    How to center an attribute is position is absolute?

    how to diplay two html elements seemlessly

    CSS - How to pad an elements width by 50% of itself?

    How can I make a visual header in CSS without PHP?

    How to make the opposite effect of Hover in css [duplicate]

    How to make the new long shadow trend with CSS?

    How to convert SVG CSS animation to pure JS code

    How To Prevent Transition Animation To Run Page Load

    How to make a shape which is made using css borders responsive?

    How to make element stay in the same position using css?

    how to select margin for a background image in CSS/CSS3?

    how to Styling a “choose file” button using css Only

    CSS - How to add a second gradient to make this button half transparent?

    How to make some controls visible and overlapping a DIV when mouse hovers on it? [closed]

    website div won't stretch from left to right, how do you fix css?

    hide show div using nav html5 query javascript

    how to make jquery transition smoothly

    CSS classes: base+additional. How to define?

    How to avoid the text inside the bootstrap button overflow?