Membuat tape under contructions menggunakan CSS.

Pada kesempatan kali ini saya ingin share mengenai tips mempercantik blog dengan cara menggunakan CSS, perlu untuk diketahui trick CSS ini bukan hasil pemikiran saya sendiri, melainkan trick CSS ini saya dapatkan dari CSSDeck.com, dan disini saya hanya ingin sekedar share mengenai trick ini. Menurut saya trick ini sangat menakjubkan, kerena hanya dengan serangkaian kode CSS kita bisa membuat tape under contruction layaknya seperti sebuah gambar yang di olah dengan menggunakan aplikasi photoshop, dulu jika ingin membuat sebuah gambar saya selalu menggunakan photoshop, tapi ternyata dengan serangkaian kode gambar itu bisa kita buat. Pada latihan CSS kali ini kita akan mengenal linear gradient yang mana penulisannya secara berulang. baiklah berikut screen shoot project kita kali ini :

Demo

HTML :

    <h1 class="tape">
        <span>Under Construction</span>
    </h1>

CSS :

body {
            background: #222;
            font-family:verdana,Tahoma,Arial;
            text-align:center;
        }     
.tape {
  font-size:3em;
            margin: 5% 0 0;
            height: 160px;
            background-image: -webkit-linear-gradient(0deg,#222,transparent,#222),linear-gradient(transparent 30px, #ff0 30px), repeating-linear-gradient(45deg, transparent, transparent 35px, #ff0 35px, #ff0 70px);
            background-image: -moz-linear-gradient(90deg,#222,transparent,#222),linear-gradient(transparent 30px, #ff0 30px), repeating-linear-gradient(45deg, transparent, transparent 35px, #ff0 35px, #ff0 70px);
            background-image: -o-linear-gradient(90deg,#222,transparent,#222),linear-gradient(transparent 30px, #ff0 30px), repeating-linear-gradient(45deg, transparent, transparent 35px, #ff0 35px, #ff0 70px);
            background-image: linear-gradient(90deg,#222,transparent,#222),linear-gradient(transparent 30px, #ff0 30px), repeating-linear-gradient(45deg, transparent, transparent 35px, #ff0 35px, #ff0 70px);
            background-size: auto,auto 132px,auto;
        }
        .tape span{
            cursor:default;
            color:#222;
            display:block;
            padding:1em;
  white-space:nowrap;
        }

Demikian saja sharing saya kali ini, semoga bermanfaat untuk meningkatkan skill CSS kita semua, disini saya juga belajar, apa-apa yang saya bagikan saya pelajari terlebih dahulu, jika mnarik saya bagikan kembali dengan Anda semua para pembaca yang setia mengunjungi blog saya yang sangat kecil ini, terimakasih atas kunjungannya dan jangan lupa untuk berbagi jika artikel ini Anda rasa menarik, dan berikan komentar atau masukan yang bersifat membangun.

Sumber referensi : http://cssdeck.com/labs/under-construction-tape

Share this: