Langkah Mudah Membuat CSS Responsive, bagi anda yang sudah bergelut dengan website tentu tidak asing dengan CSS.
bagaimana cara untuk membuat CSS Responsive Web ? apa itu CSS ? apa itu Responsive.
Bagi anda yang baru saja ingin terjun menjadi creator web atau juga web developer, kalian wajib tau apaa itu CSS dan Responsive.
Kalian harus baca artikel ini sampai habis.
CSS ialah bahasa Cascading Style Sheet yang biasanya untuk mengatur tampilan elemen yang tertulis dalam bahasa markup,
seperti HTML.
CSS sendiri berfungsi untuk memisahkan konten dari tampilan visualnya di situs. Pencipta CSS adalah W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana.
Baca Juga : 5 Jurusan Kuliah yang banyak Dibutuhkan Tahun 2021 Mendatang!
Dalam pembahasan kali ini saya akan menjelaskan dan membuat css responsive web, css responsive image, css responsive typografy dan css responsive layout.
Page Contents
Langkah Membuat CSS
index.html
Sekarang kalian buka text editor kalian bisa menggunakan sublime, atom, dreamweaver atau visual code studio. Buatkan 1 folder baru dan buat file baru dengan nama indext.html, lalu tuliskan scrip berikut.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>StudyKuy</title> <link rel="stylesheet" href="stylesheet.css"> <link rel="stylesheet" href="responsive.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> </head> <body> <header> <div class="container"> <div class="header-left"> <h1>StudyKuy</h1> </div> <div class="header-right"> <a href="#">Pelajaran</a> <a href="#">Daftar</a> <a href="#" class="login">Log in</a> </div> </div> </header> <div class="top-wrapper"> <div class="container"> <h1>BELAJAR CODING.</h1> <h1>BELAJAR MENJADI LEBIH KREATIF.</h1> <p>Mari Belajar Bersama StudyKuy Kalian Akan Mendapatkan Ilmu Yang Bermanfaat</p> <p>Kami menawarkan lingkungan pemograman yang lengkap untuk mempermudah Anda memulai.</p> <div class="btn-wrapper"> <a href="#" class="btn signup">Daftar dengan Email</a> <p>atau</p> <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Daftar dengan Facebook</a> <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Daftar dengan Twitter</a> </div> </div> </div> <div class="lesson-wrapper"> <div class="container"> <div class="heading"> <h2>Mereka adalah seorang Mahasiswa dari Luar Negri</h2> </div> <div class="lessons"> <div class="lesson"> <div class="lesson-icon"> <img src="img/ui-danro.jpg"> </div> <p class="text-contents">Seorang Mahasiswa dari Belanda </p> </div> <div class="lesson"> <div class="lesson-icon"> <img src="img/ui-divya.jpg"> </div> <p class="text-contents">Seorang Mahasiswa dari Belgia</p> </div> <div class="lesson"> <div class="lesson-icon"> <img src="img/ui-sam.jpg"> </div> <p class="text-contents">Seorang Mahasiswa dari Bulgaria</p> </div> <div class="lesson"> <div class="lesson-icon"> <img src="img/ui-sherman.jpg"> </div> <p class="text-contents">Seorang Mahasiswa dari Jerman</p> </div> <div class="clear"></div> </div> </div> </div> <div class="message-wrapper"> <div class="container"> <div class="heading"> <h2>Apakah anda siap untuk menjadi programer yang handal?</h2> <h3>Ayo belajar coding, ayo belajar menjadi lebih kreatif!</h3> </div> <span class="btn message">Mulai Belajar</span> </div> </div> <footer> <div class="container"> <img src="img/home.png"> <p>Learn to code, learn to be creative.</p> </div> </footer> </body> </html> |
Script diatas merupakan tampilan dari responsive Websitenya. Jangan lupa untuk mengaitkan dengan file CSS berikut .
1 | link rel="stylesheet" href="stylesheet.css" |
1 | link rel="stylesheet" href="responsive.css" |
script tersebut untuk memanggil file CSS nya, agar tampilan bisa lebih menarik dan responsive.
Baca Juga : Cara Membuat Form Login PHP Dengan Mysqli Koneksi Database
stylesheet.css
Berikut ini kita membuat untuk style website diatas dengan membuat file baru dengan judul stylesheet.css dan berikut ini contoh scriptnya kalian bisa tulis untuk scriptnya.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | * { box-sizing: border-box; } body { margin: 0; font-family: "Lucida Grande"; } a { text-decoration: none; } .clear { clear: left; } .container { max-width: 1170px; width: 100%; padding: 0 15px; margin: 0 auto; } .top-wrapper { padding: 180px 0 100px 0; background-image: url("img/profile-02.jpg"); background-size: cover; color: white; text-align: center; } .top-wrapper h1 { opacity: 0.7; font-size: 45px; letter-spacing: 5px; margin-bottom: 10px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | .top-wrapper p { opacity: 0.7; margin-bottom: 3px; } .btn-wrapper { text-align: center; margin: 20px 0; } .btn-wrapper p { margin: 10px 0; } .signup { background-color: #239b76; } .facebook { background-color: #3b5998; margin-right: 10px; } .twitter { background-color: #55acee; } .btn { padding: 12px 24px; color: white; display: inline-block; opacity: 0.8; border-radius: 4px; text-align: center; } .btn:hover { opacity: 1; } .fa { margin-right: 5px; } header { height: 65px; width: 100%; background-color: rgba(34, 49, 52, 0.9); position :fixed; top: 0; z-index: 10; } .logo { width: 124px; margin-top: 20px; } .header-left { float: left; } .header-right { float: right; margin-right: -25px; } .header-right a { line-height: 65px; padding: 0 25px; color: white; display: block; float: left; transition: all 0.5s; } .header-right a:hover { background-color: rgba(255, 255, 255, 0.3); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | .menu-icon { color: white; float: right; font-size: 25px; padding: 21px 0; display:none; } .lesson-wrapper { padding-bottom: 80px; padding-left: 5%; padding-right: 5%; background-color: #f7f7f7; text-align: center; } .heading { padding-top: 80px; padding-bottom: 50px; color: #5f5d60; } .heading h2 { font-weight: normal; } .lesson { float: left; width: 25%; } .lesson-icon { position: relative; } .lesson-icon p { position: absolute; top: 44%; width: 100%; color: white; } .text-contents { width: 80%; display: inline-block; margin-top: 15px; font-size: 15px; color: #b3aeb5; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | .heading h3 { font-weight: normal; } .message-wrapper { border-bottom: 1px solid #eee; padding-bottom: 80px; text-align: center; } .message { padding: 15px 40px; background-color: #5dca88; cursor: pointer; box-shadow: 0 7px #1a7940; } .message:active { position: relative; top: 7px; box-shadow: none; } footer img { width: 125px; } footer p { color: #b3aeb5; font-size: 12px; } footer { padding-top: 30px; padding-bottom: 20px; } |


Dari gambar diatas gambar masih belum responsive dan text pun belum resopnsive bagaimana aga semua itu menjadi responsive. Baiklah kita lanjut ke tahap terakhir.
Baca Juga : Cara Mudah Menampilkan Data dari Database dengan PHP
responsive.css
Langkah terakhir yang kita lakukan yaitu buatkan file baru dengan nama responsive.css untuk membuat tampilan layar kita menjadi lebih responsiv
kalian bisa tulis script dibawah ini.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | /* Untuk Tablet */ @media all and (max-width: 1000px) { .lesson { width: 50%; margin-bottom: 50px; } .top-wrapper h1 { font-size: 32px; } .heading h2 { font-size: 20px; } } /* Untuk Smartphone */ @media all and (max-width: 670px) { .lesson { width: 100%; } footer { text-align: center; } .btn { width: 100%; } .facebook { margin-bottom: 10px; } .top-wrapper { text-align: left; } .header-right{ display:none; } .menu-icon{ display:block; } .top-wrapper h1 { font-size: 24px; line-height: 36px; } .top-wrapper p { font-size: 14px; line-height: 20px; } } |
Setelah kalian tambahkan script diatas maka tampilan webnya akan menjadi seperti berikut.

Bagaimana terlihatkan untuk perbedaan nya, kalian sudah mencobanya? dengan mengatur CSS kita sendiri kita jadi mengetahui dan lebih dapat mengerti untuk penggunaan CSS.
Semoga kalian dapat mengerti cara membuat CSS Responsive. Selamat mengoding dan membaca Langkah Mudah Membuat CSS Responsive.
0 Komentar