Belajar CSS3: Membuat Animasi Pohon Natal

Menyambut Natal tahun 2014 bagi yang merayakan, eksperimen ini layak anda uji coba di website dan blog anda. Dengan teknologi CSS3 dan browser modern (Firefox, Chrome, Safari, Opera) kita bisa menikmati animasi pohon natal yang unik tanpa menggunakan library tambahan seperti Flash atau GIF.

Siapkan, file HTML yang akan disisipi animasi ini. Tambahkan baris berikut:

<div id="container">
    <div id="tree">
        <div class="layer">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="layer">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="layer">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="layer">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>

Continue reading Belajar CSS3: Membuat Animasi Pohon Natal

Tutorial CSS: Kompresi File CSS dengan Skrip PHP

Salah satu teknik untuk mempercepat loading halaman web adalah dengan memampatkan/mengkompresi CSS sehingga ukuran file CSS yang diload lebih kecil. Untuk mengkompres CSS setidaknya ada tiga metode: 1) metode Paul Stamatiou, 2) metode Perishable Press dan 3) metode Reinhold Weber.

Pada tulisan kali ini saya akan mengaplikasikan metode yang diperkenalkan oleh Reinhold Weber, karena mampu mengkombinasikan beberapa file CSS dalam satu output file CSS terkompresi dan tidak perlu mengganti ekstensi file css menjadi file PHP.

Berikut contoh script PHPnya: Continue reading Tutorial CSS: Kompresi File CSS dengan Skrip PHP

Tutorial CSS: Membuat Paragraf Rata Kanan-Kiri

Untuk membuat sebuah teks tampil rata kanan-kiri (justify) silakan gunakan property text-align, contoh:

div { text-align: justify; text-justify: newspaper }
<div style=”text-align: justify; text-justify: newspaper”>This is “Newspaper” justified content</div>

Contoh mode justify yang lain: Continue reading Tutorial CSS: Membuat Paragraf Rata Kanan-Kiri