box

css model box

Bagi kita pengelola website tentu saja sudah tidak asing lagi dengan yang namanya css. namun terkadang kita ingin membuat sebuah style box atau elemen dengan bermacam macam warna tetapi kita harus membuat script sendiri untk setiap elemen tersebut. Disini akan kita bahas bahagaimana kita membuat 1 nama class tetapi dengan berbagai warna, untuk pembuatannyapun cukup mudah dan sederhana, bagi yang belum menggunakan bisa mencoba script css ini untuk menambah tampilan pada website kalian. untuk pertama kita buat terlebih daulu bentuk boxnya yaitu kita akan membuat elemen div terlebih dahulu dengan css .mybox{height:200px;boreder:1px solid; margin:5px;padding:10px;} ini script untuk bentuk dari box yang akan kita tampilkan dengan bentuk kotak kosong hanya dengan border saja. sedangkan untuk menampilkan elemen mybox tersebut kita cukup memanggil dengan text dalam box kemudian kita akan memberikan warnanya dengan membuat class untuk memanggil warna backgroundnya. .bg-red{background:red; color:white;} .bg-green{background:green; color:white;} .bg-blue{background:blue; color:white;} .bg-yellow{background:yellow; color:white;} .bg-orenge{background:orange; color:white;} Kemudian div yang tadi kita berikan 2 class agar memiliki warna untuk backgroundnya. < div class="mybox bg-red">class mybox bg-red< /div> < div class="mybox bg-green">class mybox bg-green< /div> < div class="mybox bg-blue">class mybox bg-blue< /div> < div class="mybox bg-orange">class mybox bg-orange< /div> maka disini kita membuat 1 class yaitu mybox dengan menggunakan beberapa background color yaitu dengan memanggil class bg-namawarna. Semoga bermanfaat.

CSSDasar

MENU WEBSITE, FLOATING MENU CSS HTML

menu website

Untuk sebagian besar pecinta blog atau website tampilan website baik mlai dari layout, warna dan menu - menu tentu saja menjadi perhatian utama, selain dari isi kontent yang di tawarkan style dalam sebuah website juga menjadi bagian utama untuk membuat visitor nyaman dan betah berlama - lama di dalam website kita. banyak yang perlu diterapkan untuk bisa memenuhi semua keinginan terutama dalam membuat tampilan website kita menjadi menarik dan nyman bagi pengunjung, salah satunya dengan membuat style menggunakan css.lalu kita coba ingin membuat sebuah menu yang sesuai dengan website kita, kali ini akan saya bagikan cara membuat sebuah floating menu fixed, yaitu kita akan membuat menu dimana menu ini akan selalu berada di atas atau di bawah pada layar.secara umum kita akan menerapkan yaitu perintah position:fixed; untuk membuat menu tersebut akan tetap pada posisinya meskipun di scroll keatas maupun ke bawah, dengan adanya perintah fixed artinya dia tidak akan terpengaruh dalam keadaan apapun oleh kondisi di dalam website tersebut.untuk script simplenya adalah .responsip{position:fixed;bottom:0;left:0;height:60px;background:#eeeeee;width:100%;} .responsip>.menu{width:25%;float:left;text-align:center;padding:10px;height:100%;border:2px solid #dddddd;} disini nama class utamanya adlah .responsip itu bisa di ganti sesuai keinginan kita, maka untuk penggunaannya adalah untuk class kedua yaitu menu yang akan kita tampilkan atau list menu utaman, disitu terlihat angka 25% yang artinya akan ada 4 menu utama yang akan kita terapkan, jika ingin membuat 5 mrnu bisa kita ubah menjadi 20% artinya 100 di bagi 20. untuk penerapannya jika digabungkan menu1 menu2 menu3 menu4 secara umum tag div adalah displaynya block, maka pada class .menu kita beri perintah floaf:left yang artinya akan di dorong kekiri dan tidak lagi menyusun ke bawah melainkan sejajar menyamping, untuk script lingkapnya .responsip{position:fixed;bottom:0;left:0;height:60px;background:#eeeeee;width:100%;} .responsip>.menu{width:25%;float:left;text-align:center;padding:10px;height:100%;border:2px solid #dddddd;} menu1 menu2 menu3 menu4 ini merupakan tampilan floting menu secara umum, akan kurang menarik jika tampilan ini di terapkan pada desktop, tampilan ini terlihat menarik jika di terakan pada phonecell atau tablet, maka kita butuh membuat css untuk responsipnya, silahkan buka tentang membuat css responsip.

animasi

CSS ANIMATION, CSS LOADING ANIMATION

animasi css itu mudah

.loading{width:30px;height:30px;border:3px solid:rgba(100,100,100,0.2); border-top-color:blue;} .loading::after{content:" ";} lalu kita tambahkan border radiusnya agarmenjadi bulat .loading{width:30px;height:30px;border:3px solid:rgba(100,100,100,0.2); border-top-color:blue;border-radius:50%;} .loading::after{content:" ";} lalu kita akam mencoba memberikan efek agar berputar .loading{width:30px;height:30px;border:3px solid:rgba(100,100,100,0.2); border-top-color:blue;border-radius:50%; -webkit-animation: putar 2s linear infinite;animation: putar 2s linear infinite;} .loading::after{content:" ";} -webkit-animation: putar 2s linear infinite;animation: putar 2s linear infinite; ini berfungsi mengatur kecepatan putar dari animasi tersebut pada 2s kita bisa merubah sesuai keinginan kita itu merupakan bahan utama untuk style atau bentuk dar animasi loadingnya; sebelum melanjutkan kita perhatikan pada border-top-color:blue itu sebagau pembeda agara pada saat berputar nanti terlihat bergerak dengan adanya warna border yang berbeda. langkah terakhir adalah kita membuat scrip untuk membuat bergerak. pada script ini kita kita akan memanggil nama animasinya yaitu putar 2s linear infinite putar inilah yang akan kita panggil untuk di jalankan sebenarnya rata rata orang menggunakan nama spin tapi jika kita bisa membuatnya maka bebas apapun namanya asalkan kita bisa menerapkannya. OK lanjut membuat perintah animasinya Yang terakhir adalah @keyframes putar { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ini merupakan perintah untuk memutar putar tadi dengan dimulai dari 0% { transform: rotate(0deg); menuju 100% { transform: rotate(0deg); yang artinya akan berputar dari 0 derajat menuju 360 derajat dalam waktu 2 detik 2s untuk script penuhnya adalah Animasi loading buatanku .loading{width:30px;height:30px;border:3px solid:rgba(100,100,100,0.2); border-top-color:blue;border-radius:50%; -webkit-animation: putar 2s linear infinite;animation: putar 2s linear infinite;} .loading::after{content:" ";} @keyframes putar { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } animasi loading lalu save dengan namafile.html lalu jalankan filenya melalui brorser kalian

CARA RISET KEYWORD GOOGLE, MENGGUNAKAN KEYWORD TOOLS GRATIS
LINK BUILDING STRATEGY, SEO LINK BUILDING UNTUK WEBSITE

Galeri