MAAF, INI BUKAN KARYA SAYA


Kode CSS:
body {
    font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
    font-size: 13px;
}

ul {
    list-style: none;
    width: 570px;
    margin: 40px auto;
}

li {
    width: 120px;
    height: 125px;
    float: left;
    background: #4797CF;
    margin: 0 40px 40px 0;
   
    padding: 10px;
    border: 5px solid #ECECEC;
   
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}
li h1 {
    font-size: 16px;
    margin: 0 0 10px 0;
    color: #A2CBE7;
}
li p {
    color: #fff;
}

ul li:hover {
    border: 5px solid white;
   
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.3);
    box-shadow: 0 0 10px rgba(0,0,0,.3);
   
    opacity: 1;
    filter: alpha(opacity=100);
}
ul:hover li:not(:hover) {
    opacity: .3;
    filter: alpha(opacity=30);
   
    -webkit-transform: scale(.9);
    -moz-transform: scale(.9);
    -ms-transform: scale(.9);
    -o-transform: scale(.9);
    transform: scale(.9);
}
Kode HTML:
<ul>
    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>
    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>
    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>
    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>
    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>
    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>
    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>
    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>
    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>
</ul>
Berikut Samplenya:
  • Heading

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...
  • Heading

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...
  • Heading

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...
  • Heading

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...
  • Heading

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...
  • Heading

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...
  • Heading

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...
  • Heading

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...
  • Heading

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...

5 comments

25 Mei 2012 20.54

pernah liat deh di css deck

28 Mei 2012 10.28

wah ane pernah liat posting ini tapi dimana yaaa ...

29 Mei 2012 00.36

@RzaaL1306btull ntuhh

29 Mei 2012 00.36

@Donsteradari css desk

30 Desember 2013 18.57

keren sob

Posting Komentar

Konversi Kode
[Mulai Senin, 30 Januari 2012] Maaf, Jangan Masukkan Link Pada Komentar