Comment utiliser dp pour calculer les ombres - développement web HTML CSS

Question

J'ai une question sur l'utilisation de dp dans le développement web. Je suis en train de lire google material design guidelines et ils parlent d'élévation et d'ombres basées sur dp. Comment puis-je l'utiliser dans le développement web? Est-il possible de calculer cette façon de créer une ombre basée sur dp avec HTML CSS?

Exemple de la page Web:

bouton surélevé

état de repos: 2DP

état Pressé: 8DP

Pour bureau uniquement, les boutons élevés peuvent avoir une élévation de:

État de repos: 0dp

état comprimé: 2DP

Answer 1

Comme mentionné dans le Google Material design documents:

A dp est égale à un pixel physique sur un écran avec une densité de 160. Pour calculer dp:

dp = (largeur en pixels * 160)/densité d'écran

Lors de l'écriture de CSS, utilisez px partout où dp ou sp est indiqué. Dp seulement besoin de être utilisé en développement pour Android.

et densité de l'écran est

résolution de l'écran se réfère aux pixels numériques totaux dans un affichage.

densité de l'écran = largeur de l'écran (ou hauteur) en pixels/largeur de l'écran (ou hauteur) en pouces

Ainsi, il dépend de la largeur de l'écran et la hauteur. Il y a quelques convertisseurs sur le web pour calculer pour chaque densité. Mais comme la plupart des écrans sont encore à 72dpi (non mentionnés sur les écrans HDPI), je pense que c'est un bon point de départ.

Answer 2

Aucune unité CSS n'est réellement indépendante des périphériques. Voir http://www.w3.org/TR/css3-values/#absolute-lengths. En particulier, les unités absolues peuvent ne pas correspondre à leurs mesures physiques.

Si les unités physiques étaient conformes à leur objectif, vous pourriez utiliser quelque chose comme des points; les points sont assez proches dps:

1 in = 72 pt 
1 in = 160 dp 
=> 1 dp = 72/160 pt 

Si vous utilisez SCSS, vous pouvez écrire une fonction pour revenir en pts:

@function dp($_dp) { 
    @return (72/160) * $_dp + pt; 
} 

et de l'utiliser:

.shadow-2 { 
    height: dp(2); 
} 

Answer 3

Pour l'ombre des matériaux ils n'utilisent vraiment que le concept de dp pour tenter de relayer comment les éléments devraient être superposés.

à-dire

2dp < 8dp // 2 is layered under 8 
// or 
2dp (resting) => 8dp (focused) 

Ce qu'ils font référence à z est profondeur (ou sur l'axe des z). Cela ne peut pas être converti directement en CSS. Lorsqu'ils parlent de niveaux d'élévation, ils ne font pas référence à x & y ou à la largeur & dimension hauteur. See design guide page on elevation.

Si vous recherchez simplement les valeurs des ombres CSS vérifier ici. https://github.com/mrmlnc/material-shadows/blob/master/material-shadows.scss

Cela est aussi proche de la conversion de z profondeur dp en CSS valeurs. Les valeurs CSS font correspondent aux éléments Polymer de Google mais il est donc probable que ce soit sur.

Bonne chance!