CSS adalah bagian dasar dari halaman Web manapun dan yang memberikan tampilan khas di dalamnya. CSS kadang sederhana dan kadang juga terasa rumit jika kita pelajari dari aturan tipografi sederhana untuk menghasilkan animasi yang kompleks. Kode ini dapat digunakan untuk membuat hal-hal yang menakjubkan. Kali ini kami akan berbagi beberapa gaya CSS yang mungkin berguna untuk Anda dan dapat digunakan pada website Anda sebagai bumbu-bumbu penyedap tampilan.

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.

Author: Balaputra

Artikel Terkait:

Blogging Tips