CSS Image Opacity (Efek Transparent Pada Gambar)

Assalamualikum,
Kali ini kita akan membahas tentang Efek gambar Pada CSS. Sesuai Judul, kita akan melakukan efek Transparent pada Gambar saat di sorot maupun sebaliknya.
ya, langsung aja sob, udah malem nih.
Cekibrottt -->


1. Login Blogger
2. Rancangam --> Edit HTML (Jangan Lupa Backup template dlu)
3. Cari tag ]]></b:skin>
4. Masukan Code CSSdi bawah ini di atas Tag ]]></b:skin>

.img_opacity{
opacity:0.4;
filter:alpha(opacity=40);
}
.img_opacity:hover{
opacity:1.0;
filter:alpha(opacity=100); /
}

Keterangan diatas menandakan bahwa Code berwarna biru adalah, efek Gambar saat Transparan, sobat bisa mengaturnya sendiri, Pada umumnya Browser Mozzila Dan IE normalnya hanya sampai 1.0, jadi Sobat hanya boleh menambahnya sebanyak 0.1, lalu code berwarna Ungu itu adalah efek yang dihasilkan jadi jika Opacitynya 0.1 Alphanya harus 10
Sedangkan pada Hover yang di hasilkan terdapat Code warna Hijau itu adalah Efek Normal dari sebuah gambar, jadi Efek normalnya adalah dengan Opacity=0.1 Dan Alphanya=100.

5. Simpan Template Sobat.
6. Panggil Baris Code CSS tersebut dengan menggunakan Code HTML, ya iyalah itu udah wajibnya, gk boleh di ganggu gugat wakakaka ..

<a class="img_opacity" href="http://forbiden-403.blogspot.com"><img  border="0" src="URL Gambr Loe" /></a>

DEMO

Link Nudging Versi CSS3

Assalamu'alaikum ..
Sobat bloggers, sebelumnya saya sudah posting CSS & jQuery Link Nudging, Namun kali ini berbeda, kali ini menggunakan CSS3 .
Lansung aja sob Cekidot ..

Code CSS3

Berikut adalah Code CSS3, Silahkan kalian masukan di atas Tag ]]></b:skin>

ul.nudging li a {
  text-decoration:none;
  display:block;
  overflow:hidden;
  padding:5px 10px;
  color:white;
  background-image:-webkit-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:-moz-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:-ms-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:-o-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  -webkit-background-size:200% 100%;
  -moz-background-size:200% 100%;
  background-size:200% 100%;
  -webkit-transition:all 0.26s ease-out;
  -moz-transition:all 0.26s ease-out;
  -ms-transition:all 0.26s ease-out;
  -o-transition:all 0.26s ease-out;
  transition:all 0.26s ease-out;
}

.nudging li a:hover {
  background-position:100% 100%;
  padding-left:15px;
}

Ada pertanyaan dari Sobat Bloggers, yaitu dari Alam Perwira, yaitu, klo mau kasih ke Label gimana sob ?
Penerapanya cukup mudah kok sob, anda cukup Hilangkan Code yang berwarna Biru, Itu adalah ID dari CSS3 tersebut, Bila yang berwarna biru adalah untuk Active, Sedangkan Yang berwarna Hijau adalah Saat di Hover/di sorot dengan crusor. Lah kalo berwarna Merah itu apa sob ?  yang berwarna Merah adalah tampilan Background Pada Link yang di beri Nudging, Kalian bisa menghapusnya, sebenarnya itu kurang penting.

Masih bingung nih sob ..
Contoh Penerapan di dalam Blog saya yaitu :

.post h3 {
    color: #333333;
    font-size: 16px;
    font-family: 'Piedra', cursive;
    font-weight: normal;
    text-decoration: none;
    margin: 0 0 5px;
    padding: 10px 0 0;
        text-shadow:0 1px 0px #FFF,0 0 3px #FFF,0 0 5px #FFF,0 0 30px #FFF,0 3px 5px #FFF;
        text-decoration:none;
        display:block;
        overflow:hidden;
        padding:5px 10px;
        color:white;
        background-image:-webkit-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
        background-image:-moz-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
        background-image:-ms-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
        background-image:-o-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
        background-image:linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
        -webkit-background-size:200% 100%;
        -moz-background-size:200% 100%;
        background-size:200% 100%;
        -webkit-transition:all 0.26s ease-out;
        -moz-transition:all 0.26s ease-out;
        -ms-transition:all 0.26s ease-out;
        -o-transition:all 0.26s ease-out;
        transition:all 0.26s ease-out;
}

Hover Mode/Saat di sorot oleh Crusor :

.post h3 a:hover {
    color: #CF152A;
    text-decoration: none;
        background-position:100% 100%;
        padding-left:15px;
}

Contoh penerapan Lain, yaitu menjawab Pertanyaan Alam Perwira, Memasang Link Nudging Pada Label :

        #label1 .widget-content ul li :hover {
          text-decoration:none;
          display:block;
          overflow:hidden;
          padding:5px 10px;
          color:white;
          background-image:-webkit-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
          background-image:-moz-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
          background-image:-ms-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
          background-image:-o-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
          background-image:linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
          -webkit-background-size:200% 100%;
          -moz-background-size:200% 100%;
          background-size:200% 100%;
          -webkit-transition:all 0.26s ease-out;
          -moz-transition:all 0.26s ease-out;
          -ms-transition:all 0.26s ease-out;
          -o-transition:all 0.26s ease-out;
          transition:all 0.26s ease-out;;
        }

Kalian juga bisa dengan Menggunakan Kode CSS Di bawah ini, saya dapatkandari Google :

#label1 .widget-content ul li :hover {margin-left: 10px;
    padding-left: 5px; background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.40) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.40))); background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); background: linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%);
    -moz-transition: all 0.70s ease-out;  /* FF4+ */
    -o-transition: all 0.70s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.70s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 0.70s ease-out;  /* IE10? */display: block;

Code Berwarna ungu Di atas adalah ID dari Label yang kamu punya, Misal di Blog kamu IDnya label2, maka Tulisan berwarna Ungu di atas ganti menjadi label2.

Sekian dlu ya sobat, kalo kurang Jelas Komentar ya, dan Semoga bisa jawab pertanyaan Alam Perwira.
Wassalamu'alaikum wr. wb.

CSS & jQuery Link Nudging

Udah Lama gk Posting, Kali ini saya mau POsting Cara Bikin Efek Nudging Pada Link, Lansung Aja ya, Billing Mau abis Nee ..

Cekidot


1. Login Blogger Kalian
2. Rancangan --> Edit HTML
3. Cari Tag ]]></b:skin>
4. Masukan Kode CSS Di bawah ini di atas Tag Tadi :

    #nudging-f403 li a {
    -moz-transition: all 0.30s ease-out;  /* FF4+ */
    -o-transition: all 0.26s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.30s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 0.30s ease-out;  /* IE10? */ 

    -moz-transition-duration: 1s;}
    #nudging-f403 li a:hover {
    padding-left: 100px;
    }

5. Save Template
6. Berikut adalah Kode HTMLnya

<div id="nudging-f403">
<li><a href="#">Tautan Satu</a></li>
<li><a href="#">Tautan Dua</a></li>
<li><a href="#">Tautan Tiga</a></li>
<li><a href="#">Tautan Empat</a></li>
</div>

 DEMO :

Link Pertama

Link Kedua 

*eNBe : Anda harus Ganti Versi Web anda dlu ya, klo gk EFEKnya GK ADA

jQuery

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: </head> 

Letakan Kode CSS berikut tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
$(document).ready(function() {
$('a.linknudge').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>

6. Save template

7. Untuk Kode HTML, di bawah ini :

<a class='linknudge' href='http://forbiden-403.blogspot.com/'>[./Forbiden-403] | Share And Enjoy</a>

DEMO :
[./Forbiden-403] | Share And Enjoy
Segitu aja ya, Insyaallah bermanfaat.
Tunggu Tutorial lainya ya ,,

Kumpulan Efek Gambar Dengan CSS

Banyak Sekali Image EFek pake CSS, Tapi saya mau share beberapa aja ya, kalo kurang Komentar Aja, ntar saya Tanggapi .
Oke sob,
Langsung aja deh, Cekidot

1. Membuat Border berubah Warna saat Di Hover/Sorot
Kode CSSnya :

.f403_img-efek {
border:1px solid #fff;
  }
.f403_img-efek:hover {
border:1px solid blue;
  }

Kode HTMLnya :

<img class="f403_img-efek" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaAUIQDzAxD8URH8rFne8Zl6kNglu3PkMlJkVC6oGS8Dv6sxWBsIlwiYmqhUUyeg_hDt5yAa5lAs-8ai9z0zTHdF8hHXQrzPq6Nwuxx2nCQ8cvBGjq1l3eMahKH-vzdCmp8Td_b8jnKn-s/s1600/main-logo.png" />

Keterangan :
1. Kode warna Merah adalah Kode Panggilan Script
2. Kode Warna Biru adalah URL Gambar Kalian
Demo :


2. Mengubah Background dan Border berubah Warna
CSS :

 .f403_img-efek-2{
border:5px solid #ccc;
  }
.f403_img-efek-2:hover {
  background-color:blue;
border:5px solid #ddd;
  }

 HTML : 

<img class="f403_img-efek-2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaAUIQDzAxD8URH8rFne8Zl6kNglu3PkMlJkVC6oGS8Dv6sxWBsIlwiYmqhUUyeg_hDt5yAa5lAs-8ai9z0zTHdF8hHXQrzPq6Nwuxx2nCQ8cvBGjq1l3eMahKH-vzdCmp8Td_b8jnKn-s/s1600/main-logo.png" />

Demo :


3. Dashed Border Image
CSS :

.f403_img-efek-3 {
border:2px solid #ccc;
  }
.f403_img-efek-3:hover {
border:2px dashed #000;
  }

HTML :

<img class="f403_img-efek-3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaAUIQDzAxD8URH8rFne8Zl6kNglu3PkMlJkVC6oGS8Dv6sxWBsIlwiYmqhUUyeg_hDt5yAa5lAs-8ai9z0zTHdF8hHXQrzPq6Nwuxx2nCQ8cvBGjq1l3eMahKH-vzdCmp8Td_b8jnKn-s/s1600/main-logo.png" />

Demo :



4. Dotted Image Border

CSS :

.f403_img-efek-4 {
border:2px solid #ccc;
  }
.f403_img-efek-4:hover {
border:2px dotted #000;
  }

HTML :

<img class="f403_img-efek-4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaAUIQDzAxD8URH8rFne8Zl6kNglu3PkMlJkVC6oGS8Dv6sxWBsIlwiYmqhUUyeg_hDt5yAa5lAs-8ai9z0zTHdF8hHXQrzPq6Nwuxx2nCQ8cvBGjq1l3eMahKH-vzdCmp8Td_b8jnKn-s/s1600/main-logo.png" />

Demo :


5. Auto Zoom Image with Shadow Color

CSS :

    .f403_img-efek-5 {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    margin: 0 10px 5px 0;
    position: relative;
    padding: 3px;
    width: 125px;
    height: 125px;
    -moz-Photoz3-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
    -webkit-Photoz3-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
    -webkit-transform: rotate(-15deg);
    }


    .f403_img-efek-5:hover{
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -o-transform:scale(1.1);
    box-shadow:0px 0px 10px blue;
    -webkit-box-shadow:0px 0px 10px blue;
    -moz-box-shadow:0px 0px 10px blue;
    opacity: 1;
    z-index: 2;
    position: relative;
    -moz-transform: rotate(0deg);
    -moz-transform: scale(1.25);
    -webkit-transform: rotate(0deg);
    -webkit-transform: scale(1.25);

HTML :

<img class="f403_img-efek-5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaAUIQDzAxD8URH8rFne8Zl6kNglu3PkMlJkVC6oGS8Dv6sxWBsIlwiYmqhUUyeg_hDt5yAa5lAs-8ai9z0zTHdF8hHXQrzPq6Nwuxx2nCQ8cvBGjq1l3eMahKH-vzdCmp8Td_b8jnKn-s/s1600/main-logo.png" />

Demo :



6. Membuat Gambar Berputar saat di Sorot/Hover

CSS Efek Kertas Lipat

Assalamu'alaikum ..
sobat Bloggers .. kali ini saya mau kasih tau cara bikin Kertas kelipet pinggiranya Pake CSS ..
lansung aja ya gk usah pake penjelasan, soalnya dah Ngantuk sob ..

1. Biasa lah login Blog dulu
2. Rancangan --> Edit HTML
3. Cari Elemen ]]></b:skin> 
4. Masukan CSS berikut di atas code Elemen tadi

/*
--------------------------
Standar tampilan
--------------------------
*/

.note {
  position:relative;
  width:30%;
  padding:1em 1.5em;
  margin:2em auto;
  color:#fff;
  background:#97C02F;
  overflow:hidden;
}

.note:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  border-width:0 16px 16px 0;
  border-style:solid;
  border-color:#fff #fff #658E15 #658E15;
  background:#658E15;
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  display:block; width:0; /* Firefox 3.0 damage limitation */
}

/*
--------------------------
Opsi untuk memberikan efek rounded corner
dengan menambahkan class "rounded"
--------------------------
*/

.note.rounded {
  -webkit-border-radius:5px 0 5px 5px;
  -moz-border-radius:5px 0 5px 5px;
  border-radius:5px 0 5px 5px;
}

.note.rounded:before {
  border-width:8px;
  border-color:#fff #fff transparent transparent;
  -webkit-border-bottom-left-radius:5px;
  -moz-border-radius:0 0 0 5px;
  border-radius:0 0 0 5px;
}

5. Simpan Template
6. Untuk memanggil CSS di atas di butuhkan Code HTML, Di bawah ini adalah Code HTMLnya

<div class='note'>
Tulisan Loe Disini
</div>

<div class='note rounded'>
Tulisan Loe Disini ..
</div>

DEMO :

Lorem Ipsum bla bla bla ..

Lorem Ipsum Bla bla bla ..

3D Button CSS3

Halo sobat Blogger ,,
sebelum saya tidur, saya mau posting 3D button ah .
langsung aja dah udah ngantuk Cekidot ..

1. Login ke Blogger Kalian Masing²
2. Rancangan --> Edit HTML
3. Cari Elemen code ]]></b:skin>
4. Masukan Code CSS3 Di bawah ini di atas Code b:skin tadi

.button3 {
  cursor:pointer;
  margin:10px 0px;
  background:#0CA2F2;
  padding:10px 15px;
  margin:4px 2px;
  font:bold 16px Arial,Sans-Serif;
  color:#fff;
  text-decoration:none;
  outline:none;
  text-shadow:0px -1px 0px #0474C2;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
}

.button3:hover {
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #0396FC,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #0786DE,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
}

.button3:active {
  position:relative;
  top:2px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
}

5. Simpan Template.
6. Untuk mengaktifkanya, masukan Kode HTML di bawah Ini di mana aja Terserah kalian mau di posting di widget terserah kalian pokoknya

<a class='button3' href='#'>Pencetan 3 Dimensi Coy</a>

Demo :

Pencetan 3 Dimensi Gue Coy

CSS Circle Menu

Assalamu'alaikum ..
apa kabar sobat Blogger ? pasti baik aja kan ?
kali ini saya mau ngasih Tutorial Cara membuat CSS Circle Menu. Tau gk ? Pasti Tau donk, Bisa kalian bayangin kan ? menunya bentuknya Bulet gitu hehehe ..
Langsung Aja Deh ke tutorialnya Cekidot ..

1. Login Blogger Kalian
2. Rancangan --> Edit HTML
3. Cari Elemen Code ]]></b:skin>

4. Masukan CSS di bawah ini Di atas Elemen Code tadi

.menubunder{
width: 100%;
overflow:hidden;
}

.menubunder ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center;
}

.menubunder li{
display: inline;
margin: 0;
}

.menubunder li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#b72d23;
margin: 0;
margin-right:5px;
width:100px;
height:100px;
border-radius: 400px;
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}

.menubunder a span{
position:relative;
top:40%;
}

.menubunder li a:visited{
color: white;
}

.menubunder a:hover{
background: #a71b15;
}

5. Simpan Template
6. Untuk memanggil CSS, Dibutuhkan HTML code, Masukan Code HTML Di bawah ini Untuk memanggil CSS Dimana aja, diwidget, dipostingan dll.

<div class="menubunder">
<ul>
<li><a href="#">Link Loe</a></li>
<li><a href="#">Link Loe</a></li>
<li><a href="#">Link Loe</a></li>
<li><a href="#">Link Loe</a></li>
<li><a href="#">Link Loet</a></li>
</ul>
</div>

7. Finish. Silahkan lihat sendiri Hasilnya,

Lihat Demo Di Bawah Ini :

• Link Gue
• Link Gue
• Link Gue
• Link Gue
• Link Gue

CSS Rounded Corners

Assalamu'alaikum wr.wb
eh .. Ketemulagi di hari yang sama. Sebelumnya saya Posting CSS3 Menu With Gradient Background Color, kali ini saya mau posting yang lain nee ..
CSS Rounded Corners, Pantes nee buat Blockquote Blog kamu ..
langsung Ke tutornya sobat Cekidot ..

1. Login Blogger Kalian.
2. Rancangan --> Edit HTML
3. Cari Elemen ]]></b:skin
4. Masukan Code CSS Di bawah ini di atas Code tadi ..

#rnd_container {background: #DFD5B9; margin:1px;}
   
    .rnd_top, .rnd_bottom {display:block; background:#DFD5B9; font-size:1px;}
    .rnd_b1, .rnd_b2, .rnd_b3, .rnd_b4 {display:block; overflow:hidden;}
    .rnd_b1, .rnd_b2, .rnd_b3 {height:1px;}
    .rnd_b2, .rnd_b3, .rnd_b4 {background:#FFFFFF; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC;}
    .rnd_b1 {margin:0 5px; background:#CCCCCC;}
    .rnd_b2 {margin:0 3px; border-width:0 2px;}
    .rnd_b3 {margin:0 2px;}
    .rnd_b4 {height:2px; margin:0 1px;}
   
    .rnd_content {
    display:block;
    border:0 solid #CCCCCC;
    border-width:0 1px;
    padding: 4px;
    background:#FFFFFF;
    color:#000000;
}

Keterangan : Kode Yang Berwarna gnti dengan warna yang kalian inginkan.

5. Simpan Template.
6. Untuk Mengaktifkan CSS Tersebut, kita memerlukan HTML Code, Masukan Kode HTML di bawah ini di Mana aja, di Postingan, Di widget, dan lain-lain.

<div id="rnd_container">
<b class="rnd_top"><b class="rnd_b1"></b><b class="rnd_b2"></b><b class="rnd_b3"></b><b class="rnd_b4"></b></b>
<div class="rnd_content">
Tulisan Loe
</div>
<b class="rnd_bottom"><b class="rnd_b4"></b><b class="rnd_b3"></b><b class="rnd_b2"></b><b class="rnd_b1"></b></b>
</div>

7. Selesai deh.

DEMO :

Tulisan Gue

CSS3 Menu With Gradient Background Color

Assalamu'alaikum wr. wb .
Ketemu lagi dengan Forbiden-403, Kali ini saya mau share cara Bikin menu With CSS3. Yang membuat menarik menu ini adalah Dengan Desain Background Gradient Color, Oke langsung Aja Ke tutorialnya ya Cekidot ..

1. Login Blogger Kalian
2. Rancangan --> Edit HTML
3. Cari Elemen Code ]]></b:skin
4. Masukan Code CSS Di bawah ini di atas Code b:skin tadi

#menu-bar {
  margin: 0px 0px 0px 0px;
  padding: 6px 6px 0px 6px;
  height: 34px;
  line-height: 100%;
  border-radius: 24px;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  box-shadow: 2px 2px 3px #666666;
  -webkit-box-shadow: 2px 2px 3px #666666;
  -moz-box-shadow: 2px 2px 3px #666666;
  background: #8B8B8B;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A9A9A9, endColorstr=#7A7A7A);
  background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
  background: -moz-linear-gradient(top,  #A9A9A9,  #7A7A7A);
  border: solid 1px #6D6D6D;
}
#menu-bar li {
  margin: 0px 6px 0px 6px;
  padding: 0px 0px 6px 0px;
  float: left;
  position: relative;
  list-style: none;
}
#menu-bar a {
  font-weight: bold;
  font-family: arial;
  font-style: normal;
  font-size: 12px;
  color: #E7E5E5;
  text-decoration: none;
  display: block;
  padding: 8px 20px 8px 20px;
  margin: 0;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  text-shadow: 2px 2px 3px #000000;
}
#menu-bar .current a, #menu-bar li:hover > a {
  background: #0399D4;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#A1A1A1);
  background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
  background: -moz-linear-gradient(top,  #EBEBEB,  #A1A1A1);
  color: #444444;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
  background: none;
  border: none;
  color: #666;
  -box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#menu-bar ul a:hover {
  background: #0399D4 !important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#04ACEC, endColorstr=#0186BA);
  background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
  background: -moz-linear-gradient(top,  #04ACEC,  #0186BA) !important;
  color: #FFFFFF !important;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 2px 2px 2px #FFFFFF;
}
#menu-bar ul {
  background: #DDDDDD;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
  background: -moz-linear-gradient(top,  #FFFFFF,  #CFCFCF);
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 30px;
  left: 0;
  border: solid 1px #B4B4B4;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-box-shadow: 2px 2px 3px #222222;
  -moz-box-shadow: 2px 2px 3px #222222;
  box-shadow: 2px 2px 3px #222222;
}
#menu-bar li:hover > ul {
  display: block;
}
#menu-bar ul li {
  float: none;
  margin: 0;
  padding: 0;
}
#menu-bar ul a {
  padding:10px 0px 10px 15px;
  color:#424242 !important;
  font-size:12px;
  font-style:normal;
  font-family:arial;
  font-weight: normal;
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
  border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
  border-bottom-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#menu-bar {
  display: inline-block;
}
  html[xmlns] #menu-bar {
  display: block;
}
* html #menu-bar {
  height: 1%;
}

5. Simpan Template.
6. Untuk Mengaktifkan Menunya, Masukan Kode HTML di bawah ini di mana aja, di postingan, di widget dll.

<ul id="menu-bar">
 <li class="current"><a href="#">Home</a></li>
 <li><a href="#">Products</a>
  <ul>
   <li><a href="#">Products Sub Menu 1</a></li>
   <li><a href="#">Products Sub Menu 2</a></li>
   <li><a href="#">Products Sub Menu 3</a></li>
   <li><a href="#">Products Sub Menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">Services</a>
  <ul>
   <li><a href="#">Services Sub Menu 1</a></li>
   <li><a href="#">Services Sub Menu 2</a></li>
   <li><a href="#">Services Sub Menu 3</a></li>
   <li><a href="#">Services Sub Menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>

Ganti HTML di atas sesuka hati kalian.
7. Simpan Dan Lihat Hasilnya.

Demo :

• Home
• Products
  
  • Products Sub Menu 1
  • Products Sub Menu 2
  • Products Sub Menu 3
  • Products Sub Menu 4
• Services
  
  • Services Sub Menu 1
  • Services Sub Menu 2
  • Services Sub Menu 3
  • Services Sub Menu 4
• About
• Contact Us

CSS3 Gradient Warning Line

Tutorial CSS yuk ..
udah beberapa Minggu ini saya mengisi hari saya dengan Posting Tutorial CSS, Bukan karenasaya Master, Tetapis, Saya cuma ingin share Pengetahuan CSS yang saya Kuasai.
Nah, Kali ini saya mau bagi ke kalian Cara membuat Gradient Warning Line pake CSS, Mau liat ?
Nee di bawah ini ada :

Teks kamu

Tau kan apa Maksudnya ?
kalo Gk tau, mendingan lewatin aja Tutorial ini heheheh ..
Okeh .. Kita langsung Aja ke Tutorialnya, Cekidot

1. Login Blog Masing²
2. Rancangan --> Edit HTML
3. Cari Kode ]]></b:skin>
4. Masukan Kode CSS di bawah ini di atas Kode b:skin tadi

.medeni {
  background:yellow;
  background:-webkit-repeating-linear-gradient(45deg, yellow 15px, yellow 35px, black 30px, black 60px);
  background:-moz-repeating-linear-gradient(45deg, yellow 15px, yellow 35px, black 30px, black 60px);
  background:-ms-repeating-linear-gradient(45deg, yellow 15px, yellow 35px, black 30px, black 60px);
  background:-o-repeating-linear-gradient(45deg, yellow 15px, yellow 35px, black 30px, black 60px);
  background:repeating-linear-gradient(45deg, yellow 15px, yellow 35px, black 30px, black 60px);
}

5. Simpan Template
6. Untuk Mengaktifkan Kode CSS Di atas, di butuhkan Kode HTML, Masukan Kode HTML di bawah Ini di mana aja, di postingan di widget, and Many More

<div class='medeni'>
Tulisan Loe
</div>

7. Selesai Deh Tutorialnya ..

Efek Link Text Menyala saat diSorot/Hover

Tutorial ini sangat Sederhana, hanya menerapkan Beberapa Kode CSS yang Harus di masukan Di atas Elemen ]]></b:skin

1. Login Blogger
2. Cari kode ]]></b:skin

3. Masukan Kode Ini Di atasnya :

a.murub {
color:#ccc;
text-decoration:none;
text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}

a.murub:hover {

  color:#fff;
  text-shadow:0 1px 0px #FF00FF,0 0 3px #FF00FF,0 0 5px #FF00FF,0 0 30px #FF00FF,0 3px 50px #FF00FF;
}

4. Simpan Template
5. Untuk Mengaktifkan Teks Menyalanya anda harus memasukan Kode HTML Berikut Di mana aja, Di postingan atau di Widget Terserah anda ..

<a class="murub" href="#">LINK</a>

Sekian tutorial dari saya ..
Insyaallah Bermanfaat..
Bila Kurang Jelas Komentar ya ..

CSS Box Shadow

Assalamu'alaikum ..
ee ..
Ketemu lagi di hari yang sama nee ..
Di hari yang Sama nee saya mau Posting Yang Ketigaxxxxx ..
Langsung aja dehh ..
Simak ya Tutorialnya , Buat master lewat aja (jangan Anggap saya Master, Saya juga Masih Belajar alias Newbie)

Tutorial ini untuk memberi Efek Shadow pada Area Tertentu ..
Nee Kode CSSnya :

Untuk yang Bayangan Bagian Luar :

-webkit-box-shadow:10px 10px 7px #222; /* Safari & Chrome */
-moz-box-shadow:10px 10px 7px #222;    /* Firefox */
box-shadow:10px 10px 7px #222;         /* W3C */

Untuk Bayangan Bagian Dalam :

-webkit-box-shadow:inset 10px 10px 7px #222; /* Safari & Firefox */
-moz-box-shadow:inset 10px 10px 7px #222;    /* Firefox */
box-shadow:inset 10px 10px 7px #222;         /* W3C */

10px yang pertama adalah ukuran offset sumbu-X, 10px yang ke dua adalah offset sumbu-Y, 7px adalah tingkat blur, #222 adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini:

Top-Down	Inline
#kotak1 { -webkit-box-shadow:10px 10px 7px #222; -moz-box-shadow:10px 10px 7px #222; box-shadow:10px 10px 7px #222; } ...... <div id='kotak1'>OBJEK</div>	<div style='-webkit-box-shadow:10px 10px 7px #222;-moz-box-shadow:10px 10px 7px #222;box-shadow:10px 10px 7px #222;'> OBJEK </div>

Jelaskan tutorialnya ?
Kalo Belum Jelas Gak usah Di bahas hehehe ..

CSS3 Media Temple Button

Assalamu'alaikum ..
Kembali Lagi dengan Saya [./Forbiden-403]
Gimana Kabar Kalian Kalian ..
Baik Aja ya ..
sekarang kita mau belajar buat Button Via CSS ..
Langsung aja deh tutorialnya ..
Cekidot ..

1. Login Blog kalian masing²
2. Rancangan --> Edit HTML
3. Cari Kode ]]></b:skin
4. Masukan Kode Ini Di atas Kode tadi

.button {
  cursor:pointer;
  background:#328EC5;
  background:-webkit-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:-moz-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:-ms-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:-o-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  padding:0.75em 1.5em;
  font:normal 1em Calibri,Arial,Sans-Serif;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  text-shadow:0px -1px 0px rgba(0,0,0,0.3);
  -webkit-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.4),
    0px 1px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.4),
    0px 1px 2px rgba(0,0,0,0.7);
  box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.4),
    0px 1px 2px rgba(0,0,0,0.7);
  -webkit-border-radius:0.7em;
  -moz-border-radius:0.7em;
  border-radius:0.7em;
  border:none;
}

.button:hover {
  background:#399BD6;
  background:-webkit-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:-moz-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:-ms-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:-o-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  -webkit-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.5),
    0px 2px 4px rgba(0,0,0,0.4);
  -moz-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.5),
    0px 2px 4px rgba(0,0,0,0.4);
  box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.5),
    0px 2px 4px rgba(0,0,0,0.4);
}

.button:active {
  background:-webkit-linear-gradient(bottom, #88CEF7, #399BD6);
  background:-moz-linear-gradient(bottom, #88CEF7, #399BD6);
  background:-ms-linear-gradient(bottom, #88CEF7, #399BD6);
  background:-o-linear-gradient(bottom, #88CEF7, #399BD6);
  background:linear-gradient(bottom, #88CEF7, #399BD6);
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

5. Simpan Template..
6. cara menampilkan Butonya tinggal kalian masukan Kode di bawah ini Di mana aja, Di postingan, Di Widget, Di mana aja deh ..

<a class="button" href="#">Text Anda</a>

7. Selesai ..
Mau lihat Contohnya ?
Di atas Tu ada ..
Yang Tulisan [./Forbide-403]
untuk Edit terserah kalian , Mau ganti warna, apa mau ngapain, terserah kalian ..


Sekian Tutorial Dari Saya ..
Insyaallah Bermanfaat