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

Ad 468 X 60

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.

4 comments:

  1. nice trik, http://www.jualalatbantu.info/

    ReplyDelete
  2. Informasi yang sanagt bermanfaat :) terimakasih
    http://goo.gl/SyTJyl - obat miom

    ReplyDelete
  3. Sangat Membantu
    Game Poker dan Domino serta Bandar Ceme Terbesar di Indonesia
    Www.JagoanPoker.com
    Hadir dengan Hadiah Jackpot TERBESAR dan PERTAMA di Indonesia.
    Jackpot Rp. 1.000 dapatkan 30 Juta Rupiah
    Jackpot Rp. 2.000 Dapatkan 60 JuTa Rupiah
    Telawh di Percayai lebih dari 10.000 member aktif di Indonesia.
    Game Poker dan Domino dan Bandar Ceme dalam 1 Website.
    Gabung segera dengan www.JagoanPoker.com

    ReplyDelete
  4. VipMandiriQQ kini hadir untuk para pecinta poker online, Yang biasa di mainkan di facebook seperti permainan texas holdem poker, Kini VipMandiriQQ mengerti akan keinginan para pecinta poker online,
    Maka itu kami hadir dengan meluncurkan sebuah website poker yang dapat di mainkan dengan menggunakan uang asli.

    Dengan minimal deposit hanya Rp 15.000, Anda sudah dapat bermain, Dan menangkan JACKPOT hingga RATUSAN JUTA RUPIAH.


    Keunggulan bermain di VipMandiriQQ:

    - Permainan yang Anda mainkan di VipMandiriQQ adalah Poker Fair Play.
    - Poker tanpa menggunakan sistem bot, Murni Player vs Player.
    - Transaksi Deposit dan Withdraw cepat.
    - Kami juga menyediakan 5 bank local seperti BCA, MANDIRI, BNI, BRI, dan DANAMON agar para member mudah untuk bertransaksi.
    - Dilayani CS yang Ramah dan Profesional, Siap melayani para member setia VipMandiriQQ selama 24jam full.
    - Bonus Refferal sebesar 20% akan di berikan secara cuma - cuma kepada para member yang mengajak teman-teman untuk bermain di VipMandiriQQ.com
    - Bonus Rollingan sebesar 0,5% di bagikan setiap hari Senin untuk member-member setia VipMandiriQQ.

    Di VipMandiriQQ kami juga menyediakan 6 permainan yang dapat dimainkan dengan 1 ID :

    - Poker
    - Bandar poker
    - Capsa susun
    - Domino 99
    - Adu Q
    - Bandar Q

    Tata cara bergabung bermain di VipMandiriQQ :

    - Minimal berusia 18 tahun ke atas.
    - Memiliki no. rekening sendiri atau rekening yang valid.
    - Nama pengguna/user dibuat oleh pemain itu sendiri.

    Dengan Penawaran Yang Kami Ajukan Cukup Menarik Sebagian Pemain Poker Online Indonesia - Asia, Kami Adalah Salah Satu Poker Online Terbesarnya.

    Ayo segera daftarkan diri Anda untuk bermain di VipMandiriQQ, Dan jangan lupa untuk mengajak teman-teman Anda untuk bermain di VipMandiriQQ & rasakan sensasi bermain poker tanpa bot bersama kami di VipMandiriQQ

    Silakan klik disini Untuk mendaftar https://goo.gl/ELBvLn



    Join Us :
    BBM : 2BE55E80
    SKYPE : vip.mandiriqq
    Facebook : vipmandiriqq
    Twitter : vipmandiriqq1
    CALL&SMS : +85585929692
    WECHAT : VipMandiriqq
    [img]http://i.imgur.com/Tw0hV7S.jpg[/img]

    ReplyDelete

Terimakasih telah berkenan mengunjungi dan meninggalkan komentar di blog ini. Tanggapan Anda selalu kami hargai.