Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Cara Membuat Text Animations Dengan CSS

CSS TEXT ANIMATIONS Cara Membuat Text Animations Dengan CSS – untuk mendesain sebuah blog memang erat kaitannya dengan style CSS karena paling tidak sebelum menerapkan ke dalam elemen tertentu pada blog terlebih dahulu wajib kita ketahui dasarnya dahulu agar lebih mudah nantinya pada waktu akan mendeklarasikan kedalam sebuah template. Pada tutorial ini akan saya bahas sedikit mengenai tata cara agar dapat membuat sebuah text animasi yang tidak luput menggunakan fungsi CSS untuk memaksimalkan maupun melengkapi dari apa yang sudah pernah di bahas pada artikel artikel sebelumnya dalam penggunaan CSS. Ini nanti bisa di kembangkan untuk melengkapi sedikit keperluan blog dimana tergantung dari keinginan untuk menerapkannya, misal ingin di gunakan untuk title blog pada tag header maupun lainnya. Agar lebih mudah, dibawah terdapat coding beserta demonya silahkan di lihat dan di pahami mungkin nanti dapat menjadi inspirasi untuk apa dan digunakan bagaimana dalam upaya penerapannya langkah memanipulasi template blog. Berikut tutorialnya Cara Membuat Text Animations Dengan CSS.

Pertama untuk membuat teks glow, misal ingin membuat teks menjadi lebih menyala dan berkedip maka kodenya seperti dibawah ini.
Ini kode CSS untuk Membuat Text Animations
.textglow{ text-align:center; font-size:30px; color:#fff; animation:blur .75s ease-out infinite; text-shadow:0px 0px 5px #fff, 0px 0px 7px #fff; }
@keyframes blur{ from{ text-shadow:0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 50px #fff, 0px 0px 50px #fff, 0px 0px 50px #7B96B8, 0px 0px 150px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px -10px 100px #7B96B8, 0px -10px 100px #7B96B8;} }
Ini kode HTML untuk Membuat Text Animations
<div class="textglow">
mas-andes.blogspot.com
</div>
Hasilnya seperti dibawah ini
mas-andes.blogspot.com

Contoh lain untuk membuat efek pada teks agar seakan-akan seperti bergelombang.
Ini kode CSS untuk Membuat Text Animations
.textmetalic { text-align: center; font-size: 30px; color: transparent; letter-spacing: -3px;}
.textmetalic span { text-shadow: 0 0 2px rgba(204, 208, 212,0.9), 0 15px 25px rgba(0, 0, 0, 0.3), 0 -2px 3px rgba(0, 0, 0, 0.1), 0 -5px 10px rgba(255, 255, 255, 0.5), 0 5px 10px rgba(0, 0, 0, 0.3), 0 3px 4px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.45); animation: loading 1.2s ease-in-out infinite alternate; }
@keyframes loading { to { text-shadow: 0 0 2px rgba(204, 208, 212,0.2), 0 0 3px rgba(0, 0, 0, 0.02), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 255, 255, 0);} }
.textmetalic span:nth-child(2) { animation-delay:0.2s; }
.textmetalic span:nth-child(3) { animation-delay:0.4s; }
.textmetalic span:nth-child(4) { animation-delay:0.6s; }
.textmetalic span:nth-child(5) { animation-delay:0.8s; }
.textmetalic span:nth-child(6) { animation-delay:1s; }
.textmetalic span:nth-child(7) { animation-delay:1.2s; }
Ini kode HTML untuk Membuat Text Animations
<div class="textmetalic">
<span>m</span> <span>a</span> <span>s</span> <span>-</span> <span>a</span> <span>n</span> <span>d</span> <span>e</span> <span>s</span> <span>.</span> <span>b</span> <span>l</span> <span>o</span> <span>g</span> <span>s</span> <span>p</span> <span>o</span> <span>t</span> <span>.</span> <span>c</span> <span>o</span> <span>m</span>
</div>
Hasilnya seperti dibawah ini
m a s - a n d e s . b l o g s p o t . c o m

Yang ini untuk membuat teks agar bisa bergerak.
Ini kode CSS untuk Membuat Text Animations
@yellow: #ebb221;
@shadow-for-yellow: #F35747;
@blue: #90f0d2;
@shadow-for-blue: #3988a6;
.textsway { color: #fff; font-size: 20px; width: 320px; margin: 10px auto; text-align: center; }
.bigger {
display: block; margin-bottom: .25em; font-size: 30px; color: @yellow; text-shadow: 1px  1px  0 fade(@shadow-for-yellow, 100%), 2px  2px  0 fade(@shadow-for-yellow, 90%), 3px  3px  0 fade(@shadow-for-yellow, 80%), 4px  4px  0 fade(@shadow-for-yellow, 70%), 5px  5px  0 fade(@shadow-for-yellow, 60%), 6px  6px  0 fade(@shadow-for-yellow, 50%), 7px  7px  0 fade(@shadow-for-yellow, 40%), 8px  8px  0 fade(@shadow-for-yellow, 30%), 9px  9px  0 fade(@shadow-for-yellow, 20%), 10px 10px 0 fade(@shadow-for-yellow, 10%); animation: jumptext 1s steps(8, start) infinite; transition: all .2s ease;
&:hover { animation: none; letter-spacing: normal; }
}
.regular { display: block; }
.regular + .regular { animation-delay: .5s; }
.buzz {
display: inline-block; text-shadow: 2px 0 0 fade(#fff, 30%), -2px 0 0 fade(#fff, 30%); animation: buzz .04s linear infinite alternate; transition: all .2s ease;
&:hover { animation: none; text-shadow: none; }
}
@keyframes jumptext {
0% { transform: rotate(-5deg); letter-spacing: normal; }
50% { transform: rotate(5deg); color: @blue; letter-spacing: 0.1em; text-shadow: 1px  1px  0 fade(@shadow-for-blue, 100%), 2px  2px  0 fade(@shadow-for-blue, 80%), 3px  3px  0 fade(@shadow-for-blue, 60%), 4px  4px  0 fade(@shadow-for-blue, 40%), 5px  5px  0 fade(@shadow-for-blue, 20%); }
100% { transform: rotate(-5deg); color: @yellow; letter-spacing: normal; }
}
@keyframes text-flasher {
0%   {  }
50%  { text-shadow: 0 0 2px #000, 0 0 70px fade(#fff, 50%); }
60%  { text-shadow: 0 0 2px #000, 0 0 10px fade(#fff, 50%); }
100% { text-shadow: 0 0 2px #000, 0 0 70px fade(#fff, 50%); }
}
@keyframes buzz {
0%   { transform: translateX(-1px); }
100% { transform: translateX(1px); }
}
Ini kode HTML untuk Membuat Text Animations
<div class="textsway">
<span class="bigger">mas-andes.blogspot.com</span>
<span class="buzz">Portal Blogger Tutorial</span>
</div>
Hasilnya seperti dibawah ini
mas-andes.blogspot.com Portal Blogger Tutorial

Sedikit mengambil contoh dari yang pertama, misalkan saja ingin di fungsikan pada button dengan menggunakan CSS transition untuk membuat efek hover. Berikut contoh sederhananya:
Ini kode CSS untuk Membuat Button Animations
@keyframes glow {
0% { box-shadow: 0 0 16px rgba(66, 140, 240, 0.5); border-color: rgba(0,0,255,0.5); }
100% { box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0); border-color: rgba(0,0,255,1.0); }
}
#animasibutton { width:100px; margin:10px auto; }
#animasibutton button { width: 100px; padding: 5px; background: #cde; border: 2px solid #ccc; border-color: rgba(0,0,255,0.5); font-size:18px; color: #000; text-shadow: rgba(20, 20, 20, 0.5) 1px 1px 5px; text-align: center; box-shadow: 0 0 16px rgba(66, 140, 240, 0.5); }
#animasibutton button:hover, #animasibutton button.hover_effect  { background-color:#cce; animation-name: glow; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; }
Ini kode HTML untuk Membuat Button Animations
<div class="animasibutton">
<button> Button </button>
</div>
Hasilnya seperti dibawah ini

Memang masih sedikit terbatas jika hanya menggunakan fungsi CSS untuk membuat text animations. Jika ingin lebih banyak efek yang digunakan kita bisa memaksimalkannya lagi dengan tambahan jQuery.

Berlangganan artikel via email

97 Response to "Cara Membuat Text Animations Dengan CSS"

hihihi.. padahal kalo tau kodenya pasti bisa yah mas, mantap mas Andes :)

Balas

keren diberikan banyak jenis kode. ^^

Balas

keren aja si abang yang satu ni ....

Balas

Lumayan banyak juga ya mas kode css nya untuk membuat animasi ini. Tapi kalau untuk pasang aja sepertinya lebih mudah ya mas dari pada membuatnya hehehe :D
Selama ini saya hanya bisa pasang aja nich, soalnya nggak mudeng css hehe ^^

Balas

Teks nya kelab-kelob yah Mas? asyik euy bisa nambah
Hiasan di blog jadi anggun dan Cantik Mas, sukses deh Mas Andes

Balas

Betul Mas KT, sangat menarik artikel Mas Andes ini
O, ya Mas ini hanya demo yah? tutorial pemasangany
Gak ada Mas, ?

Balas

banyak banget ya mas kodenya, tapi hasil akhirnya bagus ^^

Balas

Ternyata Blog juga bisa Membuat Text Animations ya.. nggak kalah sama photoshop :)

Balas

hohoho makin keren wae kang tipsnya...semacam text hover shadow ya mas hasilnya

Balas

kunjungan malam mas, keren tips nya mas, patut untuk di coba ni

Balas

wah keren banget yah mas teksnya bisa diberi efek jadi kelihatan lebih indah, kapan-kapan saya coba ah...

Balas

iya mbak gampang banget yah masangnya kalau bikinnya sih pasti bikin pusing deh :)

Balas

wah kalau jadi cantik entar banyak yang naksir donk mas hehe...

Balas

Tapi kalau sudah pakar dalam css dan html seperti nya sangat mudah mas untuk membuat seperti ini. Hehehe :D

Balas

Teks nya kelap-kelip kayak lampu resepsi ya mas hehe :D

Balas

Janga dilihat kode nya mbak, tapi dilihat hasilnya. Pasti nggak pusing hehehe :D

Balas

Taks ini sangat cocok untuk menghias blog kita agar lebih elegance ya mas. Jadi ada seni tesembunyi dari teks ini ^^

Balas

animasi css ini mempengaruhi berat loading blog kita ga kang?

Balas

Bagus banget nih supaya pengunjung betah dengan tulisan-tulisan animasi yang bagus :)

Balas

Kayanya engga kang. Itu hanya teks biasa cuman di perbagus dengan CSS aja :)

Balas

mungkin juga yah mbak, soalnya saya nggak ngerti sama sekali css jadi pasti bikin pusing hehe...

Balas

betul mbak bikin blognya jadi terlihat lebih cantik yah :)

Balas

kalau hasilnya pasti memuaskan banget deh, nggak bakalan nyesel :)

Balas

jadi tambah menarik pastinya, sip deh :)

Balas

oh ternyata bisa bikin animasi pake css ya gan, thx infonya


berkunjung balik ke blog Bayu Setiawan ya, thx :)

Balas

Tapi kalau blog nya cowok dan di pasang text animations ini bukan jadi lebih cantik mas, tapi lebih cakep hehe :)

Mas Andes memang jago banget kalau soal tata rias blog. Luar biasa :)

Balas

kalo warna nya gak mau putih bisa ga

Balas

keren euy efek animasi textnya

Balas

gila keren jg tuh mas...! makasih ya.., kapan aq coba main2 *smile

Balas

Posting nya jadi lebih interaktif dan menarik ya mas dengan adanya teks animasi ini, sehingga bisa membuat pengnjung menjadi betah berlama-lama di blog kita. Nyoba nya kapan-kapan aja ya mas hehe ^^

Balas

ntar tak sampein...yg punya blog lagi kondangan

Balas

Menarik effects text animations ini Mas Andes, jika di kombinasikan
dengan effect gambar seperti di postingan saya, tentu lebih menarik yah Mas?

Balas

Jadi tambah menawan Teks yang biasa bisa jadi anggun
Bisa terpikat saya, jadi gimanaaaa gitu hkhkhk :D
Kemana yah yang punya Rumah, kagak nongol nongol ni?

Balas

wah pergi kondangan nggak ngajak-ngajak nih mas Andes hehe...

Balas

kaya lagunya kus plus nih mbak Ririn hehe...

Balas

wah pasti menarik hati mas Karysta hehe...

Balas

wah asik nih mau sayah praktekan ya mas...

Balas

betul tuh sayah berkunjung kesinih pas lihat tulisan goyang - goyang ... eh jadi ketiduran, habis deh pulsa modem sayah ehehehe

Balas

cocok nih mas, gak usah utak atik daleman blog... kalau utak atik daleman sayah nyerah deh... Yang untuk membuat artikel terkait juga baru tadi terpasangnya, dah berapa minggu coba dari mas Andes buat postingan tentang artikel terkait eheheheh....

Balas

Bisa - bisa banyak yang nyawer deh heheheh

Balas

siapa yang gila mas? hehehehe

Balas

silahkan dipilih... dipilih... dipilih hehehe

Balas

bisa mbak, tinggal ganti saja kode warnanya... pakai hitam siapa takut hehehe

Balas

kalau gak tau malah nyasar, salah alamat kang... heiheihei

Balas

wah asyik kalau bisa dapat berkat ya mas hehe ;D

Balas

wah mang yono malah nginep nich di rumah nya mas andes wkwkwkwk :D

Balas

wah berarti harus bekerja sama mas biar bisa kombinasi antara animasi gambar dan animasi teks. Kira-kira hasil nya gimana ya? jadi nggak kebayang deh :)

Balas

artikel terkait pasti dengan artikel ya mang, dan posting terkait pasti dengan postiing juga ya mang hhehe :D

Balas

Mampir sini lagi ah hehe

Balas

paling nanti dibawaain semangka 1 iris mbak, tapi lumayahlah daripada nggak dapet yah hehe...

Balas

kesirep sama tulisannya mas Andes yang goyang-goyang nih kayaknya hehe...

Balas

saya juga belum tahu hasilnya, tapi kayaknya keren juga sih :)

Balas

asal jangan salah kait aja nih hehe...

Balas

sayah juga malah pusing Mbak maste, Mas Maste... mendingan suruh bawa cangkul dah ke sawah ...

Balas

jadi pengen coba praktek sayah

Balas

iya master - master... untungnya cepet di acc permintaan pulsa sayah ke kantor, jadi bisa bangun deh heheheh

Balas

efeknya sampai bisa goyang naik turun ini..wow keren...hmm tapi lagi2 css...aku benar2 harus mencoba belajar css kalo demikian.... :-)

Balas

Iya jangan dipikirin mas. Mending langsung eksekusi biar cepet paham hehehe :D

Balas

Yang punya rumah sepertinya sedang ikut slametan mas. Hehehe lumayan kalau dapat berkat mas ^^

Balas

Kalau nggak dapat ya malah nanti gigit jari mas wkwkwk :D

Balas

Kalau sudah bangun getu, harus cuci muka dulu mang. Biar nggak kelihatan habis tidur wkwkwk :D

Balas

Mungkin bisa jadi penemuan baru mas. Luar biasa. Bisa dapet rekor muri dunk ^^

Balas

Kalau kait mengkait memang jagonya master mamang yono nih :)

Balas

Kreatif juga nih admin
Keren dah

Balas

gila!, sumpah keren banget mas...! *komen lebay heheh..


Balas

kalau denger di eksekusi pikirannya jadi merinding mbak hehe...

Balas

ayo mang dipraktekkin biar tahu hasilnya hehe...

Balas

iya mamang sih udah master soal ginian haha...

Balas

saya bantu doa deh biar dapet rekor muri mbak hehe...

Balas

kalau nanti ngantuk tidur lagi aja mang hehe...

Balas

sakit donk kalau sampe gigit jari haha...

Balas

Wkwkwkwkwk mas anthonie kayaknya kebanyakan nonton sinetron dech hehehehe :D

Balas

Iya monggo dicoba-coba biar lebih keren lagi blog nya. Kalau dilihat aja ya nggak bisa bisa cara membuat animasi teks ini :)

Balas

Nanti saya yang cari sponsor mas, biar tambah rame rekor muri nya hehehe :D

Balas

Hadir kembali mas andes. Meriah sekali ya kalau posting blog dipasang animasi teks ini. Salam hormat mas andes. Saya ikut belajar disini ya :D

Balas

Mending gigit yg lain aja daripada jari yg jadi sasaran wkwkwk

Balas

Sebelum menuju tempat tidur mampir lagi disini :)

Balas

bukan sinetron mbak tapi film action hehe...

Balas

iya nih mas Andes udah lama nggak keliatan, lagi sibuk kali yah hehe...

Balas

betul juga yah mbak kapan-kapan saya coba deh...

Balas

silahkan mbak Ririn belajar yang rajin yah biar dapet seratus hehe...

Balas

JIahhh keren abissssssss..... ntar pamer di blog sendiri akh, wkwkwkw

Balas

mas andes dilawan..top banget deh pokoknya, ahli banget

Balas

Padahal pengen bilang suka nonton FTV hehehe :D

Balas

Mungkin sedang singgah di blog yang satunya mas. Lihat yang seger-seger :D

Balas

Gigit buah Naga sepertinya seger mas :D

Balas

Biar naek kelas dan dapet ranking satu ya mas :D

Balas

mantap gan :D jgn lupa mampir ke

Andrekocak Blog

Balas

mungkin juga mbak, soalnya kalau liat kode-kode CSS terus bikin kepalanya mas Andes ngebul, kalau yang satunya kan bikin adem hehe...

Balas

seger dan menyehatkan yah mbak :)

Balas

Kaya nya Mas Andes nya lagi nyiptain sesuatu deh mungkin
Lagi Meditasi, agar lebih konsentrasi, dan nanti hasilnya
Kejutan buat sobat blogging semua, jadi sabar aja Sob :)

Balas

Datang lagi saya Mas Andes kembali mempelajari cara membuat teks dengan CSS
Yang tempo hari gak kelar, karena mata keburu semaput, simak lagi Mas terima ksh

Balas

wah, lama ga mampir, postingannya semakin bagus sob...
sangat membantu newbie seperti saya dalam nge blog...
bertamu ke tempat saya ya sob, sudah lama tidak saling silaturrahmi... :)

Balas

Info yang bagus :)

Salam kenal!!
Blogwalking Gan!!

Silahkan kunjungi dan pilih2 buku berkualitas di : www.honbookstore.com
Dapatkan diskon gede2an hingga 15%. :D

Jangan lupa silahkan tinggalkan jejak alias komen di : Hon Book Store :)

Balas

Ternyata CSS juga bisa dikreasikan jadi animasi ya,nanti saya coba terapkan di blog saya mas.Sangat menarik dan tentunya bisa memperindah tampilan blog kita.
Follow back ya mas Andes

Balas

keren banget gan. hebat .
semoga sukses selalu..

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Cara Membuat Text Animations Dengan CSS" ini bermanfaat, share ke jejaring sosial.
Konversi Kode