Selasa, 06 Juni 2017

Belajar Cara Membuat Text Shadow Pada css

         Assalamualaikum Wr. Wb. Hallo selamat pagi sahabat lupacode semuanya dimanapun sekarang kalian sedang berada, gimana kabar kalian hari ini baik – baik saja bukan ? semoga kita semua selalu berada didalam lindungan allah swt. Masih bersama saya dengan admin dari web lupacode yang akan selalu memberikna materi – materi atau tutorial mengenai web desain kepada sahabat semua yang sedang ingin belajar menjadi seorang web desainer, mari kita bersama – sama belajar sedikit demi sedikit materi – materi yang harus kita pelajari..
        Pada materi sebelumnya kita sudah belajar membuat sebuah Box Shadow pada css3 dimana pada materi tersebut saya membagi menjadi dua bagian, jadi silahkan bagi sahabat – sahabat semuanya yang ketinggalan materi tutorial yang kemarin kalian dapat mempelajari nya terlebih dahulu sebelum mempelajari materi Text-Shadow yang akan saya bahas pada materi kali ini. Sahabat dapat langsung masuk kedalam halaman Daftar isi pada blog web desain ini untuk melihat seluruh materi yang telah kita pelajari sebelumnya. Jadi silahkan dipelajari dari mulai materi dasar terlebih dahulu agar sahabat semua tidak akan bingung nantinya.
Cara membuat Text Shadow pada css3

Cara membuat Text Shadow pada css

       Pada kesempatan kali ini saya akan berbagi materi yang baru kepada sahabat web desain semua yaitu Cara membuat TextShadow pada css3 dimana materi ini jangan sampai terlewatkan oleh sahabat semua yang sedang mempelajari bahasa pemrograman khususnya pada web desain. Property yang akan kita pelajari kali ini sangat mirip banget dengan proeprty yang telah kita pelajari sebelumnya yaitu pada property Box Shadow bahkan property ini lebih simpel untuk cara penggunaanya sekalipun. Dari namanya juga sudah bisa kalian lihat ini fungsinya untuk memberikan bayangan pada text. Value yang bisa kita berikan pada text sahadow ini ada empat, yaitu :
Value Text Shadow pada css3
       Dapat kalian lihat pada gambar diatas bahwa value yang kita bisa berikan kepada property text shadow ini yaitu ada <x-offset> <y-offset> <blur> dan <color> yah dan ini sama seperti pada box shadow yang telah kita bahas pada materi sebelumnya dan text shadow ini lebih simpel karna dia gak punya value lain seperti gambar dibawah ini !
Value text shadow - Web Desain
       Pada box shadow kita bisa gunakan inset dan spread, namun pada text shadow ini hanya empat value diatas saja, jadi kalau kalian yang telah mempelajari materi pada web desain yang sebelumnya pastinya sekarang kalian sdah tau mengenai fungsi dari property-property diatas. jadi ada baiknya silahkan kalian mempelajari dulu materi Box Shadow yang telah saya bahas untuk mempelajari nya terlebih dahulu bila kalian lupa. .
       Oke kalau begitu sekarang kita akan coba saja langsung bagaimana untuk cara pakainya property text shadow yang akan kita pelajari saat ini. Seperti biasa untuk dapat memudahkan sahabat semua dalam mempelajari materi – materi yang saya bahas, saya akan mencotohkan nya secara langsung akan sahabat semua juga langsung bisa mengikuti materi yang saya bahas, saya sudah menyiapkan sebuah text html sederhana dimana syntax dari file html nya adalah sebagai berikut :
<!DOCTYPE html>
<html>
<head>
 <title>Membuat Text Shadow</title>
 <style>
  h1{
   font-size: 100px;
   font-family: arial;
   text-align: center;
  }
 </style>
</head>
<body>
<h1>Web Desain</h1>
</body>
</html>

Sekarang kita akan coba lihat dulu hasil dari syntax diatas adalah seperti ini
Contoh text shadow pada css3
      Nah kalian bisa lihat seperti itu hasilnya, sekarang bagaimana jika kita ingin ngasih bayangan pada text diatas ? gampang banget yah, kita tinggal kasih property nya Text-shadow : lalu ingat value nya yang pertama itu x-offset yaitu untuk menggeser bayangannya secara horizontal lalu value ke-dua y-offset untuk menggeser bayangannya secara vertikal. Jadi misalkan saya kasih property text-shadow nya seperti ini
h1{
   font-size: 100px;
   font-family: arial;
   text-align: center;
   text-shadow: 5px 5px 10px green;
  }

Sekarang kita lihat hasilnya setelah saya tambahkan text-shadow: 5px 5px 10px green; menjadi seperti ini
Contoh text shadow pada css3
       Jadi sekarang bayanganya ada disebelah kanan bawah 5px lalu ukuran blur nya sebesar 10px ya jadi gampang banget yah sama seperti box shadow untuk cara penggunaanya. Kemudian sama seperti Box-Shadow bahwa pada text-shadow kita juga bisa memberi dia lebih dari satu bayangan yah atau multiple shadow, maka kita tinggal mengasihkan koma saja setelah value ke – empat atau value terakhir dari property text-shadow diatas, text-shadow: 5px 5px 10px green, ; kemudian saya bisa tulis text-shadow: 5px 5px 10px green, -5px –px 10px red; sekarang kita lihat hasilnya
value dua gradasi pada text shadow css3
        Sekarang kita lihat bayangannya ada dua ada dikiri atas dan ada dikanan bawah, ya begitu untuk cara penggunaan text-shadow sangatlah simpel banget tinggal kalian sekarang main-main dengan value nya supaya menghasilkan efek yang bagus yah, contohnya salah satu efek yang sering dipakai itu kita membuat Text nya seolah – olah 3 dimensi misalnya yah,
      Contohnya begini saya ganti dulu warna tulisan nya menjadi putih misalnya, Color: white; kemudian untuk text-shadow nya saya kasih seperti ini, x-offsetnya saya kasih 0 jadi ga bergerak kekiri atau kekanan lalu y-offset nya saya buat turun sebanya 2px dan untuk blurnya saya kasih kecil aja 1px dan warnanya saya kasih black saJa misalnya, jadi seperti ini text-shadow: 0 2px 1px black; sekarang kita lihat hasilnya sekarang
Text 3 dimensi pada text shadow css3
        Nah ini akan menghasilkan seolah – olah textnya 3 dimensi yah, dan sebetulnya banyak efek yang bisa kalian kasih pad text-shadow ini, dan terlihat tulisannya menjadi semakin menarik yah, jadi silahkan kalian berkeksperimen sendiri untuk mencoba – coba dan silahkan kalian gunakan kreatifitas kalian sendiri sehingga text nya bisa menjadi lebih menarik lagi dilihatnya
       Baiklah mungkin itu saja dulu untuk pembahasan mengenai property dari Text-shadow ini, silahkan temen-temen pelajari kembali dan silahkan sahabt semua sharer artikel ini jika ini bermanfaat bagi sahabat yang lainnya. Baiklah untuk materi selanjutnya kita masih tetap pada seri css3 yaitu saya akan membahas mengenai Linier Gradient pada pembahasan materi berikutnya. Jadi jangan sampai ketinggalan yah untuk mempelajari materi-materi terbaru yang akan web desain bagikan kepada temen-temen semua..
     Baiklah sampai disini dulu untuk pembahasan materi kali ini, sampai jumpa kembali didalam pembahasan materi selanjutnya, saya admin dari blog lupacode undur diri

Terimakasih
Wassalamualaikum Wr. Wb

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon