Zone Downloads F403: Tutorial CSS

Tampilkan postingan dengan label Tutorial CSS. Tampilkan semua postingan

Senin, 30 Januari 2012

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/AVvXsEh2_Ua51BrBGKBlaLQCA_9_MTz2tDM5ntXXz2KDkPqoz8tHtMyeDsNZqR4bSa4FK-gU5Eq1yvL5LO-iJs9mhsNkHUDfQIdJaGgv-g4V8_rCdQCGgQSMTuT1T7PxcUlOgB4E3V0Xcm2xCQ_z/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/AVvXsEh2_Ua51BrBGKBlaLQCA_9_MTz2tDM5ntXXz2KDkPqoz8tHtMyeDsNZqR4bSa4FK-gU5Eq1yvL5LO-iJs9mhsNkHUDfQIdJaGgv-g4V8_rCdQCGgQSMTuT1T7PxcUlOgB4E3V0Xcm2xCQ_z/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/AVvXsEh2_Ua51BrBGKBlaLQCA_9_MTz2tDM5ntXXz2KDkPqoz8tHtMyeDsNZqR4bSa4FK-gU5Eq1yvL5LO-iJs9mhsNkHUDfQIdJaGgv-g4V8_rCdQCGgQSMTuT1T7PxcUlOgB4E3V0Xcm2xCQ_z/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/AVvXsEh2_Ua51BrBGKBlaLQCA_9_MTz2tDM5ntXXz2KDkPqoz8tHtMyeDsNZqR4bSa4FK-gU5Eq1yvL5LO-iJs9mhsNkHUDfQIdJaGgv-g4V8_rCdQCGgQSMTuT1T7PxcUlOgB4E3V0Xcm2xCQ_z/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/AVvXsEh2_Ua51BrBGKBlaLQCA_9_MTz2tDM5ntXXz2KDkPqoz8tHtMyeDsNZqR4bSa4FK-gU5Eq1yvL5LO-iJs9mhsNkHUDfQIdJaGgv-g4V8_rCdQCGgQSMTuT1T7PxcUlOgB4E3V0Xcm2xCQ_z/s1600/main-logo.png" />

Demo :

6. Membuat Gambar Berputar saat di Sorot/Hover

Kamis, 26 Januari 2012

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 ..

Senin, 23 Januari 2012

3D Button CSS3

http://media.smashingmagazine.com/wp-content/uploads/2011/02/new-css-techniques-103.jpg

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 :

Minggu, 22 Januari 2012

CSS Rounded Corners

http://www.schillmania.com/image/projects/even-more-rounded-corners-witih-css.png

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

http://cdn.pelfusion.com/media/wp-content/uploads/2011/02/BECNMT20-halftone-navigation-menu-jquery-css.jpg

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 :

Sabtu, 21 Januari 2012

CSS3 Gradient Warning Line

http://cdn.tripwiremagazine.com/wp-content/uploads/2010/04/CSS3.jpg

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 ..

Senin, 16 Januari 2012

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 ..

Minggu, 15 Januari 2012

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