Kamis, 04 Desember 2014

Membuat Efek 3D Membuka Pada Teks Dengan CSS

Membuat Efek 3D Membuka Pada Teks Dengan CSS - Dengan menggunakan fungsi pseudo-elemen, CSS transformasi dan transisi, kita akan membuat efek 3D (3 Dimensi) dengan sangat menarik seperti yang akan saya bagikan berikut ini, membuat efek 3 Dimensi membuka pada teks. Dan efek membuka pada teks ini cocok untuk semua browser karena adanya penggunaan transisi pseudo-elemen khususnya untuk Chrome dan Firefox

Membuat Efek 3D Membuka Pada Teks Dengan CSS

Namun saya teidak bisa menerapkannya didalam blog ini dikarenakna kode CSS yang digunakan untuk membuat efek 3D membuka pada teks ini lumayan banyak, sedangkan di template blog ini sendiri sudah banyak penggunaan kode CSSnya, apalagi kode HTML juga lumayan. Namun meski menggunakan kode CSS yang lumayan banyak tidak akan mempengaruhi loading blog dan saya sudah membuat serta memasangnya di sebuah blog yang sementara ini khusus hanya untuk menampilkan DEMO dari efek 3 dimensi membuka pada teks ini. Silahkan klik tombol berikut ini untuk melihat DEMOnya langsung


Sudah melihat DEMOnya? Mari kita lanjutkan... Efek membuka pada teks dari Tympanus ini bukan milik saya dan melalui artikel ini saya hanya memberikan infonya saja sedangkan untuk penerapannya, silahkan dikembangkan sendiri :)

Jika Anda belum melihat DEMOnya, saya yakin Anda tidak akan tahu seperti apa tampilan dari efek membuka pada teks ini dan jika Anda sudah melihat DEMOnya, saya juga akan berpikir "Lalu akan saya pasang dimana?" Karena melihat tampilan DEMOnya saja sudah sangat menarik namun tetap bingung untuk memasangnya hihihii..

Sekali lagi, kode CSS untuk efek 3D pada teks membuka ini saya sesuaikan dengan halaman DEMO yang telah saya buat. Jika Anda ingin menampilkannya secara per kalimat dalam bentuk minimal atau sesuai dengan keinginan Anda, silahkan dikembangkan sendiri

CSS
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #222;
font-weight: 300;
color: #f0f0f0;
font-family: 'Lato', Arial, sans-serif;
}
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
a {
color: #e74d3c;
text-decoration: none;
outline: none;
}

a:hover, a:focus {
color: #fff;
}
.codrops-header {
font-size: 14px;
padding: 20px;
text-align: left;
}
.codrops-header h1 {
font-size: 38px;
line-height: 36px;
padding: 0 0 15px;
font-weight: 400;
color: #ea6657;
margin: 0;
}
.codrops-header a {
display: block;
margin: 10px 0;
font-weight: 400;
}
.grid li .codrops-header a span {
color: #e74d3c;
font-weight: 400;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}

.grid li .codrops-header a:hover span {
color: #fff;
}
.codrops-icon:before {
font-family: 'codropsicons';
margin: 0 4px;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
content: "\e001";
}
.codrops-icon-prev:before {
content: "\e004";
}
.related {
clear: both;
text-align: center;
font-size: 2em;
padding: 1em 0;
}
@media screen and (max-width: 25em) {
.codrops-icon span {
display: none;
}
}
.grid {
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.grid li {
position: relative;
float: left;
font-size: 12em;
line-height: 1.5;
max-height: 290px;
text-align: center;
width: 16.6666667%;
width: -webkit-calc(100% / 6);
width: calc(100% / 6);
}
.grid li span {
display: inline-block;
font-weight: 900;
line-height: 1;
position: relative;
color: hsla(0, 0%, 0%, 0.6);
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 550px;
-ms-perspective: 550px;
perspective: 550px;
z-index: 1;
}
.grid li span:before,
.grid li span:after {
position: absolute;
content: attr(data-letter);
line-height: inherit;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
-webkit-transition: all .3s;
transition: all .3s;
}
.grid li span:before {
text-shadow: none;
color: hsla(0, 0%, 0%, 0.12);
}
.ot-letter-left { background: #e74d3c; }
.ot-letter-left span { text-shadow: 1px 4px 6px #e74d3c, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e74d3c; }
.ot-letter-left span:after { color: #e74d3c; }
.ot-letter-left:hover span:after { color: #ea6253; }
.ot-letter-right { background: #ea6657; }
.ot-letter-right span { text-shadow: 1px 4px 6px #ea6657, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ea6657; }
.ot-letter-right span:after { color: #ea6657; }
.ot-letter-right:hover span:after { color: #ed7a6e; }
.ot-letter-top { background: #ee7f72; }
.ot-letter-top span { text-shadow: 1px 4px 6px #ee7f72, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ee7f72; }
.ot-letter-top span:after { color: #ee7f72; }
.ot-letter-top:hover span:after { color: #f09389; }
.ot-letter-bottom { background: #e95949; }
.ot-letter-bottom span { text-shadow: 1px 4px 6px #e95949, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e95949; }
.ot-letter-bottom span:after { color: #e95949; }
.ot-letter-bottom:hover span:after { color: #eb6e60; }
.ot-letter-left span:before,
.ot-letter-left span:after {
-webkit-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.ot-letter-left span:before {
-webkit-transform: scale(1.08,1) skew(0deg,1deg);
-ms-transform: scale(1.08,1) skew(0deg,1deg);
transform: scale(1.08,1) skew(0deg,1deg);
}
.ot-letter-left span:after {
text-shadow: -1px 0px 0px hsla(360, 100%, 100%, 0.1), 3px 0px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateY(-15deg);
-ms-transform: rotateY(-15deg);
transform: rotateY(-15deg);
}
.ot-letter-left:hover span:before {
-webkit-transform: scale(0.85,1) skew(0deg,20deg);
-ms-transform: scale(0.85,1) skew(0deg,20deg);
transform: scale(0.85,1) skew(0deg,20deg);
}
.ot-letter-left:hover span:after {
-webkit-transform: rotateY(-40deg);
-ms-transform: rotateY(-40deg);
transform: rotateY(-40deg);
}
.ot-letter-right span:before,
.ot-letter-right span:after {
-webkit-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.ot-letter-right span:before {
-webkit-transform: scale(0.85,1) skew(0deg,1deg);
-ms-transform: scale(0.85,1) skew(0deg,1deg);
transform: scale(0.85,1) skew(0deg,1deg);
}
.ot-letter-right span:after {
text-shadow: 1px 0px 0px hsla(360, 100%, 100%, 0.1), -3px 0px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateY(15deg);
-ms-transform: rotateY(15deg);
transform: rotateY(15deg);
}
.ot-letter-right:hover span:before {
-webkit-transform: scale(0.85,1) skew(0deg,-20deg);
-ms-transform: scale(0.85,1) skew(0deg,-20deg);
transform: scale(0.85,1) skew(0deg,-20deg);
}
.ot-letter-right:hover span:after {
-webkit-transform: rotateY(40deg);
-ms-transform: rotateY(40deg);
transform: rotateY(40deg);
}
.ot-letter-top span:before,
.ot-letter-top span:after {
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.ot-letter-top span:before {
-webkit-transform: scale(1,0.95) skew(-4deg,0deg);
-ms-transform: scale(1,0.95) skew(-4deg,0deg);
transform: scale(1,0.95) skew(-4deg,0deg);
}
.ot-letter-top span:after {
text-shadow: 0px 1px 0px hsla(360, 100%, 100%, 0.1), 0px -3px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateX(-15deg);
-ms-transform: rotateX(-15deg);
transform: rotateX(-15deg);
}
.ot-letter-top:hover span:before {
-webkit-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
-ms-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
}
.ot-letter-top:hover span:after {
-webkit-transform: translateY(-0.035em) rotateX(-40deg);
-ms-transform: translateY(-0.035em) rotateX(-40deg);
transform: translateY(-0.035em) rotateX(-40deg);
}
.ot-letter-bottom span:before,
.ot-letter-bottom span:after {
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.ot-letter-bottom span:before {
-webkit-transform: scale(1,1.05) skew(4deg,0deg);
-ms-transform: scale(1,1.05) skew(4deg,0deg);
transform: scale(1,1.05) skew(4deg,0deg);
}
.ot-letter-bottom span:after {
text-shadow: 0px -1px 0px hsla(360, 100%, 100%, 0.1), 0px 3px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateX(15deg);
-ms-transform: rotateX(15deg);
transform: rotateX(15deg);
}
.ot-letter-bottom:hover span:before {
-webkit-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
-ms-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
}
.ot-letter-bottom:hover span:after {
-webkit-transform: translateY(0.045em) rotateX(40deg);
-ms-transform: translateY(0.045em) rotateX(40deg);
transform: translateY(0.045em) rotateX(40deg);
}
@media screen and (max-width: 1190px) {
.grid li {
width: 20%;
width: -webkit-calc(100% / 5);
width: calc(100% / 5);
}
}
@media screen and (max-width: 945px) {
.grid li {
width: 25%;
width: -webkit-calc(100% / 4);
width: calc(100% / 4);
}
}
@media screen and (max-width: 760px) {
.grid li {
width: 33.3333333%;
width: -webkit-calc(100% / 3);
width: calc(100% / 3);
}
}
@media screen and (max-width: 560px) {
.grid li {
width: 50%;
width: -webkit-calc(100% / 2);
width: calc(100% / 2);
}
}
@media screen and (max-width: 340px) {
.grid li {
width: 100%;
}
}

HTML
Untuk pemasangan kode HTML berikut ini, Anda hanya perlu mengganti tiap=tipa abjad yang ada sesuai dengan keinginan Anda serta beberapa kode yang perlu diganti seperli adanya link yang tercantum. Dan sekali lagi, kode HTML dan CSS yang dibagikan di artikel ini merupakan bentuk dari halaman DEMO
<div class='container'>
<div class='component'>
<ul class='grid'>
<li><div class='codrops-header'><h1>Animasi Membuka Pada Teks</h1><a class='codrops-icon codrops-icon-prev' href='http://www.panduantemplateblog.com' target='_blank'><span>Home</span></a><a class='codrops-icon codrops-icon-drop' href='http://www.panduantemplateblog.com/2014/12/membuat-efek-3d-membuka-pada-teks.html' target='_blank'><span>Tutorial</span></a><a class='codrops-icon codrops-icon-drop' href='http://panduantemplateblog.com/p/arsip-blog.html' target='_blank'><span>Articles</span></a></div></li>
<li class='ot-letter-left'><span data-letter='P'>P</span></li>
<li class='ot-letter-top'><span data-letter='A'>A</span></li>
<li class='ot-letter-right'><span data-letter='N'>N</span></li>
<li class='ot-letter-bottom'><span data-letter='D'>D</span></li>
<li class='ot-letter-left'><span data-letter='U'>U</span></li>
<li class='ot-letter-left'><span data-letter='A'>A</span></li>
<li class='ot-letter-right'><span data-letter='N'>N</span></li>
<li class='ot-letter-left'><span data-letter='T'>T</span></li>
<li class='ot-letter-top'><span data-letter='E'>E</span></li>
<li class='ot-letter-right'><span data-letter='M'>M</span></li>
<li class='ot-letter-left'><span data-letter='P'>P</span></li>
<li class='ot-letter-top'><span data-letter='L'>L</span></li>
<li class='ot-letter-left'><span data-letter='A'>A</span></li>
<li class='ot-letter-top'><span data-letter='T'>T</span></li>
<li class='ot-letter-right'><span data-letter='E'>E</span></li>
<li class='ot-letter-bottom'><span data-letter='B'>B</span></li>
<li class='ot-letter-right'><span data-letter='L'>L</span></li>
<li class='ot-letter-bottom'><span data-letter='O'>O</span></li>
<li class='ot-letter-right'><span data-letter='G'>G</span></li>
<li class='ot-letter-left'><span data-letter='.'>.</span></li>
<li class='ot-letter-top'><span data-letter='C'>C</span></li>
<li class='ot-letter-right'><span data-letter='O'>O</span></li>
<li class='ot-letter-left'><span data-letter='M'>M</span></li>
<li class='ot-letter-top'><span data-letter='1'>1</span></li>
<li class='ot-letter-left'><span data-letter='2'>2</span></li>
<li class='ot-letter-top'><span data-letter='3'>3</span></li>
<li class='ot-letter-right'><span data-letter='4'>4</span></li>
<li class='ot-letter-bottom'><span data-letter='5'>5</span></li>
<li class='ot-letter-left'><span data-letter='6'>6</span></li>
<li class='ot-letter-bottom'><span data-letter='7'>7</span></li>
<li class='ot-letter-right'><span data-letter='8'>8</span></li>
<li class='ot-letter-left'><span data-letter='9'>9</span></li>
<li class='ot-letter-top'><span data-letter='0'>0</span></li>
<li class='ot-letter-right'><span data-letter='?'>?</span></li>
<li class='ot-letter-left'><span data-letter='@'>@</span></li>
</ul>
</div>
<section class='related'>
<p>Baca juga Artikel berikut ini:</p>
<div><a href='http://www.panduantemplateblog.com/2014/02/membuat-tombol-css-sosial-media-3d.html'><h4>3D Shading Social Media with Box-Shadows</h4></a></div>
<div><a href='http://www.panduantemplateblog.com/2014/02/membuat-tombol-3d-animasi-css-di-blog.html'><h4>3D Button Animated</h4></a></div>
<span>Original by <a href='http://tympanus.net/codrops/2013/11/14/animated-opening-type/' rel='nofollow' target='_blank'>Codrops</a></span>
</section>r
</div>

Bagaimana? Cukup banyak bukan kodenya? Jika Anda berminat untuk membuat efek 3 Dimensi membuka pada teks ini, silahkan.. Sengaja saya tidak memberikan contoh per kalimat secara minimal karena semata-mata hanya untuk memberikan pemahaman dengan adanya kode-kode yang banyak tersebut agar bisa berkreasi karena menerapkan kode CSS tidak semudah menerapkan kode-kode script atau mungkin lebih sulit :)

Membuat Efek 3D Membuka Pada Teks Dengan CSS Rating: 4.5 Diposkan Oleh: ana sriwahyuni

21 komentar:

  1. mantep bu setelah saya liat demonya..

    BalasHapus
    Balasan
    1. Keren sih mbak tapi pusing liat kode-kodenya :D

      Hapus
    2. bukan keren keren lgi poko nya top lah bu.. itu teh wida juga mengakuinya...

      Hapus
  2. saya simpen dulu kode css cara membuat efek 3d ini ya mbak
    makasih sharingnya

    BalasHapus
  3. wah... bagus tuh animasi, saya bookmark. sharingnya selalu bagus.

    BalasHapus
  4. Mantap bue demo css efek 3D nya, bisa buka tutup kayak jendela gitu ya, ijin copas kode css ya bune.
    thks

    BalasHapus
    Balasan
    1. mas arie kan seneng yg buka tutup toh

      Hapus
  5. haha keren mbak ini efek 3d nya :v tadi saya lihat demonya kok bisa buka nutup kayak gitu yah wkwkwk saya izin simpan yah mbak skripnya :D

    BalasHapus
  6. widihhhhhhh, ajibbb dan kerenn sekali mbakkk ...sama seperti mas ainnu, ijin simpen dlu ya mbak hehhehee,,tertarik banget setelah liat demonyaa :)

    BalasHapus
  7. kreatif teks 3d nya mbak, izin copas kodenya ya mbak, terima kasih

    BalasHapus
  8. keren banget mbak,,, jadi pengen nyoba,,,
    kunjungan perdana nih mbak,,, kunjunga balik ya,,, hehe

    BalasHapus
  9. cantik ya mbak hasilnya, terima kasih ya atas sharingnya :D

    BalasHapus
  10. tutorial untuk mempercantik blog semakin banyak ragamnya yambak.yang semuanya dapat diperoleh secara gratisseperti cara membuat efek 3d ini.
    kita tinggal menerapkan diblog masing-masing sesuai keinginan,tp kalau saya ngomongin kode2an sudah langsungsung muncul bintang tujuh deh dikepala.hehehe

    BalasHapus
  11. demonya bagus gambar hidup dan juga meluncur ke tutorial mba yang lain, kalau saya ga bisa ngembangin nunggu matengnya aja hehe

    BalasHapus
    Balasan
    1. klo ngembangin perut bsa gk mbk ? hehe

      Hapus
  12. liat demo OK, giliran KODe nya lieuuuuurrrr ,,,hehehe

    BalasHapus
  13. selalu keren2, bisa ngebuka2 gitu mba

    BalasHapus
  14. Weh kreen ini saya mau terapin mbak, tapi di menu blogazine saya

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia