Terbaru: Optimasi URL Blog | 10 Tips Mempercepat Blog Load | 30 Strategi SEO | 15 Rahasia Menulis Konten

Monday, February 23, 2015

5 Trik Keren CSS Untuk Membumbui Website Anda

kode css
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
Balaputra adalah seorang mahasiswa yang melakukan aktivitas blogging hanya untuk menghabiskan waktu luang.