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 to hide last divider in list of comments using CSS?

    How can I align the tops of two paragraphs in this example without resorting to an empty header? (e.g.,

     

    )

    How to achieve table's centering capabilities without tables

    How can I swap out text in a text-box by using only CSS mouse related events?

    How to Override CSS class?

    Hide/Show menu with increase/decrease of width

    How to make a content property in css use php

    How do I change my link's image on click?

    How to positioning an element over another in CSS

    How to set a css class of the widget type with Symfony2

    How to Make Auto Size Horizontal Line DIV using css?

    How to align lists to top right?

    How to add link without ruining transition CSS/HTML

    How to view CSS/HTML in GUI?

    how to center anchor tag horizontally css

    How to make two-coloured stripe using CSS?

    server-side control - how set background with css ? (link & hover)

    How to override some CSS class settings

    How to load chosen alternative css as default css? [closed]

    How can I put a div block below another lined up vertically when they are touch and are on the same line?

    How to set variables in LESS from a dynamic website?

    How to adjust an image size with a progressive scaling on viewport resize

    Bootstrap table how hidden, when toggled visible using javascript it does not show correctly

    PHPStorm: How do I setup LESS to output to CSS directory with file watcher?

    How to set select box height in jquery moblie?

    How to create a custom vaadin component in vaadin 6

    How to set the color to the user's link color in CSS?

    How to get sourcemaps working for React Css Modules?

    How to move a div's border “up” one pixel with css

    How to prevent text style defaults during CSS transition