5 Trik Keren Css Untuk Membumbui Website Anda

CSS yaitu bab dasar dari halaman Web manapun dan yang menawarkan tampilan khas di dalamnya. CSS kadang sederhana dan kadang juga terasa rumit kalau kita pelajari dari hukum tipografi sederhana untuk menghasilkan animasi yang kompleks. Kode ini sanggup dipakai untuk menciptakan hal-hal yang menakjubkan. Kali ini kami akan membuatkan beberapa gaya CSS yang mungkin mempunyai kegunaan untuk Anda dan sanggup dipakai pada website Anda sebagai bumbu-bumbu penyedap tampilan.

1. Blurry Text

Teks yang blur mempunyai daya tarik tertentu dan sering dipakai untuk mengarahkan perhatian terhadap bab tertentu dari teks. Belum lagi itu juga terlihat keren :) Berikut ini isyarat CSS untuk menciptakan efek blur pada teks. Caranya yaitu dengan menciptakan teks transparan lalu tambahkan drop shadow menyerupai berikut.

.blurry-text {
   color: transparent;
   text-shadow: 0 0 4px rgba(0,0,0,0.5);
}

Ini yaitu rujukan teks yang tampak blur.

2. Animated Gradient

Kedengarannya keren kan? Sebenarnya Anda tidak sanggup menghidupkan warna gradien menyerupai beberapa properti CSS lainnya. Anda sanggup memindahkan latar belakang sekitar untuk membuatnya terlihat menyerupai 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 menciptakan sebuah gambar tampak berkelas dan keren. Anda sanggup 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 sanggup memakai CSS untuk menyesuaikan bagaimana banyak sekali jenis link muncul menurut format file mereka. Anda sanggup mengatur http://links untuk muncul dengan cara tertentu. Brikut isyarat 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 sanggup Anda gunakan juga untuk menawarkan sedikit sentuhan pada web Anda. Tidak ada properti sederhana yang sanggup Anda terapkan untuk semuanya. Di sini ada gaya transformasi CSS3 yang sanggup 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.