18 Situs Editing CSS CSS3 dengan Cepat

18 Situs Editing CSS CSS3 dengan Cepat - Situs untuk menunjang Edit Blog dengan CSS dan CSS 3 dengan cepat. Kalian akan sangat dibantu jika menggunakan web atau situs-situs berikut ini. Mulai dari membuat button hover, menu, css gradien, transition dan masih banyak lagi tool untuk memodifikasi blog kita dengan CSS tentunya.

Lanjut Bos, berikut ini daftar ke 18 Blog Situs Editing CSS-CSS3 dengan Cepat.

1. CSS Table Generator
2. CSS3 Generator
3. Ultimate CSS Gradient Generator
4. CSS Border Radius
5. CSS Box Shadow
6. CSS Generators
7. CSS3 Button Generator
8. HTML Tabble Style Generator
9. CSS Button Maker
10. CSS3 Generator
11. CSS3 Transforms
12. CSS3 Button Generator
13. CSS3 Gradiente Generator
14. CSS3 Playground
15. CSS Menu Builder
16. Creative CSS3 Animation Menus
17. CSS3 Generator-Webtutorials
18. CSS Menu Maker

Oke, semoga link-link diatas dapat membantu Anda memaksimalkan Blog kesayangan Anda. Selamat Mencoba dan semoga lancar-lancar sadja, heee.

Membuat Log in dan Sign up dengan CSS dan J-Query

Membuat Log in dan Sig up dengan CSS dan J-Query - Cara membuat Simple Effective Drop Down Log in dan Sign Up dengan CSS dan Jquery. Anda dapat melihat gambarannya seperti gambar dibawah ini. Anda dapat mengkombinasikan dengan PHP misalkan untuk proyek Website Anda.

Membuat Log in dan Sign up dengan CSS dan J-Query

Tampilan yang dihasilkan nantinya adalah seperti diatas, anda dapat melihatnya dengan mengklik gambar karena saya tidak membuatkan untuk demonya.

Analogi dari proyek membuat drop Log  in

Oke lanjut untuk script dalam membuat Log in dan Sig up dengan CSS dan J-Query sebagai berikut :

HTML

<nav>
<ul>
<li id="login">
<a id="login-trigger" href="#">
Log in <span>▼</span>
</a>
<div id="login-content">
<form>
<fieldset id="inputs">
<input id="username" type="email" name="Email" placeholder="Your email address" required>
<input id="password" type="password" name="Password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Log in">
<label><input type="checkbox" checked="checked"> Keep me signed in</label>
</fieldset>
</form>
</div>                  
</li>
<li id="signup">
<a href="">Sign up FREE</a>
</li>
</ul>
</nav>

CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: right;
  background: #eee;
  border-bottom: 1px solid #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;  
}
nav li {
  float: left;        
}
nav #login {
  border-right: 1px solid #ddd;
  -moz-box-shadow: 1px 0 0 #fff;
  -webkit-box-shadow: 1px 0 0 #fff;
  box-shadow: 1px 0 0 #fff;
}
nav #login-trigger,
nav #signup a {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  height: 25px;
  line-height: 25px;
  font-weight: bold;
  padding: 0 8px;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 #fff;
}
nav #signup a {
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}
nav #login-trigger {
  -moz-border-radius: 3px 0 0 3px;
  -webkit-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}
nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {
  background: #fff;
}
nav #login-content {
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 999;  
  background: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
  background-image: -webkit-linear-gradient(top, #fff, #eee);
  background-image: -moz-linear-gradient(top, #fff, #eee);
  background-image: -ms-linear-gradient(top, #fff, #eee);
  background-image: -o-linear-gradient(top, #fff, #eee);
  background-image: linear-gradient(top, #fff, #eee);
  padding: 15px;
  -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -moz-border-radius: 3px 0 3px 3px;
  -webkit-border-radius: 3px 0 3px 3px;
  border-radius: 3px 0 3px 3px;
}
nav li #login-content {
  right: 0;
  width: 250px;
}
/*--------------------*/
#inputs input {
  background: #f1f1f1;
  padding: 6px 5px;
  margin: 0 0 5px 0;
  width: 238px;
  border: 1px solid #ccc;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 1px 1px #ccc inset;
  -webkit-box-shadow: 0 1px 1px #ccc inset;
  box-shadow: 0 1px 1px #ccc inset;
}
#inputs input:focus {
  background-color: #fff;
  border-color: #e8c291;
  outline: none;
  -moz-box-shadow: 0 0 0 1px #e8c291 inset;
  -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
  box-shadow: 0 0 0 1px #e8c291 inset;
}
/*--------------------*/
#login #actions {
  margin: 10px 0 0 0;
}
#login #submit {   background-color: #d14545;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));
  background-image: -webkit-linear-gradient(top, #e97171, #d14545);
  background-image: -moz-linear-gradient(top, #e97171, #d14545);
  background-image: -ms-linear-gradient(top, #e97171, #d14545);
  background-image: -o-linear-gradient(top, #e97171, #d14545);
  background-image: linear-gradient(top, #e97171, #d14545);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;  
  border: 1px solid #7e1515;
  float: left;
  height: 30px;
  padding: 0;
  width: 100px;
  cursor: pointer;
  font: bold 14px Arial, Helvetica;
  color: #fff;
}
#login #submit:hover,
#login #submit:focus {   background-color: #e97171;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));
  background-image: -webkit-linear-gradient(top, #d14545, #e97171);
  background-image: -moz-linear-gradient(top, #d14545, #e97171);
  background-image: -ms-linear-gradient(top, #d14545, #e97171);
  background-image: -o-linear-gradient(top, #d14545, #e97171);
  background-image: linear-gradient(top, #d14545, #e97171);
}
#login #submit:active {   outline: none;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; }
#login #submit::-moz-focus-inner {
  border: none;
}
#login label {
  float: right;
  line-height: 30px;
}
#login label input {
  position: relative;
  top: 2px;
  right: 2px;
}

J-Query

$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active'); if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
else $(this).find('span').html('&#x25BC;')
})
});

Oke, selesai dan selamat mencobanya.

thanks TRD for sharing about this tutorial.

Follow my blog with Bloglovin

Membuat Animasi Gear Berputar CSS

Tutorial Cara Membuat Animasi Gear Berputar dengan CSS - Tutorial mudah bagaimana cara membuat animasi gear yang berputar memanfaatkan script dan code CSS. Anda perlu Upload sebuah image misalnnya sebuah Gambar gear untuk membuatnya.

Misalnya menggunakan Gambar diatas untuk dibuat berputar, anda bisa mencari gambar lainya dan dikombinasikan sehingga putarannya bisa seperti berantai.

Berikut ini script Membuat Animasi Gear Berputar CSS

HTML

<div class="gear" id="gear1"></div>

CSS

/* CSS3 keyframes aregnoz.blogspot.com */
@-webkit-keyframes ckw {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes ckw {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes cckw {
    0% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}
@-moz-keyframes cckw {
    0% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}
/* gears aregnoz.blogspot.com*/
.gear {
    float: none;
    position: absolute;
    text-align: center;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#gear1 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivzxS6c9SsSfLe4d8uJro85T-SB2hmLeZfxyJnijOZcU675QZe5YxWvmf8vwfyZh_Q_oYXrNLlDlG_fpanSqWTF8yT4NQFErlqh-Oeheazq-rVAeu4KNBndRIk5qcUbIzF4s4ORDAahZT-/s1600/gear.png') no-repeat 0 0;
    height: 130px;
    left:10px;
    top: 10px;
    width: 130px;
    -moz-animation-name: cckw;
    -moz-animation-duration: 16.84s;
    -webkit-animation-name: cckw;
    -webkit-animation-duration: 16.84s;
}

​Information !!! Tulisan dengan Background Merah silahkan Anda ganti dengan link Gambar Anda.

Selamat Mencoba.

Membuat Animasi Loading Yin Yang CSS

Membuat Animasi Loading Yin Yang menggunakan CSS - Animasi ini berbentuk Yin Yang menggunakan CSS dan bisa anda gunakan juga untuk Loading Blog Anda. Untuk pembuatannya anda bisa melihat script berikut ini, yaitu tentang Membuat Animasi Loading Yin Yang dengan CSS.

Membuat Animasi Loading Yin Yang CSS

Berikut ini script yang bisa Anda gunakan
HTML

<div class="yinyang">
</div>

CSS

.yinyang {
    background: none repeat scroll 0 0 #EEEEEE;
    border-color: #121212;
    border-radius: 100%;
    border-style: solid;
    border-width: 2px 2px 50px;
    height: 48px;
    position: relative;
    width: 96px;
    /* css3 animation */
    -webkit-animation: anim4 1s linear infinite;
    -moz-animation: anim4 2s linear infinite;
    -ms-animation: anim4 1s linear infinite;
    -o-animation: anim4 1s linear infinite;
    animation: anim4 1s linear infinite;
}
.yinyang:before {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 18px solid #121212;
    border-radius: 100%;
    content: "";
    height: 12px;
    left: 0;
    position: absolute;
    top: 50%;
    width: 12px;
}
.yinyang:after {
    background: none repeat scroll 0 0 #000;
    border: 18px solid #EEEEEE;
    border-radius: 100%;
    content: "";
    height: 12px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 12px;
}
/* css3 keyframes - animation 4 */
@-webkit-keyframes anim4 {
    from { -webkit-transform: rotateZ(0deg); }
    50% { -webkit-transform: rotateZ(180deg); }
    to { -webkit-transform: rotateZ(360deg); }
}
@-moz-keyframes anim4 {
    from { -moz-transform: rotateZ(0deg); }
    50% { -moz-transform: rotateZ(180deg); }
    to { -moz-transform: rotateZ(360deg); }
}
@-ms-keyframes anim4 {
    from { -ms-transform: rotateZ(0deg); }
    50% { -ms-transform: rotateZ(180deg); }
    to { -ms-transform: rotateZ(360deg); }
}
@-o-keyframes anim4 {
    from { -o-transform: rotateZ(0deg); }
    50% { -o-transform: rotateZ(180deg); }
    to { -o-transform: rotateZ(360deg); }
}
@keyframes anim4 {
    from { transform: rotateZ(0deg); }
    50% { transform: rotateZ(180deg); }
    to { transform: rotateZ(360deg); }
}​

Demonya seperti dibawah ini

Oke selamat mencoba.

Cara Membuat Text Shadow CSS Efek Blur

Membuat Text Shadow Efek Blur

Cara Membuat Text Shadow Efek Blur ~ Tutorial CSS 3 Efek Shadow Text On Mouse Blur sekarang kita belajar lagi menggunakan CSS dengan memanfaatkan fasilitas Text Shadow menjadi Blur. Efek Shadow ini banyak digunakan pada Blogazine untuk lebih menghidupkan Blog / Web mereka.

Tutorial CSS 3 Efek Text Shadow On Mouse Blur ini akan menjadi berubah ketika cursor didekatkan ke Text. Memanfaatkan Hover yang ada pada CSS Tutorial ini bagus untuk Blog bercitra Dark atau Gelap sehingga kelihatan menyala. Namun tidak menutup kemungkinkan untuk dipasang pada Blog bergaya simple dengan dasar putih.

Anda bisa melihat contohnya seperti pada gambar diatas, tulisan yang menyamping dengan aturan kemiringan dan efek shadow juga Blur yang terkombinasi dengan baik.

Demo klik [+]

HTML 

<div id="wrapper" contenteditable="true" spellcheck="false">      
        <p>Where</p>
        <p>are the</p>
        <p>trees</p>
</div>

​CSS

/* Wrapper ------------------------------------------------------ */
body {
    margin: 0;
    width: 100%;
    height: 100%;
    text-align: center;
 
    background-color: hsla(30,20%,95%,.9);
 
    /* Pixel pattern only enabled for WebKit because of performance */  
    background-size: 2px 3px;
    background: hsla(30,20%,95%,.9) -webkit-linear-gradient(45deg, hsla(0,0%,0%,0)  0px,
                                                                    hsla(0,0%,0%,0)  1px,
                                                                    hsla(0,0%,0%,.1) 2px,
                                                                    hsla(0,0%,0%,.1)  3px);
    display: -webkit-box;
    display:    -moz-box;
    display:     -ms-box;
    display:      -o-box;
    display:         box;
 
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-box-align: center;
         -o-box-align: center;
            box-align: center;
 
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-box-pack: center;
         -o-box-pack: center;
            box-pack: center;
    }
#wrapper {
    position: relative;
    background :#333;
    /z-index: 0;
    text-align: center;
    font-weight: bold;
    font-family: "Yanone Kaffeesatz", "Lucida Grande", Lucida, Verdana, sans-serif;
    margin: 0 auto;
    width: 600px;
    padding: 7em 0;
    background: url(bg.jpg) no-repeat center center;
    border-radius: 4px;
    box-shadow: inset 0 -1px 0  hsla(0,0%,0%,.2), 0 21px 8px -12px rgba(0,0,0,.2);
 
    -webkit-perspective: 350;
       -moz-perspective: 350;
        -ms-perspective: 350;
         -o-perspective: 350;
            perspective: 350;
    }
 
    #wrapper:focus {
        outline: none;
        }

#wrapper p {
    font-size: 10em;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow:     rgba(0,0,0,0.1) 0 20px 80px;
    -webkit-transition: -webkit-transform .1s ease-in; /* only WebKit because of performance */
    }

/* Hover ------------------------------------------------------ */
#wrapper:hover p {
    color: hsla(0,0%,0%,0);
 
    -webkit-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
       -moz-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
        -ms-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
         -o-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
            transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
 
    -webkit-transition: -webkit-transform .1s ease-out; /* only WebKit because of performance */
    }
#wrapper:hover p:nth-child(1) {
    font-size: 9em;
    text-shadow:     #fff 0 0 10px,
                    #fff 0 4px 3px, #ddd 0 9px 3px,  #ccc 0 12px 1px,
                    rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,100,0.2) 0 15px 80px;
    text-indent: 0.3em;
    }
#wrapper:hover p:nth-child(2) {
    font-size: 10em;
    text-shadow:     #fff 0 0 1px,
                    #eee 0 4px 3px, #ddd 0 9px 3px,  #ccc 0 12px 1px,
                    rgba(0,0,0,0.2) 0 14px 3px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,100,0.2) 0 15px 80px;
    }
#wrapper:hover p:nth-child(3) {
    font-size: 11em;
    text-shadow:     #fff 0 0 2px,
                    #fff 0 4px 5px, #ddd 0 9px 5px,  #ccc 0 12px 10px,
                    rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,100,0.2) 0 15px 80px;
    }

/* Middle ------------------------------------------------------ */
#wrapper p:nth-child(2):hover {
    text-shadow:     #fff 0 -5px 1px,
                    #eee 0 -1px 3px, #ddd 0 4px 3px,  #ccc 0 7px 1px,
                    rgba(0,0,0,0.2) 0 15px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,0,0.2) 0 15px 80px;
    }
 
#wrapper p:nth-child(2):active {
    text-shadow:     rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,0,0.2) 0 15px 80px;
    }
/*effand bocah nozh*/
#wrapper p::selection {
    background-color: red;
    }

Silahkan dicomot dan dimodifikasi gan, jangan lupa Es Degan nya di tinggalin dibawah biar tambah Brrrr ..
Ref : http://simurai.com

Cara Membuat List Styles Dengan CSS

Cara Membuat List Styles Dengan CSS

Cara Membuat List Styles Dengan CSS ~ Tutorial Membuat List Menu Hover berikut adalah tutorial CSS untuk membuat List Menu Hover, triks ini saya dapat dari http://designshack.net anda bisa mencobanya dan tentunya tetap untuk mampercantik blog kita.

Tutorial Membuat List Menu Hover sudah banyak juga diterangkan di blog-blog lain sehingga jika disini beda bisa anda terapkan di blog anda.

Tidak ada salahnya juga anda memodifikasinya agar lebih jan jos tenan.

Oke sekarang anda bisa mencobanya, berikut ini script yang bisa anda pakai dan modifikasi :

HTML :

<div>
  <h2>List Hover</h2>
  <ul>
    <li><a href="#">Demo 1</a></li>
    <li><a href="#">Demo 2</a></li>
    <li><a href="#">Demo 3</a></li>
    <li><a href="#">Demo 4</a></li>
    <li><a href="#">Demo 5</a></li>
  </ul>
</div>​

CSS :

div {
  width: 200px;
}

h2 {
  font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
}

li:last-child {
  border: none;
}

li a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 200px;

  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}

li a:hover {
  font-size: 30px; color:#026aba;
  background: #f6f6f6;
}​

Selesai sudah agan-agan, silahkan dicomot dan jangan lupa tinggalkan baunya dibawah untuk mempererat jalinan blogger Indonesia.

Demonya : Klik [+]

Membuat Text Shadow Dengan CSS

Tutorial Membuat Text Shadow menggunakan CSS 

Cara Membuat Text Shadow Dengan CSS ~ Tutorial Membuat Text Shadow menggunakan CSS lanjutan tutorial sebelumnya tentang text shadow, Kali ini untuk text shadow lanjutan untuk tambahan koleksi text shadow yang saya punya dan saya share saja agar temen-temen tahu bagi yang belum tahu dan yang sudah tahu harap di buat baca-baca saja, hee..

Tutorial Membuat Text Shadow menggunakan CSS ini saya adopsi dari tutorial dari website luar negeri yang menurut saya perlu saya share untuk pengetahuan kita semua.

Sekarang ayo kita lihat beberapa demonya :

CSS :

.shadow  { position:relative; display:block; color:#fff; }
.shadow span { position:absolute; display:block; top:0px;  }
.shadow:before { display:block; padding:1px; content: attr(title); color:#666;  } 

 HTML :

<p class="shadow" title="This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow."><span>This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow.</span></p>

Diatas hanya untuk contoh saja.

Sekarang Kita Belajar Membuat text Shadow Dengan CSS


1. Double Text

Double Text Shadow

Script : text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

2. Close and Heavy

Text Shadow  Close and Heavy

Script : text-shadow: 0px 4px 3px rgba(0,0,0,0.4),             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);









3. Text Shadow 3D

Text shadow 3 dimensi (3D)

Script : text-shadow: 0 1px 0 #ccc,   0 2px 0 #c9c9c9,  0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa,  0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3),  0 3px 5px rgba(0,0,0,.2),   0 5px 10px rgba(0,0,0,.25),  0 10px 10px rgba(0,0,0,.2),  0 20px 20px rgba(0,0,0,.15);

4. Text Shadow Glowing

Text Shadow Glowing

Script : text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

5. Text Soft Embos

Membuat Text Shadow Dengan CSS

Script : color: rgba(0,0,0,0.6);

            text-shadow: 2px 8px 6px rgba(0,0,0,0.2),

            0px -5px 35px rgba(255,255,255,0.3);

6. Text Shadow Down

Shadow and down

Script : text-shadow: 0px 3px 0px #b2a98f,

                 0px 14px 10px rgba(0,0,0,0.15),

                 0px 24px 2px rgba(0,0,0,0.1),

                 0px 34px 30px rgba(0,0,0,0.1);

Oke kawand, diatas 6 tutorial CSS untuk membuat efek shadow dan masih bisa kamu modifikasi lagi. Tutorial sejenis akan saya lanjutkan ditutorial part ke-2.

Coming Soon...

Membuat Menu Blog Hover Dengan CSS

Membuat Menu Blog Hover Dengan CSS

Membuat Menu Blog Hover Dengan CSS ~ Tutorial Cara Membuat Menu di Blog ini bisa kita pakai di blog kita sebagai variasi untuk mempercantik blog kita. Menu yang ada diatas blog bisa kita tambahi script ini untuk memperindah blog kita tentunya.

Anda bisa membuat tampilannya dengan sedikit perubahan mungkin menambahi Hover, Text Shadow dan Box Efek shadow dengan CSS.

Anda bisa melihat contohnya di bawah ini.

• Button 1
• Button 2
• Button 3
• Button 4
• Button 5

Anda bisa melihat demonya diatas dan anda bisa memodifikasi nya agar sesuai dengan template blog Anda.

Script nya bisa anda copy dibawah ini
Embed Script CSS

ul {
  display: table;
  width: 400px;
}
li {
  display: table-cell;
  width: 20%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
}
ul:hover li {
  width: 15%;
}
li:hover {
  width: 40% !important;
  opacity: 0.7;
}
ul li:nth-of-type(1) { background: #FF4C4C; }
ul li:nth-of-type(2) { background: #FFBF49; }
ul li:nth-of-type(3) { background: #444444; }
ul li:nth-of-type(4) { background: #6FDC6F; }
ul li:nth-of-type(5) { background: #3AADFE; }

 HTML

 <ul>
        <li>Button 1</li>
        <li>Button 2</li>
        <li>Button 3</li>
        <li>Button 4</li>
        <li>Button 5</li>
</ul>

Langsung Praktek Gan. .

Membuat Text 3D dengan CSS [3 Dimensi]

Membuat Text 3D dengan CSS [3 Dimensi] - Text 3 Dimensi dengan CSS ini adalah kita memanfaatkan shadow yang terkombinasi sekian rupa sehingga bisa membentuk gambar / tulisan 3D. Banyak hal yang bisa dilakukan jika kita menggunakan fasikitas CSS ini, dari edit untuk box hingga Text.

Membuat Text 3D dengan CSS [3 Dimensi]

Oke Sekarang kita terapkan code CSS nya :

Embed Script :

h1 {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

Dan sekarang kamu lihat hasilnya seperti berikut ini :

3D TEXT CSS

Hmm, gimana hasilnya lumayan kan, mangtabs jaya atau jan joss tanan, hee..
Oke sekian dulu turorial kali ini, lanjut lagi kapan-kapan. Selamat mencobanya.

CSS 3 Animasi Lingkaran Zoom

CSS 3 Animasi Lingkaran Zoom - Efek Zoom Animation dengan CSS 3 merupakan tutorial yang saya bagikan di awal bulan Juli 2012 ini. Tidak banyak yang bisa saya bagikan, jadi silahkan di analisis sendiri code beserta scriptnya.

DEMO :

Ganti Disini

CSS 3 Animasi Lingkaran Zoom Lucu ya lingkarannya bisa berputar dan Zooming otomatis seperti Demo diatas, kalian bisa lihat bahwa lingkaran tersebut melakukan efek rotate dan skala secara otomatis.


CSS3 ini masih bisa anda kembangkan, silahkan anda manipulasi sesuka anda.
Script Embed

<style type="text/css">
#contenido{
width:700px;
margin:0 auto;
padding:50px;
position:relative;
background:#FFF;
}
.circulo {
display:table-cell;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
height:100px;
width:100px;
background:#dedede;
text-align:center;
vertical-align:middle;
}
.circulo span{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
@-webkit-keyframes rotar
{
0% {-webkit-transform:scale(1) rotate(0deg);}
50% {-webkit-transform:scale(1.5) rotate(180deg);}
100% {-webkit-transform:scale(1) rotate(360deg);}
}
@-moz-keyframes rotar
{
0% {-moz-transform:scale(1) rotate(0deg);}
50% {-moz-transform:scale(1.5) rotate(180deg);}
100% {-moz-transform:scale(1) rotate(360deg);}
}
.circulo
{
-webkit-animation:rotar 4s infinite;
-moz-animation:rotar 4s infinite;
}
</style>
<div id="contenido">
<div class="circulo"><Ganti Disini</div>
</div>

Oke Selamat Mencobanya.
Salam Blogger Donomulyo.

CSS Membuat Pop Up Button Image

CSS Membuat Pop Up Button Image 

Tutorial CSS Membuat Pop Up Button mengeluarkan Image Variatif Zooming dengan CSS 3 pasti anda bingung dengan judul yang saya buat dipostingan ini. Saya juga bingung mau ngasih judul apa, hee. Intinya ketika Button diklik maka akan menampilkan image dengan efek hover zooming. 

Tutorial CSS Membuat Pop Up Button Image ini bisa kamu terapkan di blog kamu dengan sedikit modifikasi sesuain dengan kebutuhan di web/blog kamu.

Jika kamu masih bingung silahkan lihat demo di bawah ini :

Hot Panas

~ bagaimana Hot Bukan ~
Seperti itulah demonya, sangat sesuai judulnya yang aneh, hee..
Oke lanjut gan, jika memang anda tertarik silahkan embed script bawah ini :

<input class="popUpControl" id="popup" type="checkbox" />
<label class="elboton" for="popup">
  <span class="click">Gadis Hot</span>
  <span class="hiddenbox">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNCu90Oya-3r6R_4xskY3OS9woMt1-lG70RqDR4KcM9EfXa_Hr1LO4J1rupxfUkZfoVct4viroQYMnv02OMEExmksROSYUbtalpOtDem5Vvo2xlGHwW7eaSz8NatC_EphHTJSppM3w-ZNj/s1600/FMI201070104.jpg" />
  </span>
</label>
<style>
  .elboton {
    background-color: #f90e;
    border-radius: 10px;
    box-shadow: 0 0 10px #222 inset;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    margin: 0;
    padding: 5px 15px;
    position: relative;
    text-shadow: 1px 1px 1px #000;
  }

  .elboton br {display:none;}
   .hiddenbox {
    background-color: #FFF;
    border-radius: 10px;
    box-shadow: 0 0 15px #000 inset;
    left: 0;
    line-height: 0;
    margin: 25px 0;
    opacity: 0;
    padding: 15px;
    position: absolute;
    text-align: center;
    top: 100%;
    z-index: 100;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
  }

  .popUpControl:checked ~ label > .hiddenbox {
    opacity: 1;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
  }

  .popUpControl {display: none;}
  .popUpControl:checked ~ label > span.click {display: none;}
  .popUpControl:checked ~ label:before {content: "Cabe Bugil";}
</style>

Silahkan disesuaikan dengan kebutuhan ente agan-agan.. ^_^

Salam Blogger Donomulyo.

CSS Membuat Caption Image Atraktif

CSS Membuat Caption Image lebih Atraktif dan Gaya dengan CSS sebagian orang akan senang ketika blog atau Web nya bisa memberikan perbedaan dengan blog/web lainnya. Sekarang kita akan coba membuat tampilan image dalam blog kita lebih variatif dan atraktif dengan bantuan CSS.

Lihat Contohnya dibawah ini :

Adobe CS6

Download
Adobe EDGE CS 6

Sudah lihat kan contohnya.

Jika tertarik kamu bisa mengambil scriptnya dibawah ini sob.
1. HTML

<div class="view">
  <img src="URL_IMAGE" />
  <div class="mask">
    <h4> Title </h4>
    <p> Caption </p>
    <a href="#" class="info"> Text Button </a>
</div>
</div>

2. CSS

<style>
.view {
    border: 10px solid #FFF;
    cursor: pointer;
    height: 188px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 300px;
  }
  .view img {
    display: block;
    position: relative;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  .view:hover img {
    -moz-transform: rotate(720deg) scale(0);
    -webkit-transform: rotate(720deg) scale(0);
    -o-transform: rotate(720deg) scale(0);
    -ms-transform: rotate(720deg) scale(0);
    transform: rotate(720deg) scale(0);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  .view .mask {
    background-color: #ABC;
    height: 188px;
    left: 0;
    position: absolute;
    overflow: hidden;
    top: 0;
    width: 300px;
    -moz-transform: rotate(0deg) scale(1);
    -webkit-transform: rotate(0deg) scale(1);
    -o-transform: rotate(0deg) scale(1);
    -ms-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    opacity: 0;
    filter: alpha(opacity=0);
  }
  .view:hover .mask {
    -moz-transform: translateY(0px) rotate(0deg);
    -webkit-transform: translateY(0px) rotate(0deg);
    -o-transform: translateY(0px) rotate(0deg);
    -ms-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
    -moz-transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  .view h4 {
    background-color: rgba(255, 255, 255, 0.5);
    color: #FFF;
    text-align: center;
    position: relative;
    font-family: Georgia;
    font-size: 20px;
    margin: 20px 0 0 0;
    padding: 5px 0;
    text-shadow: 0 3px 1px #000;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .view:hover h4 {
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transition-delay: 0.7s;
    -webkit-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    transition-delay: 0.7s;
  }
  .view p {
    color: #000;
    font-family: Tahoma;
    font-size: 13px;
    margin: 0;
    padding: 15px;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px 1px #FFF;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .view:hover p {
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transition-delay: 0.6s;
    -webkit-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
  }
  .view a.info {
    background-color: #456;
    border-radius: 5px;
    box-shadow: 0 0 2px #FFF, 0 0 5px #FFF inset;
    color: #FFF;
    display: inline-block;
    padding: 7px 14px;
    text-decoration: none;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .view a.info:hover {
    box-shadow: 0 0 5px #FFF;
  }
  .view:hover a.info {
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }
</style>

 Oke silahkan dicoba dan disesuaikan dengan kebutuhan masing-masing hee.
^_^


Salam Blogger Donomulyo.

Cara Meremove Garis Dotted Outline

Cara Meremove Garis Dotted Outline - Dotted pada blog atau web biasanya di pakai untuk menandai suatu link, button dll namun terkadang itu sangat mengganggu jika dotted ini tampil pada seluruh link dan button blog kita. 

Jika kamu masih belum paham berikut ini contoh nya :

Berikut ini beberapa cara untuk menghilangkannya.

Gunakan CSS reset berikut ini :

a {
   outline: 0;
}

Untuk File Flash

object, embed {
  outline: 0;
}

Untuk di FireFox

 input::-moz-focus-inner { border: 0; }

Atau kamu bisa mencoba mencari scripnya dengan bentuk "dotted", cara manualnya adalah dengan memberi parameter "0" atau menghapusnya.

Cara ini sederhana tetapi mungkin berguna bagi yang masih belajar seperti saya.

CSS Cara Membuat Efek Melengkung pada Image

CSS Cara Membuat Efek Melengkung Pada Image - Melanjutkan Tutorial CSS sebelumnya, pagi ini kita akan mencoba membuat efek melengkung pada image ketika disorot atau didekati oleh Cursor. Kode CSS yang kita terapkan adalah dengan memanfaatkan Radius. Dengan script Radius kita bisa membuat sudut melengkung baik pada button maupun pada image.

CSS Cara Membuat Efek Melengkung Pada Image kita mencobanya dengan memanfaatkan fasilitas hover juga sehingga image akan melengkung ketika disorot oleh cursor.

Anda bisa melihat Demo diatas untuk CSS Cara Membuat Efek Melengkung Image.

#round img {
padding:15px;
background:#FFF;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#round img:hover {
border-radius: 0% 50%;
box-shadow: 0px 0px 15px #fff;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
<div id="round">
URL IMAGE</div>

 Anda bisa membuat gambar melengkung seperti gambar diatas, hanya dengan mengganti URL IMAGE yang berwarna merah itu, gamti dengan url gambarmu.

Salam Blogger Donomulyo.