Share
Heute möchte ich Ihnen einen ordentlichen Trick zeigen. Wir erstellen ein Dokumentsymbol mit reinem CSS3. Darüber hinaus erfordert dieser Effekt nur ein einziges HTML-Element.
Lass uns anfangen!
Wir beginnen mit dem Hinzufügen eines einzelnen HTML-Elements: einem Ankertag. Dies ist sinnvoll, da die meisten Icons auch als Links dienen.
Dokumentsymbol
Legen wir die etwas willkürlichen Dimensionen für unser Symbol fest. Wir werden 40x56px machen - einfach für diese Demo. In einer realen Anwendung sollten Sie dies wahrscheinlich reduzieren! Denken Sie auch daran, dass wir hinzufügen müssen Bildschirmsperre, da alle Ankertags standardmäßig inline sind.
.docIcon background: #eee; Hintergrund: linearer Gradient (oben, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); Rahmen: 1px fest #ccc; Bildschirmsperre; Breite: 40px; Höhe: 56px; Position: relativ; Marge: 42px auto;
Beachten Sie, dass wir oben einen Positionierungskontext festlegen, um in Kürze mit Pseudoelementen arbeiten zu können. Sie werden feststellen, dass ich nur die offizielle CSS3-Syntax für den Verlauf verwendet habe. Möglicherweise möchten Sie auch die verschiedenen Browser-Präfixe verwenden. Um dies zu beschleunigen, können Sie Prefixr.com oder dessen API in Ihrem bevorzugten Code-Editor verwenden. Kopieren Sie einfach das obige Code-Snippet, fügen Sie es in den Textbereich von Prefixr ein und klicken Sie auf die Eingabetaste. Es werden dann alle verschiedenen vorfixierten Eigenschaften ausgespuckt:
.docIcon background: #eee; Hintergrund: -webkit-linearer Gradient (oben, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); Hintergrund: -moz-linearer Gradient (oben, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); Hintergrund: -o-linearer Gradient (oben, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); Hintergrund: -ms-linearer Gradient (oben, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); Hintergrund: linearer Gradient (oben, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); Rahmen: 1px fest #ccc; Bildschirmsperre; Breite: 40px; Höhe: 56px; Position: relativ; Marge: 42px auto;
Als Nächstes fügen Sie etwas Glanz hinzu, indem Sie CSS-Box-Schatten verwenden. Ich habe auch die verwendet Texteinzug Eigenschaft, um den Text auszublenden.
.docIcon ? -webkit-box-shadow: inset rgba (255,255,255,0,8) 0 1px 1px; -moz-box-shadow: Einschub rgba (255,255,255,0,8) 0 1px 1px; Box-Schatten: Einfügung rgba (255,255,255,0,8) 0 1px 1px; Gedankenstrich: -9999em;
Als Nächstes müssen wir einen abgerundeten Eckeneffekt erzeugen. Fügen Sie folgendes hinzu:
.docIcon ? -webkit-border-radius: 3px 15px 3px 3px; -moz-border-radius: 3px 15px 3px 3px; Grenzradius: 3px 15px 3px 3px;
Durch das Übergeben von vier Werten können wir die oberen, rechten, unteren und linken Radien entsprechend festlegen. Dies ist ähnlich wie beim Anwenden von Rändern oder Auffüllen.
Um die Illusion einer gewellten Ecke zu erzeugen, verwenden wir generierte Inhalte oder Pseudoelemente.
Fügen Sie zunächst Inhalt hinzu :Vor unser icon In diesem Fall benötigen wir keinen spezifischen Text. Stattdessen müssen wir eine 15px-Box erstellen und einen Hintergrundverlauf anwenden.
.docIcon: vor content: ""; Bildschirmsperre; Position: absolut; oben: 0; rechts: 0; Breite: 15px; Höhe: 15px; Hintergrund: #ccc; Hintergrund: -webkit-linearer Gradient (45 Grad, #fff 0, #eee 50%, #ccc 100%); Hintergrund: -moz-linearer Gradient (45 Grad, #fff 0, #eee 50%, #ccc 100%); Hintergrund: -o-linearer Gradient (45 Grad, #fff 0, #eee 50%, #ccc 100%); Hintergrund: -ms-linearer Gradient (45 Grad, #fff 0, #eee 50%, #ccc 100%); Hintergrund: linearer Gradient (45 Grad, #fff 0, #eee 50%, #ccc 100%); -webkit-box-shadow: rgba (0,0,0,0,05) -1px 1px 1px, Einfügung weiß 0 0 1px; -moz-box-shadow: rgba (0,0,0,0,05) -1px 1px 1px, Einfügung weiß 0 0 1px; Box-Schatten: rgba (0,0,0,0,05) -1px 1px 1px, Einfügungsweiß 0 0 1px; Rahmen unten: 1px fest #ccc; Rahmen links: 1px fest #ccc;
Damit unser generierter Inhalt auch die rechts oben abgerundete Kante erhält, müssen wir erneut dieselben Radien verwenden, um ihn auszurichten.
? -Webkit-Grenzradius: 3px 15px 3px 3px; -moz-border-radius: 3px 15px 3px 3px; Grenzradius: 3px 15px 3px 3px;
Als nächstes verwenden wir die :nach dem psuedo -Element, um einige gestrichelte Linien zur Darstellung von herausgezoomtem Text hinzuzufügen. Wende eine Breite von 60% an und a Rand links und Rand rechts von 20% (was 100% entspricht). Als Nächstes geben wir eine Höhe an und positionieren sie an 0 0.
.docIcon: after content: ""; Bildschirmsperre; Position: absolut; links: 0; oben: 0; Breite: 60%; Marge: 22px 20% 0; Höhe: 15px;
Das Erstellen einer Reihe von Zeilen ist etwas schwierig. Wenn wir clever sind, können wir CSS-Gradienten verwenden, um diesen Effekt zu erzielen. Teilen Sie zuerst die Gesamthöhe durch fünf und setzen Sie jeden Block mit einer vollen Füllung. In der Abbildung unten finden Sie eine klarere Darstellung dieses Denkens. Schick, ay? Es ist eine schöne Technik, die Sie in Ihrem Werkzeuggürtel haben.
.docIcon: nach ? Hintergrund: #ccc; Hintergrund: -webkit-linearer Gradient (oben, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%); Hintergrund: -moz-linearer Gradient (oben, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%); Hintergrund: -o-linearer Gradient (oben, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%); Hintergrund: -ms-linearer Gradient (oben, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%); Hintergrund: linearer Gradient (oben, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80 %, #ccc 100%);
Live Demo Hat dir die Post gefallen? Haben andere ähnliche Tricks? Wenn ja, verlinken Sie sie in den Kommentaren unten.
Accentsconagua