Pengenalan Media CSS pada Materialize CSS

Hallo semuanya, yang sekarang sedang banyak di manfaatkan dalam perkembangan dunia web desain adalah jenis website yang memiliki ciri khas seperti flat design dengan tampilan fitur unik bahkan sampai web berbasis canvas, website jenis ini sudah sangat banyak bermunculan dimulai dari sekitar awal 2015 sudah banyak website yang menggunakan konsep serupa dengan yang saya sebutkan

Pengembangan lebih lanjut tentang desain website adalah sesuatu yang bisa dibilang sangat diperlukan untuk memberikan kesan unik agar menarik perhatian orang yang mengunjunginya sehingga akan berpengaruh besar terhadap pengunjung yang merasa nyaman dan betah untuk berlama – lama membaca artikel atau konten yang ada, sisanya adalah tergantung isi konten dari website kalian, apakah menarik untuk dibaca atau tidak. Tentu penggunaan framework responsive sudah menjadi hal wajib untuk diterapkan oleh para pengembang website saat ini.

Salah satu framework responsive yang cukup powerful untuk membangun sebuah website dengan tampilan yang nyaman dimata serta memiliki fungsionalitas yang sangat baik seperti pada artikel kali ini kita akan membahas tentang Media CSS yang ada pada Materialize CSS.

Pada MaterializeCSS kita bisa menambahkan class responsive-img pada tag img seperti berikut:

<img class="responsive-img" src="cool_pic.jpg">

Kita juga bisa membuat gambar menjadi lingkaran dan membuat layout seperti ini

Pengenalan Media CSS pada Materialize CSS

<div class="col s12 m8 offset-m2 l6 offset-l3">
        <div class="card-panel grey lighten-5 z-depth-1">
          <div class="row valign-wrapper">
            <div class="col s2">
              <img src="images/yuna.jpg" alt="" class="circle responsive-img"> <!-- notice the "circle" class -->
            </div>
            <div class="col s10">
              <span class="black-text">
                This is a square image. Add the "circle" class to it to make it appear circular.
              </span>
            </div>
          </div>
        </div>
      </div>

 

Pada materialize css kita juga diberikan kemudahan untuk menampilkan video dengan cara embed ataupun menggunakan tag video pada HTML5

Embed Video Responsive

      <div class="video-container">
        <iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
      </div>

 

HTML5 Video Tag

      <div class="video-container">
        <iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
      </div>

 

Baiklah teman-teman banyak sekali kemudahan yang diberikan pada framework responsive materialize css yang memungkinkan kita membuat sebuah website responsive dengan teknologi terbaru. Demikian artikel tentang pengenalan media css pada materialize css. Semoga bermanfaat

8 Oktober 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat