5 Trik Yang Harus Dikuasai Desainer Untuk Dapat Bekerja Pada Sebuah Perusahaan

Pada kesempatan kali ini Point Website akan membahas beberapa property yang sering digunakan oleh seorang desainer web. Untuk menjadi Seorang Desainer profesional yang dapat bekerja dalam sebuah perusahaan, ada banyak hal yang harus dikuasai oleh seorang desainer tersebut, diatara nya adalah penggunaan property-property dibawah ini dalam mendesain sebuah website.

Efek Gradien

Efek Gradient atau gradasi warna linear adalah 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 dapat terjadi secara vertical atau horizontal. Adapun property untuk Gradian ini adalah Linear Gradient, Radial Gradient, Repeating Linear Gradient dan Repeating Radial Gradient.

Box Shadow

Box Shadow sering digunakan untuk menampilkan bayangan pada elemen level-blok ( seperti div). Dalam CSS menggunakan properti box-shadow menempel satu atau lebih bayangan yang muncul pada sebuah box. struktur code pada box-shadow adalah 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 adalah sebuah property untuk menampilkan animasi saat adanya perubahan visual pada suatu element html, kode transitionnya berfungsi sebagai pembuat animasi, dengan menggunakan transition maka hasil dari sebuah perubahan akan seperti layaknya animasi

Google Fonts

Google Fonts adalah sebuah situs yang menyediakan banyak font yang dapat digunakan oleh teman-teman yang ingin membuat website, google font menyediakan banyak pernak-pernik tulisan yang beragam, teman-teman dapat dengan mudah menggunakan tulisan tersebut.

Vertical-align

Vertical-align adalah Salah satu property dalam kode css yang berfungsi mengatur penempatan teks secara vertical di sebelah kanan atau kiri sebuah gambar. Property vertical-align berlaku pada elemen gambar dan digunakan bersama teks, beberapa posisi penempatan dan pengaturannya dapat dilakukan melalui nilai (value) yang sudah ditentukan.

Untuk lebih mudah dipahami mari kita buatkan sebuah contoh 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="logo">
 <div class="selogan">
  <b>5 trik harus yang dikuasai desainer</b>
 </div>
</header>

<div class="content">
 <h1>Point Website</h1>
 <img src="gambar.png" alt="gambar">
 <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 seperti gambar dibawah ini.

Coba teman-teman perhatikan pada code diatas pada bawah <title> terdapat code <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> adalah cara menghubungkan font dari google font secara online atau sering disebut link external, kemudian pada code font-family: 'Roboto', sans-serif; code ini digunakan untuk memanggil font yang sudah kita hubungkan dengan external link tersebut dan code <img class="logo" src="aslilogo.png" alt="logo"> dan <img src="gambar.png" alt="gambar"> adalah 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, semoga dapat membantu teman-teman dalam membuat dan mempelajari website.