Pada kesempatan kali ini akan membahas beberapa property yang sering dipakai oleh seorang desainer web. Untuk menjadi Seorang Desainer profesional yang sanggup bekerja dalam sebuah perusahaan, ada banyak hal yang harus dikuasai oleh seorang desainer tersebut, diatara nya ialah penggunaan property-property dibawah ini dalam mendesain sebuah website.
Efek Gradien
Efek Gradient atau gradasi warna linear ialah sebuah visual effect yang dihasilkan oleh perubahan dan bergeseran warna atau dengan kata lain sering disebut (gradasi) yang terjadi diatara beberapa warna. Arah dari perubahan warna tersebut sanggup terjadi secara vertical atau horizontal. Adapun property untuk Gradian ini ialah Linear Gradient, Radial Gradient, Repeating Linear Gradient dan Repeating Radial Gradient.
Box Shadow
Box Shadow sering dipakai untuk menampilkan bayangan pada elemen level-blok ( menyerupai div). Dalam CSS memakai properti box-shadow melekat satu atau lebih bayangan yang muncul pada sebuah box. struktur code pada box-shadow ialah sebagai berikut, box-shadow:offset-X offset-Y Blur-Radius Color; penelisan code dalam css nya sebagai berikut box-shadow:10px 10px 5px black;
Transition
Transition ialah sebuah property untuk menampilkan animasi ketika adanya perubahan visual pada suatu element html, instruksi transitionnya berfungsi sebagai pembuat animasi, dengan memakai transition maka hasil dari sebuah perubahan akan menyerupai layaknya animasi
Google Fonts
Google Fonts ialah sebuah situs yang menyediakan banyak font yang sanggup dipakai oleh teman-teman yang ingin menciptakan website, google font menyediakan banyak pernak-pernik goresan pena yang beragam, teman-teman sanggup dengan gampang memakai goresan pena tersebut.
Vertical-align
Vertical-align ialah Salah satu property dalam instruksi css yang berfungsi mengatur penempatan teks secara vertical di sebelah kanan atau kiri sebuah gambar. Property vertical-align berlaku pada elemen gambar dan dipakai bersama teks, beberapa posisi penempatan dan pengaturannya sanggup dilakukan melalui nilai (value) yang sudah ditentukan.
Untuk lebih gampang dipahami mari kita buatkan sebuah teladan dari paparan yang sudah saya jelaskan diatas, silahkan teman-teman tuliskan code berikut ini dan simpan dengan nama file index.html.
<!DOCTYPE html> <html> <head> <title>5 trick Untuk Seorang Desainer</title> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <style type="text/css"> body { background-color: #eee; background: linear-gradient(#ffffff, #0e2329)fixed; margin: 0px; padding: 0px; } header { width: 800px; height: 160px; margin: 15px auto; padding: 10px; border-radius: 30px; box-shadow: 5px 5px 10px; background:#0F466E; background:-webkit-linear-gradient(right,#093a3a 0%,#35b1a0 75%); background:-moz-linear-gradient(right,#093a3a 0%,#35b1a0 75%); background:-o-linear-gradient(right,#093a3a 0%,#35b1a0 75%); background:-ms-linear-gradient(right,#093a3a 0%,#35b1a0 75%); } .content { width: 800px; height: 420px; margin: 20px auto; border-radius: 30px; padding: 10px; box-shadow: 5px 5px 10px; background:-webkit-linear-gradient(right,#093a3a 0%,#35b1a0 75%); background:-moz-linear-gradient(right,#093a3a 0%,#35b1a0 75%); background:-o-linear-gradient(right,#093a3a 0%,#35b1a0 75%); background:-ms-linear-gradient(right,#093a3a 0%,#35b1a0 75%); } .selogan b { font-family:'Roboto', sans-serif; color: #ffffff; text-transform: uppercase; letter-spacing: 4px; float: left; margin-left: 54px; font-size: 30px; padding-top: 10px; line-height: 82px; } .logo { float: left; margin: 10px 0px 0px 20px; } .content h1 { color: white; margin-left: 12px; } .content p { text-align: justify; font-family: 'Roboto', sans-serif; color: white; letter-spacing: 1px; } .content img { height: 180px; width: 700px; display: block; margin: auto; border-radius: 10px; } .button { float: right; background: #1c7171; border-radius: 5px; transition: 0.3s; box-shadow: 0px 3px 8px black; } .button a { padding: 5px; color: white; float: left; text-decoration: none; } .button:hover { background-color: #379c37; } </style> </head> <body> <header> <img class="logo" src="aslilogo.png" alt=" akan membahas beberapa property yang sering dipakai oleh seorang desainer web 5 Trik Yang Harus Dikuasai Desainer Untuk Dapat Bekerja Pada Sebuah Perusahaan"> <div class="selogan"> <b>5 trik harus yang dikuasai desainer</b> </div> </header> <div class="content"> <h1></h1> <img src="gambar.png" alt=" akan membahas beberapa property yang sering dipakai oleh seorang desainer web 5 Trik Yang Harus Dikuasai Desainer Untuk Dapat Bekerja Pada Sebuah Perusahaan"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="button"> <a href="#">Red more</a> </div> </div> </body> </html> Sebelum saya jelaskan code di atas, silahkan teman-teman jalankan file diatas pada web browser, maka hasil nya akan menyerupai gambar dibawah ini.
Coba teman-teman perhatikan pada code diatas pada bawah <title> terdapat code <link href=" -dengan-css.html" target="_blank">link external, kemudian pada code font-family: 'Roboto', sans-serif; code ini dipakai untuk memanggil font yang sudah kita hubungkan dengan external link tersebut dan code <img class="logo" src="aslilogo.png" alt=" akan membahas beberapa property yang sering dipakai oleh seorang desainer web 5 Trik Yang Harus Dikuasai Desainer Untuk Dapat Bekerja Pada Sebuah Perusahaan"> dan <img src="gambar.png" alt=" akan membahas beberapa property yang sering dipakai oleh seorang desainer web 5 Trik Yang Harus Dikuasai Desainer Untuk Dapat Bekerja Pada Sebuah Perusahaan"> ialah code untuk menampilkan gambar, silahkan teman-teman gantikan dengan code yang teman-teman miliki. Sekian tutorial tentang 5 Trik Yang Harus Dikuasai Desainer Untuk Dapat Bekerja Pada Sebuah Perusahaan, agar sanggup membantu teman-teman dalam menciptakan dan mempelajari website.
Sumber http://pointwebsite.blogspot.com/
No comments:
Post a Comment