Hai, jumpa lagi dengan saya 🙂 apa kabarnya ? semoga sehat yah, amin.
Pada artikel kali ini saya akan menjelaskan bagaimana cara Membuat Animasi Teks Bayangan (Text-Shadow) Dengan HTML-CSS3, seperti apa cara membuat nya, yuk simak langkah nya berikut ini.
1. Silahkan buka teks editor nya terlebih dahulu, kemudian ketikan kode HTML berikut.
1 |
<h1 data-shadow='Dumetschool'>Dumetschool</h1> |
2. Selanjutnya ketikan kode CSS3 berikut ini untuk animasi bayangan teks.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
@import url(http://fonts.googleapis.com/css?family=Righteous); *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; position: relative; } html, body { height: 100%; } body { text-align: center; background-color: hsla(213, 100%, 50%, 1); } body:before { content: ''; display: inline-block; vertical-align: middle; font-size: 0; height: 100%; } h1 { display: inline-block; color: white; font-family: 'Righteous', serif; font-size: 12em; text-shadow: .03em .03em 0 hsla(28, 100%, 50%, 1); } h1:after { content: attr(data-shadow); position: absolute; top: .06em; left: .06em; z-index: -1; text-shadow: none; background-image: linear-gradient( 45deg, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0 ); background-size: .05em .05em; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shad-anim 15s linear infinite; } @keyframes shad-anim { 0% {background-position: 0 0} 0% {background-position: 100% -100%} } |
3. Kalo sudah jangan lupa disimpan, kemudian jalankan di browsernya masing-masing dan lihat hasilnya. Selesai
Bagus yah ? silahkan kembangkan lagi.
sampai disini artikel mengenai bagaimana cara Membuat Animasi Teks Bayangan (Text-Shadow) Dengan HTML-CSS3, semoga bermanfaat, amin.
Selamat mencoba.