5 erstaunliche CSS-Stile, die jeder Entwickler kennen sollte
CSS (Cascading Style Sheets) hilft dem Entwickler, das visuelle Erscheinungsbild von Webseiten zu verbessern. Mit anderen Worten, wir können sagen, dass CSS Webseiten Leben einhaucht und sie verschönert. Mit CSS können wir das Layout, die Farbe, Schriftarten und Bilder ändern, und das Beste daran ist, dass wir für einen bestimmten Stil oder ein bestimmtes Layout einen Code einmal schreiben und ihn viele Male verwenden können, wann immer wir ihn auf unserer Website implementieren möchten, was sehr ist vorteilhaft und zeitsparend.
Hier besprechen wir 5 CSS-Tricks, die Ihre Website von anderen abheben können.
1. Angepasster Cursor: Hatten Sie sich jemals gelangweilt, jedes Mal denselben gewöhnlichen Cursor zu verwenden? Was wäre, wenn Sie Ihren Cursor nach Ihren Wünschen anpassen könnten? Stellen Sie sich einen Cursor vor, der Ihr Bild oder etwas Einzigartiges hat? Klingt cool oder? Dies kann einfach durch die Verwendung von CSS in einer einzigen Codezeile erfolgen. Im folgenden Beispiel haben wir drei verschiedene Bilder für den Cursor verwendet: GeeksforGeeks-Logo, ein Bild von Käse und eine Rakete, Sie können jedes Bild Ihrer Wahl verwenden.
cursor: url("anyimage.png"), pointer;
Beispiel:
index.html
<!DOCTYPE html> <html> <head> <title>Customized Cursor</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <button>GFG Cursor</button> <button>Cheese Cursor</button> <button>Rocket Cursor</button> </div> </body> </html>
style.css
body {
background-color: pink;
padding: 0;
margin: 0;
}
.container {
width: 690px;
height: 220px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
button {
font-size: 30px;
background-color: white;
border: none;
outline: none;
text-transform: uppercase;
color: black;
width: 200px;
padding: 20px;
padding-left:40px;
padding-right:40px;
}
button:nth-child(1) {
cursor: url("gfg.png"),pointer;
}
button:nth-child(2) {
cursor: url("cheese.png"),pointer;
}
button:nth-child(3) {
cursor: url("rocket.png"),pointer;
}
Ausgabe:
Einschränkungen für die Verwendung eines beliebigen Bildes als Cursor:
- Jedes Bildformat kann verwendet werden, wie JPG, PNG oder BMP
- Die Bildgröße sollte 32×32px betragen , größere Bildgrößen funktionieren nicht.
2. Schatteneffekt: Der Schatteneffekt ist ein sehr einfacher, aber erstaunlicher Effekt, der unserem Text einen 3D-Touch verleiht.
h1 {
font-size: 5rem;
text-shadow: 5px 5px 0px green;
}
Beispiel:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Shadow Effect</title>
<style>
h1 {
font-size: 5rem;
text-shadow: 5px 5px 0px green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Ausgabe:
3. Bunte Filter: Die Farbe jedes Bildes kann ohne Verwendung eines Bearbeitungswerkzeugs geändert werden, dies kann einfach mit der CSS-Filtereigenschaft erfolgen.
Beispiel:
index.html
<!DOCTYPE html> <html> <head> <title>CSS FILTERS</title> </head> <link rel="stylesheet" type="text/css" href="style.css"> <body> <div class="image"> <img class="original" src="gfg.jpg"> <img class="brightness" src="gfg.jpg"> <img class="huerotate" src="gfg.jpg"> <img class="grayscale" src="gfg.jpg"> <img class="blend" src="gfg.jpg"> </div> </body> </html>
style.css
.image img {
max-width: 300px;
}
.original {
}
.brightness {
filter: brightness(150%);
}
.huerotate {
filter: hue-rotate(180deg);
}
.grayscale {
filter: grayscale(100%);
}
.blend {
filter: invert(1) hue-rotate(260deg);
}
Ausgabe:
Eigenschaftstipp: Die Farbe jedes Bildes kann in viele Farben geändert werden, indem Sie einfach den Gradwert ändern.
Beispiel:
filter: invert(1) hue-rotate(90deg); filter: invert(1) hue-rotate(150deg);
4. Hintergrund beschnittener Text: Fast jeder von uns hat versucht, unserem Text einen ausgefallenen Hintergrund zu geben, was sehr einfach ist. 'Beschnittener Text im Hintergrund' bedeutet, das Hintergrundbild auf den Text zuzuschneiden, damit es attraktiver und cooler aussieht.
Wir können dies einfach mit der folgenden Codezeile tun, wobei "anyimage" das gewünschte Bild Ihrer Wahl ist, das Sie ausschneiden möchten.
background-image: url('anyimage.jpg');
-webkit-background-clip: text;
color: transparent;
Beispiel:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Background Clipped Text</title>
<style>
h1 {
font-size: 12rem;
background-image: url('anyimage.jpg');
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
<h1>GeeksforGeeks</h1>
</body>
</html>
Ausgabe:
Sie können sogar ein GIF in den Hintergrund des Textes schneiden! Dies kann mit dem gleichen obigen Code erfolgen, indem Sie einfach den Namen des Bildes durch den Namen des GIFs ersetzen
5. Drop-Caps-Text: „Drop-Caps“ ist ein Texteffekt, bei dem der erste Buchstabe des ersten Absatzes vergrößert wird, um einen auffälligen Effekt zu erzielen. Er wird häufig in Zeitungen, Zeitschriften und Romanen verwendet.
p::first-letter {
color:green;
font-size: 3.9rem;
float: left;
padding-right: 4px;
}
Beispiel:
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Drop Effect</title>
<style type="text/css">
.content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.article {
width: 50%;
margin: 20px;
}
p::first-letter {
float: left;
line-height: 30px;
font-size: 50px;
padding-right: 5px;
padding-left: 5px;
color: green;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: -5px;
margin-right: 5px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<div class="content">
<div class="article">
<p>
Geeksforgeeks is a computer science
portal for geeks. The content on
GeeksforGeeks has been divided into
various categories from programming
languages, topic-wise practice,
development , data structures ,
algorithm to interview preparation,
company- wise interview experience,
recruitment procedure of a company
it has verything covered. A drop cap
is a effect in which the first letter
of the first paragraph is made larger
to create an eye catchy effect it is
often used in newspaper , magazines
and novels.
</p>
</div>
</div>
</body>
</html>
Ausgabe:
