Cascading Style Sheet

Cascading Style Sheets ( CSS ) adalah bahasa style sheet yang digunakan untuk menggambarkan semantik presentasi (tampilan dan format) dari dokumen yang ditulis dalam bahasa markup . Penerapannya paling umum adalah dengan gaya halaman web yang ditulis dalam HTML dan XHTML , tetapi bahasa juga dapat diterapkan untuk setiap jenis XML dokumen, termasuk polos XML , SVG dan XUL .

CSS dirancang terutama untuk memungkinkan pemisahan konten dokumen (yang ditulis dalam HTML atau bahasa markup yang mirip) dari penampilan dokumen, termasuk unsur-unsur seperti tata letak , warna , dan font .Pemisahan ini dapat meningkatkan konten aksesibilitas , menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi karakteristik presentasi, memungkinkan beberapa halaman untuk berbagi format, dan mengurangi kompleksitas dan pengulangan dalam konten struktural (seperti dengan memungkinkan untuk desain web Tableless ). CSS juga dapat memungkinkan halaman markup yang sama yang akan disajikan dalam gaya yang berbeda untuk metode rendering yang berbeda, seperti di layar, di cetak, dengan suara (ketika dibacakan oleh browser pidato-based atau pembaca layar ) dan Braille berbasis, taktil perangkat. Hal ini juga dapat digunakan untuk memungkinkan halaman web untuk menampilkan secara berbeda tergantung pada ukuran layar atau perangkat yang sedang dilihat. Sementara penulis dokumen biasanya menghubungkan bahwa dokumen ke style sheet CSS, pembaca dapat menggunakan style sheet yang berbeda, mungkin satu di komputer mereka sendiri, untuk menimpa salah satu penulis telah ditentukan.

Ipod With Css3

Cara Pembuatan nya:
1. Login
2. Pilih Rancangan
3. Edit Html
4. Centang Expad Widget
5. Cari Kode ]]></b:skin>
6. Copas Kode Css Di Bawah Ini Dan Letakkan Di Atas Nya

Css3 Graph Animation

Typography Rain

3D Css Transform

Cara Pembuatan nya:
1. Login
2. Pilih Rancangan
3. Edit Html
4. Centang Expad Widget
5. Cari Kode ]]></b:skin>
6. Copas Kode Css dan javascript Di Bawah Ini Dan Letakkan Di Atas Nya

Zoom Menu

Cara Pembuatan nya:
1. Login
2. Pilih Rancangan
3. Edit Html
4. Centang Expad Widget
5. Cari Kode ]]></b:skin>
6. Copas Kode Css Di Bawah Ini Dan Letakkan Di Atas Nya

Double Clik Galery

Cara Pembuatan nya:
1. Login
2. Pilih Rancangan
3. Edit Html
4. Centang Expad Widget
5. Cari Kode ]]></b:skin>
6. Copas Kode Css Di Bawah Ini Dan Letakkan Di Atas Nya

Light Box

Cara Pembuatan nya:
1. Login
2. Pilih Rancangan
3. Edit Html
4. Centang Expad Widget
5. Cari Kode ]]></b:skin>
6. Copas Kode Css dan javascript Di Bawah Ini Dan Letakkan Di Atas Nya

Parallax

Arahkan Qursor

Cloud Over Background

Cara Pembuatan nya:
1. Login
2. Pilih Rancangan
3. Edit Html
4. Centang Expad Widget
5. Cari Kode </head>
6. Copas Kode Javascript Di Bawah Ini Dan Letakkan Di Atas Nya

Spread

Cara Pembuatan nya:
1. Login
2. Pilih Rancangan
3. Edit Html
4. Centang Expad Widget
5. Cari Kode </head>
6. Copas Kode javascript Di Bawah Ini Dan Letakkan Di Atas Nya

Poster Circle

Cara Pembuatan nya:
1. Login
2. Pilih Rancangan
3. Edit Html
4. Centang Expad Widget
5. Cari Kode ]]></b:skin>
6. Copas Kode Css Di Bawah Ini Dan Letakkan Di Atas Nya

<style type="text/css"> body { font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px; } #stage { margin: 150px auto; width: 600px; height: 400px; /* Setting the perspective of the contents of the stage but not the stage itself */ -webkit-perspective: 800; } #rotate { margin: 0 auto; width: 600px; height: 400px; /* Ensure that we're in 3D space */ -webkit-transform-style: preserve-3d; /* Make the whole set of rows use the x-axis spin animation for a duration of 7 seconds, running infinitely and linearly */ -webkit-animation-name: x-spin; -webkit-animation-duration: 7s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } .ring { margin: 0 auto; height: 110px; width: 600px; -webkit-transform-style: preserve-3d; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } .ring > :nth-child(odd) { background-color: #995C7F; } .ring > :nth-child(even) { background-color: #835A99; } .poster { position: absolute; left: 250px; width: 100px; height: 100px; opacity: 0.7; color: rgba(0,0,0,0.9); -webkit-border-radius: 10px; } .poster > p { font-family: 'Georgia', serif; font-size: 36px; font-weight: bold; text-align: center; margin-top: 28px; } /* Set up each row to have a different animation duration and alternating y-axis rotation directions. */ #ring-1 { -webkit-animation-name: y-spin; -webkit-animation-duration: 5s; } #ring-2 { -webkit-animation-name: back-y-spin; -webkit-animation-duration: 4s; } #ring-3 { -webkit-animation-name: y-spin; -webkit-animation-duration: 3s; } /* Here we define each of the three individual animations that we will be using to have our 3D rotation effect. The first animation will perform a full rotation on the x-axis, we'll use that on the whole set of objects. The second and third animations will perform a full rotation on the y-axis in opposite directions, alternating directions between rows. Note that you currently have to specify an intermediate step for rotations even when you are using individual transformation constructs. */ @-webkit-keyframes x-spin { 0% { -webkit-transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(180deg); } 100% { -webkit-transform: rotateX(360deg); } } @-webkit-keyframes y-spin { 0% { -webkit-transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(360deg); } } @-webkit-keyframes back-y-spin { 0% { -webkit-transform: rotateY(360deg); } 50% { -webkit-transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(0deg); } } </style><br /> <br /> <script type="text/javascript"> const POSTERS_PER_ROW = 12; const RING_RADIUS = 200; function setup_posters (row) { var posterAngle = 360 / POSTERS_PER_ROW; for (var i = 0; i < POSTERS_PER_ROW; i ++) { var poster = document.createElement('div'); poster.className = 'poster'; // compute and assign the transform for this poster var transform = 'rotateY(' + (posterAngle * i) + 'deg) translateZ(' + RING_RADIUS + 'px)'; poster.style.webkitTransform = transform; // setup the number to show inside the poster var content = poster.appendChild(document.createElement('p')); content.textContent = i; // add the poster to the row row.appendChild(poster); } } function init () { setup_posters(document.getElementById('ring-1')); setup_posters(document.getElementById('ring-2')); setup_posters(document.getElementById('ring-3')); } // call init once the document is fully loaded window.addEventListener('load', init, false); </script>

Contoh Penerapan nya: <div id="stage">       <div id="rotate">         <div id="ring-1" class="ring"></div>         <div id="ring-2" class="ring"></div>         <div id="ring-3" class="ring"></div>       </div>     </div>

Matrix

Cara Pembuatan nya:
1. Login
2. Pilih Rancangan
3. Edit Html
4. Centang Expad Widget
5. Cari Kode ]]></b:skin>
6. Copas Kode Css Di Bawah Ini Dan Letakkan Di Atas Nya

Border Transparent

Cara Pembuatan nya:
1. Login
2. Pilih Rancangan
3. Edit Html
4. Centang Expad Widget
5. Cari Kode ]]></b:skin>
6. Copas Kode Css Di Bawah Ini Dan Letakkan Di Atas Nya

Folded Corner Effect

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

Css Pull Quotes

Once upon a midnight dreary, while I pondered weak and weary, Over many a quaint and curious volume of forgotten lore, While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. ‘'Tis some visitor,’ I muttered, ‘tapping at my chamber door – Only this, and nothing more.’

Advanced Typography

Cara Pembuatan nya:
1. Login
2. Pilih Rancangan
3. Edit Html
4. Centang Expad Widget
5. Cari Kode ]]></b:skin>
6. Copas Kode Css Di Bawah Ini Dan Letakkan Di Atas Nya

<style type="text/css"> h3.gr {advanced_type.htm... (line 54) border-bottom:10px solid #CC0000; color:#999999; float:left; font-family:Impact,Arial,Verdana; font-size:500%; font-weight:100; margin:0pt; text-transform:uppercase; } h3.gr2 {advanced_type.htm... (line 55) color:#999999; float:left; font-family:Impact,Arial,Verdana; font-size:500%; font-weight:100; margin:25px 0pt; position:relative; text-transform:uppercase; } </style>

Contoh Penerapan nya:
<h3 class="gr2">Contoh</h3>  
<h3 class="gr">Advanced</h3>

Contoh

Advanced

Typography

Grunge Text Effect

This is one very long title with grunge effect

Css Menu

Cara Pembuatan nya:
1. Login
2. Pilih Rancangan
3. Edit Html
4. Centang Expad Widget
5. Cari Kode ]]></b:skin>
6. Copas Kode Css Di Bawah Ini Dan Letakkan Di Atas Nya

Sticky Notes

Cara Pembuatan nya:
1. Login
2. Pilih Rancangan
3. Edit Html
4. Centang Expad Widget
5. Cari Kode ]]></b:skin>
6. Copas Kode Css Di Bawah Ini Dan Letakkan Di Atas Nya

Animated Polaroid Gallery

Cara Pembuatan nya:
1. Login
2. Pilih Rancangan
3. Edit Html
4. Centang Expad Widget
5. Cari Kode ]]></b:skin>
6. Copas Kode Css Di Bawah Ini Dan Letakkan Di Atas Nya

Carve Me

Carve Me

credit: lab.simuray

Animation Lyrick

Klik Lyrick

Yesterday,
All my troubles seemed so far away,
Now it looks as though they're here to stay,
Oh, I believe in yesterday.
Suddenly,
I'm not half the man I used to be,
There's a shadow hanging over me,
Oh, yesterday came suddenly.
Why she
Had to go I don't know, she wouldn't say.
I said,
Something wrong, now I long for yesterday.
Yesterday,
Love was such an easy game to play,
Now I need a place to hide away,
Oh, I believe in yesterday.
Why she
Had to go I don't know, she wouldn't say.
I said,
Something wrong, now I long for yesterday.
Yesterday,
Love was such an easy game to play,
Now I need a place to hide away,
Oh, I believe in yesterday.

credit: romancortes

Animation Monster

Arahkan Cursor Ke Monster Dibawah Ini

credit: lab.simuray