Material Design Elevation Correct CSS

Ich kann keinen offiziellen CSS-Code für alle Box-Shadows für die Erhöhung von Karten für Material Design finden.Material Design Elevation Correct CSS

Calculating shadow values for all Material Design elevations

Ich habe diese Antworten lesen, aber sie nicht mit dem box-shadow ausrichten, dass Google auf http://www.google.com auf ihrem Suchfeld verwendet, wenn ich eine schnelle Inspektion tun.

Der box-shadow, die Google auf dem Suchfeld wird verwendet, ist diese CSS:

box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);

Gibt es eine offizielle CSS für alle Erhebungen?

Quelle

2017-01-05 Tn Hn

Könnten Sie bitte etwas konkreter, was elevetion Richtlinien Sie wollen, es es für Karten, Schaltflächen, oder ..... Auch die offiziellen Richtlinien finden Sie unter https://material.io/guidelines/components/cards.html#cards-content-blocks ("Karten in diesem Fall") –

@CollinsA Es ist für Karten, die ich interessiert, aktualisiert die Frage –

Nach https://material.io/guidelines/von Google, Karten sollten eine Höhe von 2dp haben, wenn ruhend und 8DP, wenn sie angehoben.

Und nach https://pixplicity.com,

ldpi @ 1.00dp = 0.75px = 1.00sp = 0.16mm = 0.01in = 0.45pt 
mdpi @ 1.00dp = 1.00px = 1.00sp = 0.16mm = 0.01in = 0.45pt 
tvdpi @ 1.00dp = 1.33px = 1.00sp = 0.16mm = 0.01in = 0.45pt 
hdpi @ 1.00dp = 1.50px = 1.00sp = 0.16mm = 0.01in = 0.45pt 
xhdpi @ 1.00dp = 2.00px = 1.00sp = 0.16mm = 0.01in = 0.45pt 
xxhdpi @ 1.00dp = 3.00px = 1.00sp = 0.16mm = 0.01in = 0.45pt 
xxxhdpi @ 1.00dp = 4.00px = 1.00sp = 0.16mm = 0.01in = 0.45pt

Versuchen Sie diese Umwandlungen mit der Box Schatten Größe in CSS zu bekommen.

Hinweis: Bei Desktop, die Ruhe Erhebung ist 0DP

Viel Glück :)

Quelle

2017-01-09 09:52:52

Elevation ist nicht das Problem, es ist wo der Schatten wird geworfen und um wie viele Pixel auf jeder Seite der Karte. –

Material Design Elevation Correct CSS

Antwort

Verwandte Themen