Lassen Sie uns einige nützliche CSS-Tricks lernen, um unsere Produktivität zu steigern. Diese CSS-Tricks helfen uns Entwicklern, Projekte schnell und effizient zu erstellen.
Jetzt fangen wir an.
1. CSS :in-range und :out-of-range Pseudoklassen
Diese Pseudoklassen werden verwendet, um Eingaben innerhalb und außerhalb der angegebenen Bereichsgrenzen zu formatieren.
(a) : innerhalb der Reichweite
Ein input>-Element ist im Bereich, wenn sein aktueller Wert zwischen den Grenzen der Attribute min und max liegt.
Mit dieser Pseudoklasse lässt sich leicht feststellen, ob der aktuelle Wert eines Felds akzeptabel ist.
(b): außerhalb des Bereichs
Ein input>-Element ist außerhalb der Grenzen, wenn sein aktueller Wert außerhalb des Bereichs der min- und max-Attribute liegt.
Es bietet dem Benutzer eine visuelle Anzeige, wenn der Feldwert außerhalb seines Bereichs liegt.
CSS-Code:
/* in-range */
input:in-range{
background-color: rgba(0, 255, 0, 0.25);
}
/* out-of-range */
input:out-of-range{
background-color: rgba(255, 0, 0, 0.25);
}
Ausgang:
Sie sollten sich darüber im Klaren sein, dass diese Pseudoklassen nur für bereichsbezogene Elemente gelten. Ohne diese Einschränkung können Elemente nicht innerhalb oder außerhalb der Grenzen liegen.
2. Graustufenfunktion ( ).
Wir können einen Wert von 100 % verwenden, um ein Bild von Farbe in Schwarzweiß umzuwandeln. Wenn wir diesen Wert auf 0 % setzen, bleibt das Bild unverändert.
Wenn Sie einen Wert von 100 % verwenden, wird das Bild in Schwarzweiß umgewandelt, was bedeutet, dass das Foto keine Farben enthält.
Wir können Werte zwischen 0 und 100 % verwenden, um verschiedene Effekte zu erzeugen.
CSS-Code:
.grayscale-image{
filter: grayscale(100%);
}
Ausgang:
3. Glaseffekt
Wir können Ihrem nächsten Projekt mit nur wenigen Codezeilen Glaseffekte hinzufügen. Ja, es ist wirklich so einfach. Der Glaseffekt ist wunderschön und kann Ihrem Design eine elegante Note verleihen.
Glass.CSS (Adresse: https://css.glass/) ist derzeit der beliebteste Glasformgenerator, wir können damit CSS-Glaseffekte für unsere Projekte erstellen. Alles, was wir tun müssen, ist, einige Einstellungen entsprechend den Anforderungen des Projekts anzupassen und dann den CSS-Code zu kopieren und in das eigentliche Entwicklungsprojekt einzufügen.
CSS-Code:
.glass-effect{
-webkit-backdrop-filter: blur(6.2px);
backdrop-filter: blur(6.2px);
background: rgba(255, 255, 255, 0.4);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.24);
}
4. Verwenden Sie den folgenden CSS-Code, um den Text zu formatieren
Dies sind einige sehr grundlegende Tipps zum Textstil, die jeder kennen sollte. Es stehen jedoch viele andere erweiterte Optionen zur Verfügung.
CSS-Code:
p{
font-family: Helvetica, Arial, sans-serif;
font-size: 5rem;
text-transform: capitalize;
text-shadow: 2px 2px 2px pink, 1px 1px 2px pink;
text-align: center;
font-weight: normal;
line-height: 1.6;
letter-spacing: 2px;
}
5. CSS-Clamp()-Funktion
Die CSS-Funktion clamp( ) klemmt Werte auf einen Bereich zwischen zwei oberen und unteren Grenzen. Es muss einen bevorzugten Wert, einen Mindestwert und einen Höchstwert geben.
Clamp() ist praktisch, wenn sich die Schriftgröße je nach Ansichtsfenster ändert.
CSS-Code:
p{
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}
6. Zentrieren Sie ein Div
Die wichtigste Aufgabe für einen Entwickler ist es, das div zu zentrieren. Es gibt viele andere Optionen zum Zentrieren von Divs. In diesem Beispiel verwenden wir CSS Flexbox, um ein div horizontal und vertikal zu zentrieren.
CSS-Code:
div{
display: flex;
justify-content: center;
align-items: center;
}
7. Verlauf CSS Linearer Verlauf
Um einen linearen CSS-Verlauf mit Farbverlauf zu erstellen, verwenden Sie einfach den folgenden CSS-Code.
CSS-Code:
div {
background: linear-gradient(35deg, #CCFFFF, #FFCCCC, rgb(204, 204, 255));
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
}
8. CSS-Jitter-Effekt
Dieser "Shake"-Animationseffekt schüttelt das Eingabefeld, wenn der Benutzer eine ungültige Eingabe macht. Es ist einfach und elegant. Wenn der Benutzer beispielsweise eine Zahl statt eines Buchstabens in ein Textfeld eingibt, wackelt das Eingabefeld.
HTML Quelltext:
<input id="name" type="text" placeholder="Enter your name" pattern="[A-Za-z]*"/>
CSS-Code:
input:invalid{
animation: shake 0.2s ease-in-out 0s 2;
box-shadow: 0 0 0.4em red;
}
@keyframes shake {
0% { margin-left: 0rem; }
25% { margin-left: 0.5rem; }
75% { margin-left: -0.5rem; }
100% { margin-left: 0rem; }
}
9. Textüberlauf
Wir können diese Eigenschaft verwenden, um überlaufenden Text abzuschneiden. Es kann abgeschnitten und mithilfe von Auslassungspunkten (...) oder einer benutzerdefinierten Zeichenfolge angezeigt werden.
CSS-Code:
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
width: 200px;
}
div.text {
white-space: nowrap;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
div.text:hover {
overflow: visible;
}
10. Das Attribut „column-count“.
Sie gibt die Anzahl der Spalten an, in die Elemente aufgeteilt werden sollen.
CSS-Code:
p{
column-count: 2;
}
11. CSS-Animation
Animationen ändern allmählich den Stil eines Elements. Es kann nur verwendet werden, wenn zuvor Keyframes zugewiesen wurden. Keyframes beschreiben, wie animierte Elemente an bestimmten Punkten in einer Animationssequenz erscheinen.
CSS-Code:
div{
width: 200px;
height: 200px;
background-color: blue;
animation-name: square;
animation-duration: 8s;
}
@keyframes square{
from {background-color: blue;}
to {background-color: black;}
}
12. Schatteneffekt
Mit CSS können Sie Text und Elementen Effekte hinzufügen. Definieren Sie die Attribute als Textschatten und Rahmenschatten. Verwenden Sie text-shadow, um Schatten zu Text hinzuzufügen, und box-shadow, um Schatten zu Elementen hinzuzufügen.
(i) Textschatten: Gibt dem Text einen Schatten.
h1{
color: blue;
text-shadow: 2px 2px 4px #000000;
}
(ii) box-shadow: Wird verwendet, um dem Element einen Schatteneffekt zu verleihen. Das eigentliche div im Beispiel unten ist violett, der Box-Schatten ist himmelblau und rechts und unten auf 10 Pixel eingestellt.
div{
width: 200px;
height: 200px;
padding: 15px;
background-color: purple;
box-shadow: 10px 10px skyblue;
}
13. CSS-Ausschnitt
Mit der Eigenschaft clip-path können Sie nur einen Teil eines Elements anzeigen und den Rest ausblenden.
CSS-Code:
.bg{
height: 100%;
width: 100%;
background-color: rgba(199, 62, 133, 0.9);
clip-path: polygon(100% 0, 100% 0, 100% 51%, 0 100%, 0 90%, 0 52%, 0 51%);
position: absolute;
}
Clippy - CSS Clipping Path Generator ist eine schnelle und einfache Möglichkeit, komplexe Formen in CSS zu erstellen, indem Elemente auf Grundformen (Kreise, Ellipsen, Polygone oder Illustrationen) oder SVG-Quellen zugeschnitten werden.
14. CSS Eigenschaft background-blend-mode
Diese Eigenschaft beschreibt, wie die Hintergrundfarbe und das Bild (oder zwei Bilder) gemischt werden sollen.
Die Liste der Mischmodi, die jedem Hintergrundbild entsprechen, bildet den Wert. Ein Mischmodus gibt an, wie die Hintergrundebene gemischt wird (Farbe oder Bild).
Mit der Eigenschaft background-blend-mode können Sie atemberaubende Hintergründe erstellen.
CSS-Code:
div{
width: 600px;
height: 400px;
background-repeat: no-repeat, repeat;
background-position: center;
background-image: url("flower.png"), url("background-image.png");
background-blend-mode: color;
}
Wenn Sie Front-End-Informationen oder den vollständigen Quellcode benötigen, klicken Sie hier, um die Informationen herunterzuladen