Posts

Showing posts from July, 2020

Cara Membuat Efek Berubah Dengan CSS3 (Transition)

-
Tidak bosan-bosannya kita belajar css semoga kita bisa menjadi desainer web yang handal. Mau bagaimana pun cara belajar anda, belajarlah terus dan jangan pernah lelah. Semoga rasa lelah kita berbuah hasil.  Transisi diartikan sebagai peralihan atau perubahan dari keadaan. Seiring dengan bertambahnya kemampuan css sekarang ini semakin banyak yang bisa kita buat, salah satunya transisi yang membuat tampilan lebih hidup. Kenapa hidup ? karena tampilan bisa merespon user dengan perubahan seperti bentuknya dan lain-lain. Sederhananya transisi itu adalah cara membuat efek perubahan menggunakan css, dengan efek tersebut tampilan tampak hidup. #file html <!DOCTYPE html> <html> <head> <title>Transisi</title> <link rel="stylesheet" type="text/css" href="transisi.css"> </head> <body> <div class="box1&quo
Read more

Cara Membuat Efek Bayangan BOX menggunakan CSS3

-
Image
Tutuorial kali ini berbicara tentang box shadow salah satu properti yang ada di css3. Banyak skill yang harus dipelajari untuk membuat tampilan yang baik, salah satunya box-shadow. Masih seputar box, materi kali ini membahas cara membuat efek bayang pada box. Tujuannya untuk membuat box tersebut tampak nyata. Kita tau sebuah desain tanpa efek, adalah gambar dua dimensi yang kurang enak dilihat. Efek bayangan membuat benda tampak seperti nyata atau terlihat seperti tiga dimensi karena objek tiga dimensi biasanya memiliki bayangan. #file html <!DOCTYPE html> <html> <head> <title>Box Shadow</title> <link rel="stylesheet" type="text/css" href="box-shadow.css"> </head>
Read more

Cara Membuat Sudut Melengkung (border-radius) CSS3

-
Image
Pada tutorial css sebelumnya saya tidak pernah menyinggung versi css, css2 dan css3. Karena sebenarnya sama seperti  sofware lainnya, kenaikan versi intinya ada penambahan dan pembaharuan. Contohnya seperti PHP sekarang sudah versi 7 keatas, kalau kita bahas setiap versinya bisa menambah waktu untuk belajar. Bagian terpenting dari kenaikan versi yang harus kita tahu adalah ada tidaknya perubahan syntax atau penghapusan. Kalau tidak ada maka tidak ada masalah. Kabar baiknya kenaikan versi indentik dengan penambahan fitur dan sedikit sekali perubahan dan kalau berubah bisanya masih bisa berjalan dengan versi yang disesuaikan. Baik langsung saja kita bahas cara membuat sudut melengkung dengan css3. Sudut melengkung bisa dibuat dengan properti border-radius di css. Border radius ini termasuk properti baru yang dikenalkan di css versi 3. Jika anda hobi desain misalnya di photoshop, corel draw dan lain-lain, pasti kata radius tidak asing lagi. Misalnya kita mendesain sebuah tombo
Read more

Static Relative Absolute Fixed Position CSS

-
Image
Sekarang kita mulai mempelajari mengenai posisi dan cara mengaturnya menggunakan css. Secara default posisi elemen atau tampilan adalah static yaitu mengikuti alur html. Umumnya alur html ada dua arah yaitu ke kanan dan lalu ke bawah. Properti position ini dapat mengubah alur tampilan yang diatur html menjadi seperti yang kita butuhkan. Materi position ini masih berkaitan dengan materi tentang box atau kotak yaitu bagaimanan kita dapat mengatur posisinya baik mengikuti alur atau seperti yang kita butuhkan. Pada materi ini kita membahas empat posisi yang ada pada css di properti position. Static Static ini adalah tampilan default saat kita tidak mengatur posisinya. width dan height masih menjadi properi yang sangat penting disini. Relative Pada posisi relatif kita dapat menentukan (top atau bottom) atau (left atau right). width dan height masih menjadi properi yang sangat penting disini. Pada posisi relative box sudah bis
Read more

Cara Mengatur Style Border CSS

-
Image
Pada materi yang lau kita telah belajar bagaimana mewarnai background sebuah box dengan css. Selanjutnya kita akan belajar mengatur style border dari box tersebut. Jika kita ingat tentang shapes di aplikasi seperti word atau photoshop maka background bisa kita samakan dengan fill pada shapes dan border sebagai outline nya. Untuk tujuan desain halaman web tentu border sangat membantu membuat tampilan lebih manis. #file html <!DOCTYPE html> <html> <head> <title>Border</title> <link rel="stylesheet" type="text/css" href="border.css"> </head> <body> <div class="kotak"> Kotak 1 </div> <div class="kotak2"> Kotak 2 </div> <div class="
Read more

Float Left dan Right Menu menggunakan CSS

-
Image
Float sendiri artinya mengambang sehingga kita kan membahas bagaimana membuat tampilan halaman yang tadinya jatuh kebawah menjadi mengambang (mengapung). Ada banyak sekali tag html yang mempunyai sifat jatuh kebawah. tag p tag div tag img tag li dll Terkadang kita tidak bermaksud untuk membuat tampilan kebawah, kita ingin tampil kesamping. Nah solusinya kita harus menggunakan properti float di css. Umumnya tag div akan jatuh kebawah seperti ini. Mari kita ubah box kuning yang jatuh kebawah menjadi mengapung kiri dan kanan. #file html <!DOCTYPE html> <html> <head> <title>Float</title> <link rel="stylesheet" type="text/css" href="float.css"> </head> <body> <div class="kotak1"></div> <div class="kotak2"></div> <div class="kotak3"></div> <div class="kotak4"></div> </body> </html> #file css (float.css) .ko
Read more

Cara Mengatur Warna dan Format Teks dengan CSS

-
Image
Style teks memang tak ada habisnya dan menarik untuk dipelajari. Karena teks adalah komponen dari informasi yang ada dihalaman web yang sangat penting. Maka dari itu kita mencoba mencari tau apa saja yang bisa dilakukan style pada teks. Jika kita mengingat kebelakang tentang format font pada html maka hampir sama. Tapi pada html atribut-atribut font itu hanya ada di tag font <font> sehingga sangat repot. Dengan css kita diberikan kemudahan untuk melakukan itu. Pada tutorial kali ini kami akan melist format-format font yang sering digunakan. color properti color pada css langsung merujuk pada warna teks font-size untuk mengatur ukuran teks satuannya bisa px atau pt font-style untuk membuat font miring font-family untuk memilih jenis huruf, biasanya lebih dari satu agar browser memilih yang tersedia font-weight untuk membuat font tebal atau normal #file html <!DOCTYPE html> <html> <head> <title>Font</title> <link rel="stylesheet" typ
Read more