20 häufig verwendete CSS-Techniken

1. Schwarzweißbilder

Mit diesem Code werden Ihre Farbfotos als Schwarzweißfotos angezeigt, ist das nicht cool?

img.desaturate {
filter: greyscale(100 %);
-webkit-filter: greyscale(100 %);
-moz-filter: greyscale(100 %);
-ms-filter: greyscale(100%);
-o-filter: greyscale(100%);
}

2. Verwendung: not() Rahmen auf das Menü anwenden/Anwendung aufheben

Zuerst einen Rahmen zu jedem Menüpunkt hinzufügen

/* Rahmen hinzufügen */
.nav li {
border-right : 1px solid #666;
}

...Dann das letzte Element entfernen...

// Rand entfernen /

.nav li: last-child {
border-right: none;
}

... Sie können die Pseudoklasse :not() direkt verwenden, um Elemente anzuwenden:

.nav li :not(:last-child) {
border-right: 1px solid #666;
}

Auf diese Weise wird der Code sauber, leicht lesbar und leicht zu verstehen.

Wenn Ihr neues Element über Geschwisterelemente verfügt, können Sie natürlich auch den universellen Geschwisterselektor (~) verwenden:

..nav li:first-child ~ li {

border-left: 1px solid #666;
}

3. Oberer Schatten der Seite

Das folgende einfache CSS3-Code-Snippet kann Fügen Sie der Webseite einen schönen oberen Schatteneffekt hinzu:

body:before {
content: "";
position: fixiert;
top: -10px;
left: 0 ;
width: 100%;
height: 10px;

-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz- box -shadow: 0px 0px 10px rgba(0,0,0,.8);
          box-shadow: 0px 0px 10px rgba(0,0,0,.8); 100;
}

4. Zeilenhöhe zum Text hinzufügen

Sie müssen nicht jedem p-, h-Tag usw. eine Zeilenhöhe hinzufügen. Fügen Sie einfach zum Körper hinzu:

body {

line-height: 1;

}


Auf diese Weise können Textelemente problemlos vom Körper erben.

5. Alles vertikal zentrieren

Um alles vertikal zu zentrieren, ist es so einfach:

html, body {

height : 100%;

margin: 0;
}

body {
-webkit-align-items: center;
-ms-flex-align: center; center;
display: -webkit-flex;
display: flex;
}


Sehen Sie, ist das ganz einfach?

Hinweis: Seien Sie vorsichtig mit Flexbox in IE11.

6. Durch Kommas getrennte Liste

Lassen Sie die HTML-Listenelemente wie eine echte, durch Kommas getrennte Liste aussehen:

ul > li :not (:last-child)::after {

content: ",";

}

Verwenden Sie die Pseudoklasse :not() für das letzte Listenelement.

7. Verwenden Sie das negative n-te Kind, um Elemente auszuwählen.

Verwenden Sie das negative n-te Kind in CSS, um Element 1 bis Element n auszuwählen.

li {

display: none;

}

/* Elemente 1 bis 3 auswählen und anzeigen */
li:nth-child(-n 3) {
display: block;
}



8. Verwenden Sie SVG für Symbole

Es gibt keinen Grund, SVG nicht für Symbole zu verwenden:

.logo {

background: url("logo.svg");

}

SVG verfügt über eine gute Skalierbarkeit für alle Auflösungstypen und unterstützt alle Browser alle kehrten zu IE9 zurück. Auf diese Weise können Sie .png-, .jpg- oder .gif-Dateien vermeiden.

9. Anzeigetext optimieren

Manchmal werden Schriftarten nicht auf allen Geräten optimal angezeigt, also lassen Sie sich von Ihrem Gerätebrowser helfen:

html {

-moz-osx-font-smoothing: greyscale;

-webkit-font-smoothing: antialiased;

text-rendering: optimizeLesibility;
}


Hinweis: Bitte nutzen Sie „optimizeLegibility“ verantwortungsvoll. Außerdem bietet IE/Edge keine Unterstützung für die Textwiedergabe.

10. Verwenden Sie die maximale Höhe für reine CSS-Schieberegler

Verwenden Sie die maximale Höhe und das Ausblenden von Überläufen, um einen reinen CSS-Schieberegler zu implementieren:

. slider ul {

max-height: 0;

overlow: versteckt;

}

.slider:hover ul {
max-height: 1000px;
Transition: . 3s Leichtigkeit;
}



11. Box-Größe erben

Box-Größe HTML erben lassen:

html {

box-sizing: border-box;

}

*, *:before, *:after {
box-sizing: inherit;
}


Dies erleichtert das Ändern der Boxgröße in Plugins oder anderen Komponenten, die andere Verhaltensweisen nutzen.

12. Tabellenzellen haben die gleiche Breite

Es ist sehr mühsam, mit Tabellen zu arbeiten. Verwenden Sie daher unbedingt das Tabellenlayout: Fixed, um es beizubehalten die Zellen mit der gleichen Breite:

.calendar {

Tabellenlayout: fest;

}

13. Verwenden Sie Flexbox, um verschiedene zu entfernen Hacks in den Rändern

Wenn Sie Spaltentrennzeichen verwenden müssen, können Sie die Hacks für das n-te, erste und letzte untergeordnete Element durch die Leerzeichen-Between-Eigenschaft von Flexbox beseitigen:

.list {
display : flex;
justify-content: space-between;
}

.list .person {
flex-basis: 23%;
}

Listentrennzeichen werden jetzt in gleichmäßigen Abständen angezeigt.

14. Attributauswahl für leere Links verwenden

Zeigen Sie den Link an, wenn das a-Element keinen Textwert, das href-Attribut jedoch einen Link hat:

a[href^="http"]:empty::before {
content: attr(href);
}

ist ziemlich praktisch.

15. Maus-Doppelklick erkennen

HTML:

Doppelklicken Sie auf mich .test3 span a { position: relative; z-index: 2;
}

.test3 span a:hover, .test3 span a:active {
z-index: 4 ; }

.test3 span input {

Hintergrund: transparent;

Rahmen: 0;
Cursor: Zeiger;
Position: absolut;
oben: -1px;
left: 0;
width: 101%; /* Hacky */
height: 301%; /* Hacky */
z-index: 3;
}
.test3 span input:focus {
Hintergrund: transparent;
Rahmen: 0;
Z-Index: 1;
}



16. CSS-Schreibdreieck


Verwende Rahmen zum Schreiben von Dreieckscode und ist mit IE6 kompatibel.

/* einen nach oben zeigenden Pfeil erstellen */
div.arrow-up {
width: 0px ;
height:0px;
border-left:5px solid transparent; /* left Pfeil schräg */

border-right:5px solid transparent */

border- unten :5px solide #2f2f2f; /* unten, Hintergrundfarbe hier hinzufügen */ Schriftgröße:0px; Zeilenhöhe:0px;

}

/* einen Pfeil erstellen das zeigt nach unten */

div.arrow-down {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #2f2f2f;
font-size:0px;
line-height:0px;
}

/* einen Pfeil erstellen, der nach links zeigt */
div.arrow-left {
width:0px;
height:0px;
border-bottom:5px solid transparent; /* left Arrow slant */
border-top:5px solid transparent ; /* Pfeil nach rechts schräg */
border-right:5px solid #2f2f2f; /* unten, Hintergrundfarbe hinzufügen */
font-size:0px;
line-height:0px;
}

/* einen Pfeil erstellen, der nach rechts zeigt */
div.arrow-right {
width:0px;
height:0px;
border-bottom:5px durchgehend transparent; /* linker Pfeil schräg */
border-top:5px solid transparent; /* rightarrow slant */
border-left:5px solid #2f2f2f; /* unten, Hintergrundfarbe hinzufügen */
Schriftgröße: 0 Pixel;
Zeilenhöhe: 0 Pixel;
> Die Verwendung von calc() ähnelt einer Funktion, die dynamische Werte für Elemente festlegen kann:

/* basic calc */
.simpleBlock {
width: calc( 100% - 100px);
}

/* calc in calc */
.complexBlock {
width: calc(100% - 50% / 3);
padding: 5px calc(3% - 2px);
margin-left: calc(10% 10px);
}

18. Textverlauf

Der Textverlaufseffekt ist sehr beliebt, die Verwendung von CSS3 kann leicht implementiert werden:

h2[data-text] {
position: relative;
}
h2[data-text] ::after {
content: attr (data-text);
z-index: 10;
color: #e3e3e3;
position: absolute;
top: 0;
links: 0;
-webkit- mask-image: -webkit-gradient(linear, links oben, links unten, from(rgba(0,0,0,0)), color-stop(50%, rgba( 0,0,0,1)), to(rgba(0,0,0,0)));}

19. Mausereignisse deaktivieren

Mit den neuen Zeigerereignissen von CS3 können Sie Mausereignisse für Elemente deaktivieren. Beispielsweise ist ein Link nicht anklickbar, wenn der folgende Stil festgelegt ist.

.disabled { pointer-events: none; Schön!

.blur {
Farbe: transparent; Textschatten: 0 0 5px rgba(0,0,0,0.5);
}