8 grundlegende CSS-Tipps und Tricks, die jeder Entwickler kennen sollte

CSS wird verwendet, um einer Webseite ein Styling hinzuzufügen, nachdem Sie das HTML-Skelett eingerichtet haben. Darüber hinaus können Sie mit nur wenigen Codezeilen schicke Designs in CSS erstellen.

Diese CSS-Tricks sollte jeder Entwickler kennen, um seine Projekte schnell und effizient zu entwickeln. Sie werden Ihre Produktivität mit Sicherheit auf die nächste Stufe steigern – fangen wir an.

1. Hover-Effekte

Sie können einem HTML-Element mithilfe von einen Hover-Effekt hinzufügen :schweben Wähler.

Beispiel: Hover-Effekt zu einem Schaltflächenelement hinzufügen.

HTML Quelltext:

Schwebe über mir

CSS-Code:

Schaltfläche: schweben {
Farbe: #0062FF;
Rand: #0062FF solide 1px;
Hintergrund: #FFFF99;
}

Sie können mit diesem Code herumspielen und Effekte wie hinzufügen einblenden,Einwachsen, schräg, und so weiter. Machen Sie es sich zu eigen!

CSS-Einblendeffekt beim Hover

Taste{
Opazität: 0,5;
}
Schaltfläche: schweben {
Deckkraft: 1;
}

CSS-Einwachseffekt beim Hover

Schaltfläche: schweben {
-webkit-transform: Maßstab (1,2);
-ms-transformieren: Skala (1,2);
transformieren: skalieren (1.2);
}

2. Ändern Sie die Größe von Bildern, damit sie in einen div-Container passen

Sie können die Größe eines Bildes ändern, damit es in einen div-Container passt, indem Sie die verwenden Höhe, Breite, und objekttauglich Eigenschaften.

HTML Quelltext:

CSS-Code:

.Zufälliges Bild {
 Höhe: 100 %;
 Breite: 100 %;
 objekttauglich: enthalten;
 }

3. Überschreiben aller Stile

Sie können alle anderen Stildeklarationen eines Attributs (einschließlich Inline-Stile) mithilfe von überschreiben !wichtig Direktive am Ende eines Werts.

HTML Quelltext:

 Hallo Welt!

CSS-Code:

P {
 Hintergrundfarbe: gelb;
 }
 .Klassenname {
 Hintergrundfarbe: blau !wichtig;
 }
 #idName {
 Hintergrundfarbe: grün;
 }

In diesem Beispiel ist die !wichtig Regel setzt alle anderen außer Kraft Hintergrundfarbe Deklarationen und stellt sicher, dass die Hintergrundfarbe auf Blau und nicht auf Grün gesetzt wird.

4. Text mit Auslassungspunkten abschneiden

Sie können überfließenden Text mit Auslassungspunkten abschneiden (...) Verwendung der Textüberlauf CSS-Eigenschaft.

HTML Quelltext:

 Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.

CSS-Code:

.text {
 Leerzeichen: nowrap;
 Überlauf versteckt;
 Textüberlauf: Auslassungspunkte;
 Breite: 200px;
 }

Verwandt: Das CSS-Box-Modell mit Beispielen erklärt

5. Verwenden von Texttransformation

Sie können die Groß-, Klein- oder Großschreibung von Text erzwingen, indem Sie die verwenden Text-Transformation CSS-Eigenschaft.

Großbuchstaben

HTML Quelltext:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS-Code:

.uppercase {
 Texttransformation: Großbuchstaben;
 }

Kleinbuchstaben

HTML Quelltext:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS-Code:

.Kleinbuchstaben {
 Texttransformation: Kleinbuchstaben;
 }

Profitieren

HTML Quelltext:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS-Code:

.kapitalisieren {
 Texttransformation: Großschreibung;
 }

6. Verwenden der einzeiligen Eigenschaftsdeklaration

Sie können die Kurzschrifteigenschaften in CSS verwenden, um Ihren Code prägnant und leicht lesbar zu machen.

Zum Beispiel CSS Hintergrund ist eine abgekürzte Eigenschaft, mit der Sie die Werte von definieren können Hintergrundfarbe, Hintergrundbild, Hintergrund Wiederholung, und Hintergrund-Position. Ebenso können Sie Eigenschaften für definieren Schriftart, Grenze, Rand, und Polsterung.

Einzeilige Eigenschaftsdeklaration im Hintergrund

Hintergrundfarbe: schwarz;
Hintergrundbild: URL (images/xyz.png);
Hintergrundwiederholung: keine Wiederholung;
Hintergrundposition: links oben;

Sie können die obige Deklaration auf eine einzige Zeile vereinfachen:

Hintergrund: schwarze URL (images/xyz.png) ohne Wiederholung links oben;

Die Kurzschrift-Eigenschaften sind sehr bequem zu verwenden, aber Sie müssen einige berücksichtigen knifflige Grenzfälle (wie in MDN Web Docs beschrieben) während der Verwendung.

QuickInfos sind eine Möglichkeit, weitere Informationen zu einem Element bereitzustellen, wenn der Benutzer den Mauszeiger über das Element bewegt.

HTML Quelltext:

Rechter Tooltip
Dies ist der Tooltip-Text

CSS-Code:

Karosserie {
 Textausrichtung: Mitte;
 }
 .tooltip_div {
 Position: relativ;
 Anzeige: Inline-Block;
 }
 .tooltip_div .tooltip {
 Sichtbarkeit: versteckt;
 Breite: 170px;
 Hintergrundfarbe: blau;
 Farbe: #fff;
 Textausrichtung: Mitte;
 Randradius: 6px;
 Polsterung: 5px 0;
 /* Tooltip positionieren */
 Position: absolut;
 Z-Index: 1;
 oben: -5px;
 links: 105 %;
 }
 .tooltip_div: Bewegen Sie den Mauszeiger über .tooltip {
 Sichtbarkeit: sichtbar;
 }

HTML Quelltext:

Linker Tooltip
Dies ist der Tooltip-Text

CSS-Code:

Karosserie {
 Textausrichtung: Mitte;
 }
 .tooltip_div {
 Position: relativ;
 Anzeige: Inline-Block;
 }
 .tooltip_div .tooltip {
 Sichtbarkeit: versteckt;
 Breite: 170px;
 Hintergrundfarbe: blau;
 Farbe: #fff;
 Textausrichtung: Mitte;
 Randradius: 6px;
 Polsterung: 5px 0;
 /* Tooltip positionieren */
 Position: absolut;
 Z-Index: 1;
 oben: -5px;
 rechts: 105 %;
 }
 .tooltip_div: Bewegen Sie den Mauszeiger über .tooltip {
 Sichtbarkeit: sichtbar;
 }

HTML Quelltext:

Oberer Tooltip
Dies ist der Tooltip-Text

CSS-Code:

Karosserie {
 Textausrichtung: Mitte;
 }
 .tooltip_div {
 Rand oben: 100px;
 Position: relativ;
 Anzeige: Inline-Block;
 }
 .tooltip_div .tooltip {
 Sichtbarkeit: versteckt;
 Breite: 170px;
 Hintergrundfarbe: blau;
 Farbe: #fff;
 Textausrichtung: Mitte;
 Randradius: 6px;
 Polsterung: 5px 0;
 /* Tooltip positionieren */
 Position: absolut;
 Z-Index: 1;
 unten: 100 %;
 links: 50 %;
 Rand links: -60px;
 }
 .tooltip_div: Bewegen Sie den Mauszeiger über .tooltip {
 Sichtbarkeit: sichtbar;
 }

HTML Quelltext:

Unterer Tooltip
Dies ist der Tooltip-Text

CSS-Code:

Karosserie {
 Textausrichtung: Mitte;
 }
 .tooltip_div {
 Rand oben: 100px;
 Position: relativ;
 Anzeige: Inline-Block;
 }
 .tooltip_div .tooltip {
 Sichtbarkeit: versteckt;
 Breite: 170px;
 Hintergrundfarbe: blau;
 Farbe: #fff;
 Textausrichtung: Mitte;
 Randradius: 6px;
 Polsterung: 5px 0;
 /* Tooltip positionieren */
 Position: absolut;
 Z-Index: 1;
 Top 100%;
 links: 50 %;
 Rand links: -60px;
 }
 .tooltip_div: Bewegen Sie den Mauszeiger über .tooltip {
 Sichtbarkeit: sichtbar;
 }

Sie können auch die Bootstrap-Bibliothek verwenden, um benutzerdefinierte zu erstellen Bootstrap-Tooltips.

8. Schatteneffekte hinzufügen

Sie können CSS-Schatteneffekte zu Texten und Elementen hinzufügen, indem Sie die verwenden Text-Schatten und das Box Schatten CSS-Eigenschaften bzw.

CSS-Textschatten

Der Text-Schatten Die CSS-Eigenschaft fügt dem Text Schatten und Ebenen hinzu. Der Text-Schatten -Eigenschaft akzeptiert eine durch Kommas getrennte Liste von Schatten, die auf den Text angewendet werden sollen.

Syntax der CSS-Eigenschaft text-shadow:

/* Sie können 4 Argumente mit der CSS-Eigenschaft text-shadow verwenden:
offset-x, offset-y, blur-radius und color */
/* offset-x | offset-y | Unschärferadius | Farbe */
Textschatten: 2px 2px 4px rot;
/* Farbe | offset-x | offset-y | Unschärferadius */
Textschatten: #18fa3e 1px 2px 10px;

Notiz: Die Argumente color und blur-radius sind optional.

Verwandt: So verwenden Sie CSS-Textschatten: Tricks und Beispiele

Beispielsweise:

Hintergrund: #e74c3c;
Farbe: #fff;
Schriftfamilie: lato;
Textschatten: 1px 1px RGBA (123, 25, 15, 0,5), 2px 2px RGBA (129, 28, 18, 0,51), 3px 3px RGBA (135, 31, 20, 0,52), 4px 4px RGBA (140, 33, 22, 0,53), 5 Pixel 5 Pixel RGB (145, 36, 24, 0,54), 6 Pixel 6 Pixel RGB (150, 38, 26, 0,55), 7 Pixel 7 Pixel RGB (154, 40, 28, 0,56), 8 Pixel 8 Pixel RGB (158, 42, 30, 0,57), 9 Pixel 9 Pixel RGB (162, 44, 31, 0,58), 10 Pixel 10 Pixel RGB (166, 45, 33, 0,59), 11 Pixel 11 Pixel RGB (169, 47, 34, 0,6), 12 Pixel 12 Pixel RGB (173, 48, 36, 0,61), 13 Pixel 13 Pixel RGB (176, 50, 37, 0,62), 14 Pixel 14 Pixel RGB (178, 51, 38, 0,63), 15 Pixel 15 Pixel RGB (181, 52, 39, 0,64), 16px 16px RGB (184, 54, 40, 0,65), 17px 17px RGB (186, 55, 41, 0,66) 195, 59, 45, 0,7), 22 Pixel 22 Pixel RGB (197, 60, 46, 0,71), 23 Pixel 23 Pixel RGB (199, 61, 47, 0,72), 24 Pixel 24 Pixel RGB (201, 62, 47, 0,73), 25 Pixel 25 Pixel RGB (202, 62, 48, 0,74), 26 Pixel 26 Pixel RGB (204, 63, 49, 0,75), 27px 27px RGB (206, 64, 49, 0,76), 28px 28px RGB (207, 65, 50, 0,77) 213, 67, 52, 0,81), 33px 33px rgba (214, 68, 53, 0,82), 34px 34 Pixel RGB (215, 69, 53, 0,83), 35 Pixel 35 Pixel RGB (216, 69, 54, 0,84), 36 Pixel 36 Pixel RGB (218, 70, 54, 0,85), 37 Pixel 37 Pixel RGB (219, 70, 55, 0,86), 38px 38px RGB (220, 71, 55, 0,87), 39px 39px RGB (221, 71, 56, 0,88) 225, 73, 57, 0,92), 44px 44px rgba (225, 73, 58, 0,93), 45px 45 Pixel RGB (226, 74, 58, 0,94), 46 Pixel 46 Pixel RGB (227, 74, 58, 0,95), 47 Pixel 47 Pixel RGB (228, 75, 59, 0,96), 48 Pixel 48 Pixel RGB (229, 75, 59, 0,97), 49px 49px RGB (230, 75, 59, 0,98), 50px 50px RGB (230, 76, 60, 0.99);

CSS-Box-Schatten

Der Box Schatten -Eigenschaft wird verwendet, um einen Schatten auf HTML-Elemente anzuwenden.

Syntax der CSS-Eigenschaft box-shadow

Box-Schatten: [horizontaler Versatz] [vertikaler Versatz] [Unschärferadius] [optionaler Ausbreitungsradius] [Farbe];

Notiz: Die Parameter „Unschärfe“, „Spreizung“ und „Farbe“ sind optional.

Verwandt: So verwenden Sie CSS-Box-Shadow: Tricks und Beispiele

Beispielsweise:

Box-Schatten: rgba (0, 0, 0, 0,35) 0px 5px 15px;

Wenn Sie sich den vollständigen Quellcode ansehen möchten, der in diesem Artikel verwendet wird, hier das GitHub-Repository.

Gestalten Sie Ihre Website mit modernen CSS-Tricks

Das Hinzufügen von CSS-Textschatten zu einer Website ist eine großartige Möglichkeit, die Aufmerksamkeit der Benutzer auf sich zu ziehen. Es kann der Website eine gewisse Eleganz und ein einzigartiges Gefühl verleihen. Werden Sie kreativ und experimentieren Sie mit einigen Text-Schatten Beispiele, die zum Thema Ihrer Website passen könnten.

11 Beispiele für CSS-Textschatten, die Sie auf Ihrer Website ausprobieren können

Mit Textschatteneffekten in CSS können Sie viel machen, aber es kann schwierig sein, genau zu wissen, was möglich ist. Holen Sie sich Hilfe mit diesen visuellen Beispielen.

Lesen Sie weiter

Über den Autor