Effiziente CSS3 Long Shadows auf div mit abgerundeten Ecken
Ich erstelle derzeit lange Schatten in CSS mit einem Code ähnlich dem Folgenden:
%Vor%Das Problem ist nun, dass viele schwächere Geräte wie Mobiltelefone oder ältere Computer mit einem langen Schatten (200px) nicht mehr mit diesen Schatten umgehen können. Ich suchte nach einer Alternative zu dieser Methode, um lange Schatten online zu machen, konnte aber keine andere finden.
Das Element, auf das dieser Schatten angewendet wird, sieht ähnlich aus:
(div hat einen Rand-Radius von 5px)
Hintergrundfarbe ist: #b42b2b
Der dunkelste Punkt des Schattens ist: rgba(0,0,0,60%)
2 Antworten
Sie können dies mit Pseudo-Elementen, linearen Gradienten und Transformationen tun.
Ohne abgerundete Ecken:
Aktualisieren
Abgerundete Ecken erfordern ein wenig mehr Finesse, da Sie die Vorher / Nachher-Pseudoelemente genau an der richtigen Stelle positionieren müssen, damit keine Löcher in den Ecken erscheinen und die Überlappung der Schatten verhindert wird. Ein Präprozessor wie LESS / SASS kann definitiv die Mathematik erleichtern, die benötigt wird, um es richtig zu machen.
Mit abgerundeten Ecken:
Sie können die Schattenanzeige nur für Geräte mit einer größeren Bildschirmbreite erstellen, indem Sie Medienabfragen verwenden. Ich würde Folgendes vorschlagen:
@media (Mindestbreite: 900px) {.main { box-shadow: deine Einstellungen }}
Nach der Implementierung dieses Codes und dem Löschen des Box-Shadows von seinem Ursprungsort erscheint der Box-Schatten nur auf dem Bildschirm, der mindestens 900 Pixel breit ist.