5 Trik Keren CSS Untuk Membumbui Website Anda
1. Blurry Text
Teks yang blur memiliki daya tarik tertentu dan sering digunakan untuk mengarahkan perhatian terhadap bagian tertentu dari teks. Belum lagi itu juga terlihat keren :) Berikut ini kode CSS untuk membuat efek blur pada teks. Caranya adalah dengan membuat teks transparan kemudian tambahkan drop shadow seperti berikut.
.blurry-text {
color: transparent;
text-shadow: 0 0 4px rgba(0,0,0,0.5);
}
Ini adalah contoh teks yang tampak blur.
2. Animated Gradient
Kedengarannya keren kan? Sebenarnya Anda tidak dapat menghidupkan warna gradien seperti beberapa properti CSS lainnya. Anda bisa memindahkan latar belakang sekitar untuk membuatnya terlihat seperti animasi.
button {
background-image: linear-gradient(#518712, #124555);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s;
}
button:hover {
background-position: 0 0;
}
3. Image Grayscale
Grayscale atau efek hitam putih akan membuat sebuah gambar tampak berkelas dan keren. Anda dapat menerapkan filter SVG ke gambar untuk mengubahnya menjadi grayscale.
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
4. Kostumisasi Tipe Link
Anda dapat menggunakan CSS untuk menyesuaikan bagaimana berbagai jenis link muncul berdasarkan format file mereka. Anda dapat mengatur http://links untuk muncul dengan cara tertentu. Brikut kode CSSnya:
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* PDFs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}
5. Vertical Alignment
Kode ini dapat Anda gunakan juga untuk memberikan sedikit sentuhan pada web Anda. Tidak ada properti sederhana yang dapat Anda terapkan untuk semuanya. Di sini ada gaya transformasi CSS3 yang dapat Anda gunakan untuk penyelarasan secara vertical.
.verticalcenter {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
Dapatkan lebih banyak lagi trik CSS dan bagikan bersama kami. Beritahu kami dengan cara menuliskan di kolom komentar di bawah postingan ini. Terimakasih.
