So stellen Sie die Schriftart in CSS dreidimensional ein

HTML-Code:

<div contenteditable="true" class="text effect01">前端开发</div>

Wie stellt man die Schriftart in CSS dreidimensional ein?

Im CSS müssen wir zunächst die globalen Einstellungen festlegen. Um visuelle Ermüdung zu vermeiden, haben wir die Hintergrundfarbe und die Textfarbe geändert.

body{  
  background-color: #666;  
}  
@import url(http://fonts.googleapis.com/css?family=Dosis:500,800);  
.text {  
    font-family:"微软雅黑", "Dosis", sans-serif;  
    font-size: 80px;  
    text-align: center;  
    font-weight: bold;  
    line-height:200px;  
    text-transform:uppercase;  
    position: relative;  
}

Dann der Kerncode des einfachen Effekts

/*Einfacher Effekt*/

.effect01{
    background-color: #7ABCFF;
    color:#FFD300;
    text-shadow:
        0px 0px 0 #b89800, 
        1px -1px 0 #b39400, 
        2px -2px 0 #ad8f00, 
        3px -3px 0 #a88b00, 
        4px -4px 0 #a38700, 
        5px -5px 0 #9e8300, 
        6px -6px 0 #997f00, 
        7px -7px 0 #947a00, 
        8px -8px 0 #8f7600, 
        9px -9px 0 #8a7200, 
        10px -10px 0 #856e00, 
        11px -11px 0 #806a00, 
        12px -12px 0 #7a6500, 
        13px -13px 12px rgba(0, 0, 0, 0.55), 
        13px -13px 1px rgba(0, 0, 0, 0.5);
}

Daraus können wir die Elemente der Verwendung von Textschatten zur Erzielung einer Drei erkennen -dimensionaler Effekt Es gibt drei:

Setzen Sie mehrere Schatten, um ein Gefühl von Tiefe zu erzeugen,

Die horizontalen und vertikalen Versatzänderungen der Schatten erzeugen ein Richtungsgefühl und

Durch den Farbverlauf der Schatten entsteht ein Gefühl der Staffelung.

Das obige ist der detaillierte Inhalt vonSo stellen Sie die Schriftart in CSS dreidimensional ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!