Pengenalan Media CSS pada Materialize CSS

08/10/2017    Maykhel David    82     Website

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

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More