Heim > Artikel > Web-Frontend > Erstellen Sie einen langen Schatten mit CSS 3
Erstellen Sie einen langen Schatten mit CSS 3
- php中世界最好的语言Original
- 2017-11-18 11:35:511619Durchsuche
Im derzeit beliebtesten Flat-Design ist der lange Schatten eine bewährte Designfähigkeit. Heute werde ich Ihnen beibringen, wie Sie einen langen Schatten erstellen und wie Sie PS und CSS3 verwenden, um den langen Schatteneffekt zu erzielen.
Das Folgende ist beispielsweise ein sehr klassisches Langprojektionsdesign:
Fotografen wählen normalerweise lange Schatten, um Bildern dramatische Effekte zu verleihen. In der Natur entstehen lange Schatten in der Dämmerung, wenn die Sonne nahe am Horizont steht und Objekte auf dem horizontalen Boden beim Betrachten einen langen Schatteneffekt haben von oben. Beim Interface-Design nutzen wir normalerweise den Effekt der Simulation eines 45-Grad-Winkels, um Sonnenlicht aus der nordwestlichen Ecke zu simulieren und so einen scharfen Kontrast zum Thema des Designs zu bilden. Es gibt viele Möglichkeiten, lange Schatten mit Photoshop zu erstellen. Lesen Sie mehr über die vier häufig verwendeten Methoden zum Erstellen langer Schatteneffekte. Die vierte Methode, die mir normalerweise am besten gefällt, ist das Kopieren und Verschieben von Ebenen. Der Effekt, wie dieses Bild, das ich auf Behance hochgeladen habe,
Das allgemeine Prinzip besteht darin, dass Sie die aktuelle Ebene kopieren, den Ebenenstil auswählen und sie mit Schwarz füllen , und verschieben Sie es dann unter die ursprüngliche Ebene. Anschließend können Sie mit der Maus oder dem Filter schwenken, eine Einheit nach oben und eine Einheit nach unten verschieben.
Dann duplizieren wir diese Ebene und übersetzen sie erneut. Dann führen wir die beiden Schattenebenen zusammen
Dann wiederholen wir die Aktion, das heißt, kopieren Sie diese Ebene einmal, verschieben Sie sie nach unten und verschieben Sie sie um 2 Einheiten nach rechts. Führen Sie die Zusammenführung erneut durch. Kopieren, verschieben Sie eine gerade Anzahl von Einheiten, führen Sie sie zusammen und wiederholen Sie den Vorgang.
Natürlich ist es bequemer, wenn Sie Filter->Andere->Verschiebung verwenden
Das ist ungefähr der Effekt und Dann stellen Sie es endgültig ein. Die Transparenz ist gut.
Oben geht es um Design. Wie erzielt das Frontend einen solchen Effekt durch CSS-Code? Das erste, woran jeder denkt, ist text-shadow
, das bereits von CSS3 unterstützt wird. Fügen wir zunächst eine auffälligere Farbe zum Hintergrund hinzu . Let's make it strong flatcolors ist eine Website mit vielen Farbschemata, die Sie jederzeit verwenden können. Lassen Sie uns die Hintergrundfarbe für den Körper festlegen. Ich bevorzuge Blau. Als nächstes gehen wir zu Google Font, um die Schriftart auszuwählen, die uns gefällt. Es spielt keine Rolle, ob Sie der Meinung sind, dass die Standardschriftart akzeptabel ist. Wählen Sie einfach Passion One und fügen Sie sie dann in den CSS-Code ein.
Zu diesem Zeitpunkt geben wir ein paar Buchstaben in unseren Körper ein, z. B. langer Schatten@import url(‘https://fonts.googleapis.com/css?family=Passion+One‘);Dann definieren wir einige grundlegende Stile von h1;
<body> <h1>Long Shadow</h1> </body>
Der nächste Schritt besteht darin, den Code für Textschatten zu schreiben, was das Wichtigste ist.
h1{
text-align:center;
font-size:6rem;
padding-top:2rem;
}Der Wert von Textschatten kann die Verschiebung der x- und y-Achse sowie die Unschärfe umfassen Radius und Farbe.
Wir müssen nur wiederholt schwenken und dann die Farbe an die Hintergrundfarbe anpassen./* offset-x | offset-y | blur-radius | color */ text-shadow: 1px 1px 2px black;
Das ist der Code wie dieser
Aber es ist definitiv unrealistisch, ihn so aufzuschreiben. Sie müssen die Schrittgröße und das Wachstum wiederholt berechnen. Glücklicherweise verfügen wir über Vorverarbeitungs-Frameworks wie SCSS und weniger. Wir können die Farbumwandlung und das Wachstum sehr bequem durchführen.text-shadow： 1px 1px rgba(18, 67, 100, 0.5) , 2px 2px rgba(20, 72, 107, 0.51) , 3px 3px rgba(22, 76, 113, 0.52) , 4px 4px rgba(23, 81, 119, 0.53) , 5px 5px rgba(25, 85, 125, 0.54) ...
SCSS-Code-Implementierungsreferenz
Der Ausführungseffekt der Funktion ist ähnlich wie beim Einfügen einer Farbe a und einer Farbe b, wobei Farbe a die Farbe ist, bei der der Schatten beginnt. und Farbe b. Dabei handelt es sich um die Farbe des Hintergrunds, die Schrittgröße ähnelt der Länge Ihres Schattens und die letzte Stufe ist die Transparenz. Dann erfolgt die Berechnung jedes Mal um eine Einheit, dann verringern wir die Farbe prozentual und organisieren schließlich den Stil.@function longshadow($color_a,$color_b,$stepnum, $opacity: 1){
$gradient_steps: null;
<a href="http://www.jobbole.com/members/lowkey2046">@for</a> $i from 1 through $stepnum {
$weight: ( ( $i - 1 ) / $stepnum ) * 100;
$colour_mix: mix($color_b, rgba($color_a, $opacity), $weight);
$seperator: null;
@if($i != $stepnum){
$seperator: #{','};
}
$gradient_steps: append( #{$gradient_steps}, #{$i}px #{$i}px $colour_mix $seperator );
}
@return $gradient_steps;
}Derzeit müssen wir diese Funktion nur im h1-Stil verwenden
wobei $bg: die Farbe unseres Hintergrunds ist: #3498db.@include text-shadow(longshadow(darken($bg,30%),$bg,50, 0.5));
Verwandte Lektüre:
Das obige ist der detaillierte Inhalt vonErstellen Sie einen langen Schatten mit CSS 3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Zusammenfassung von sechs Implementierungsmethoden des JSDOMReady-Ereignisses
- Beispiele für die CSS-Implementierung verschiedener Spaltenlayouts auf der Seite
- Reine CSS3-Vollbild-Diashow-Effekte
- Reiner CSS3-Stil mit coolen, farbenfrohen 3D-Schaltflächen
- Atemberaubende sechseckige CSS3-Menüanimationseffekte