 |
| 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">CSS
<p>Where</p>
<p>are the</p>
<p>trees</p>
</div>
/* Wrapper ------------------------------------------------------ */Silahkan dicomot dan dimodifikasi gan, jangan lupa Es Degan nya di tinggalin dibawah biar tambah Brrrr ..
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;
}
Ref : http://simurai.com
2 komentar
keren nih, 3d efek. link sudah terpasang mas cek http://miretahutempe.blogspot.com/p/buat-kalian-yang-ingin-bertukar-link.html
Whehe thanks gan udah dipasang dan berkunjung...
:)
Terimakasih atas komentar Anda.
Budayakan Bertanya dan Berkomentar dengan Sopan.
Tolong tinggalkan komentar jika Anda menemukan Link yang Broken.
EmoticonEmoticon