Smooth Accordion Dropdown

Tag pre warna-warni

pre{background-color: #fff;
    background-image: -webkit-linear-gradient(top,#f5f5f5 50%,white 50%);
    background-image: -moz-linear-gradient(top,#f5f5f5 50%,white 50%);
    background-image: -ms-linear-gradient(top,#f5f5f5 50%,white 50%);
    background-image: -o-linear-gradient(top,#f5f5f5 50%,white 50%);
    -webkit-background-size: 30px 30px;
    -moz-background-size: 30px 30px;
    -ms-background-size: 30px 30px;
    -o-background-size: 30px 30px;
    background-size: 30px 30px;
    background-repeat: repeat;
    font: bold 12px/15px Inconsolata,Monaco,Consolas,"Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    color: #333;
    border: 1px solid #ddd;
    padding: 0 7px;
    margin: 10px 5px;
    overflow: auto;
    word-wrap: normal;
    white-space: pre;
    position: relative;
}

Blockquote CSS3

Dengan blockquote pandangan pengunjung menjadi lebih terarah dan bisa memahami artikel yang terkadang begitu panjang dan membosankan untuk dibaca. Oleh karena itu para blog designer berlomba-lomba untuk membuat tampilan blockquote menjadi lebih menarik. Maka tak heran jika banyak bertebaran di google tentang cara membuat blockquote agar menjadi lebih menarik.

Simple Accordion with CSS and Jquery

Menu Accordion with CSS and Jquery

Label With Category 1

Label With Category (style 1)

Efek Hover CSS 3

Efek Hover CSS3

Efek Transformasi 2D

Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Rotate Grow Rotate Float Sink Hover Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out

Efek Border

Border Fade Hollow Trim Outline Outward Outline Inward Round Corners

Shadow dan Glow

Glow Box Shadow Outset Box Shadow Inset Float Shadow Hover Shadow Shadow Radial

Speech Bubbles

Bubble Top Bubble Right Bubble Bottom Bubble Left Bubble Float Top Bubble Float Right Bubble Float Bottom Bubble Float Left

Curls

Curl Top Left Curl Top Right Curl Bottom Right Curl Bottom Left

Tab View Dengan CSS3 Murni




This is CSS Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta.

This is CSS Tab 2

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada.

This is CSS Tab 3

Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta.