Abby Acakadud: CSS

Disini saya membuat 2 buah file,

1. menu.css

2. index.html

Berikut untuk isi dari menu.css :

#nav{
font-family:urw;
font-size:13px;
margin-top:0px;
margin-bottom:10px;
padding:3px;
list-style-type:none;
list-style-position:outside;
position:relative;
-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
background: -moz-linear-gradient(top, #013E6A, #1C8FE2);
background: -webkit-gradient(linear, left top, left bottom, from(#013E6A), to(#1C8FE2));
height:40px;
}
#nav ul{
font-family:urw;
font-size:13px;
margin:2px;
margin-bottom:10px;
padding:3px;
list-style-type:none;
list-style-position:outside;
position:relative;
}
#nav a{
-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
display:block;
padding:8px;
color:#fff;
text-decoration:none;
background: -moz-linear-gradient(top, #013E6A, #1C8FE2);
background: -webkit-gradient(linear, left top, left bottom, from(#013E6A), to(#1C8FE2));
}
#nav a:hover{
color:#fff;text-shadow: 0px 3px 8px #000;
-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
background: -moz-linear-gradient(top,#0F3A61 , #0F69BB);
background: -webkit-gradient(linear, left top, left bottom, from(#0F3A61), to(#0F69BB));
}
#nav li{
padding:3px;
float:left;
position:relative;
-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
background: -moz-linear-gradient(top, #013E6A, #1C8FE2);
background: -webkit-gradient(linear, left top, left bottom, from(#013E6A), to(#1C8FE2));
}
#nav ul {
position:absolute;
display:none;
width:10em;
top:38px;
}

dan Berikut untuk sisi dari index.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Menu</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 0.19.1" />
    <link rel="stylesheet" type="text/css" href="menu.css" media="screen" />
</head>
<body>
<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Profil</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">Layanan</a></li>
    <li><a href="#">Kontak</a></li>
</ul>
</body>
</html>

Selesai..

Semoga Membantu.. Selamat berkreasi..

Membuat Warna Gradien dengan CSS

Berikut code CSS untuk membuat warna Gradien :

background: #222222;
background: -moz-linear-gradient(top, #222222, #000000);
background: -webkit-gradient(linear, left top, left bottom, from(#222222), to(#000000));

Hasil :

Disini

Semoga Membantu.

Membuat Gallery Slide dengan Jquery

Daripada pusing , belum jelas mau posting apa, mending kita belajar membuat Gallery Slide dengan Jquery. Oke berikut screenshootnya :

Selanjutnya berikut caranya :

1. Buat 3 buah folder yaitu css, gambar, dan js .

2. Kita buat 2 buah file css dan simpan di dalam folder css :

scrollable-button.css

/* this makes it possible to add next button beside scrollable */
.scrollable {
    float:left;
}
/* prev, next, prevPage and nextPage buttons */
a.browse {
    background:url(img/hori_large.png) no-repeat;
    display:block;
    width:30px;
    height:30px;
    float:left;
    margin:40px 10px;
    cursor:pointer;
    font-size:1px;
}
/* right */
a.right                 { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover         { background-position:-30px -30px; }
a.right:active     { background-position:-60px -30px; }
/* left */
a.left                { margin-left: 0px; }
a.left:hover         { background-position:-30px 0; }
a.left:active     { background-position:-60px 0; }

/* up and down */
a.up, a.down        {
    background:url(img/vert_large.png) no-repeat;
    float: none;
    margin: 10px 50px;
}
/* up */
a.up:hover         { background-position:-30px 0; }
a.up:active         { background-position:-60px 0; }

/* down */
a.down                 { background-position: 0 -30px; }
a.down:hover         { background-position:-30px -30px; }
a.down:active     { background-position:-60px -30px; }
/* disabled navigational button */
a.disabled {
    visibility:hidden !important;
}

scrollable-horizontal.css

/*
    root element for the scrollable.
    when scrolling occurs this element stays still.
*/
.scrollable {
    /* required settings */
    position:relative;
    overflow:hidden;
    width:450px;
    height:90px;
    /* custom decorations */
    border:1px solid #ccc;
    background:url(img/h300.png) repeat-x;
}
/*
    root element for scrollable items. Must be absolutely positioned
    and it should have a extremely large width to accomodate scrollable items.
    it's enough that you set the width and height for the root element and
    not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    clear:both;
}
/* single scrollable item */
.scrollable img {
    float:left;
    margin:3px 5px 20px 21px;
    background-color:#fff;
    padding:2px;
    border:1px solid #ccc;
    cursor:pointer;
    width:80px;
    height:80px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
/* active item */
.scrollable .active {
    border:2px solid #000;
    z-index:9999;
    position:relative;
}
    /* end scrollable styling */
body {
    font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}
/* get rid of those system borders being generated for A tags */
a:active {
outline:none;
}
:focus {
-moz-outline-style:none;
}

3. Download file jquery berikut di
sini dan ekstrak di folder js.

4. Masukan gambar yang akan di jadikan slide kedalam folder gambar.

5. Buat file gallery.html

gallery.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="Geany 0.18" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/scrollable-horizontal.css">
    <link rel="stylesheet" type="text/css" href="css/scrollable-buttons.css">
    <script type="text/javascript" src="js/jquery.tools.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $("div.scrollable").scrollable();
        $(".items img").click(function() {
             // hilangkan _t dibelakang nama file foto untuk foto yang besar
             // misal foto kecil (air_t.jpg) dihilangkan _t untuk foto besar menjadi (air.jpg)
             var url = $(this).attr("src").replace("_t", "");
             // untuk area gambar besar diberikan efek fade (semi transparan)
             var wrap = $("#image_wrap").fadeTo("medium", 0.5);
             // load foto
           var img = new Image();
              img.onload = function() {
              wrap.fadeTo("fast", 1);
              wrap.find("img").attr("src", url);
             };
             img.src = url;
        }).filter(":first").click();
        });
    </script>
    <style>
        /* style untuk image wrapper (preview image) */
        #image_wrap {
             width:470px;
             margin:15px 0 15px 30px;
             padding:0px 0;
             text-align:center;
             background-color:#transparent;
             border:2px solid #fff;
             outline:1px solid #ddd;
             -moz-ouline-radius:4px;
             -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="text">

      <div id="image_wrap">
         
         <img src="images/blank.gif" width="200" height="200" />
      </div>
      
      <a class="prevPage browse left"></a>
      
      <div class="scrollable">
         
         <div class="items">
        
            <img src="gambar/linux-mint.png">
            <img src="gambar/archlinux-logo.png">
            <img src="gambar/debian-logo2.jpg">
            <img src="gambar/gentoo-linux.jpg">
            <img src="gambar/mandriva-logo.jpg">
            
            <img src="gambar/slackware_logo.png">
            <img src="gambar/start_here_suse.png">
            <img src="gambar/zenwalk-logo.jpg">
            <img src="gambar/linux-mint.png">
            <img src="gambar/gentoo-linux.jpg">
      </div>
    </div>
    
    <a class="nextPage browse right"></a>
    <br clear="all">
</div>
</body>
</html>

6. Ganti tulisan berwarna merah sesuai dengan nama gambar yang ada di folder gambar.

7. Selesai

Selamat Berkreasi..

Membuat Efek Rotasi pada Image dengan CSS

Kode CSS :

    -webkit-transform: scale(1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
    -webkit-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -moz-box-shadow:0px -5px 400px #FFFFFF;
    -webkit-box-shadow:0px -5px 400px #FFFFFF;
}

Abby Acakadud

Membuat Menu Horizontal dengan CSS

Membuat Warna Gradien dengan CSS

Membuat Gallery Slide dengan Jquery

Membuat Efek Rotasi pada Image dengan CSS

Membuat Efek Zoom pada Image dengan CSS