Scroll ke bawah untuk melihat efek sticky...
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation.
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
/* x-offset y-offset blur-radius color */
}Penjelasan: text-shadow membuat bayangan pada text. Format: x y blur warna. x=geser kanan, y=geser bawah, blur=kekaburan bayangan.
.text-stroke {
color: transparent;
-webkit-text-stroke: 2px #e74c3c;
/* width color */
}Penjelasan: -webkit-text-stroke membuat outline pada text. color: transparent membuat text transparan, hanya outline yang terlihat.
.text-gradient {
background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}Penjelasan: Membuat text dengan warna gradient. background-clip: text memotong background sesuai bentuk text.
/* Rotate - Memutar elemen */
.transform-rotate:hover {
transform: rotate(45deg);
}
/* Scale - Memperbesar/kecilkan */
.transform-scale:hover {
transform: scale(1.2); /* 120% dari ukuran asli */
}
/* Skew - Memiringkan elemen */
.transform-skew:hover {
transform: skew(20deg, 10deg); /* x-axis y-axis */
}
/* Translate - Menggeser posisi */
.transform-translate:hover {
transform: translate(20px, -20px); /* x y */
}Penjelasan: transform mengubah bentuk, ukuran, atau posisi elemen tanpa mempengaruhi layout. Bisa dikombinasikan: transform: rotate(45deg) scale(1.2);
/* Definisi animasi dengan @keyframes */
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}
/* Menggunakan animasi */
.animate-bounce {
animation: bounce 2s infinite;
/* nama durasi pengulangan */
}Penjelasan: @keyframes mendefinisikan animasi. 0% = awal, 100% = akhir. animation: nama durasi timing-function delay iteration-count direction fill-mode;