Mengenal Framework CSS Materialize

Mengenal Framework CSS Materialize

By nn   00:50   No comments:

Hallo ...
Semangat pagi !

Saat Saya posting artikel ini cuaca agak mendung kawan, tapi tenang saja, hati Saya tetap cerah kok *eaa*

Sejak Saya diberitahu oleh teman PKL bahwa ada framework css selain bootstrap, Saya langsung kepo. Saya coba mengorek informasi dari teman-teman RPL, dan juga mbah google tentunya. Ternyata tidak banyak artikel-artikel yang membahas tentang Framework CSS Materialize ini. Setelah membaca dan bertanya, ternyata Materialize ini cukup mudah untuk dipahami ketimbang bootstrap, dan tampilannya juga lumayan lebih bagus *menurut Saya*. Dan tentu tetap Responsive.

Nah, apa sih Framework CSS Materialize itu ?

Yuk simak !

Latar Belakang

Di tengah-tengah kepopuleran framework CSS seperti Bootstrap, Metro UI, Foundation, Flat UI, dan lain sebagainya yang memudahkan para developer untuk mendesain webnya. Lalu muncul salah satu framework bertema material design bernama Materialize.

Sejarah

Di tahun 2014  Setelah Google mengumumkan Material Design, sebuah front-end design untuk produk mereka, yang pada awalnya hanya untuk platform Android saja, mulai digunakan oleh para developer web. Tak lupa Google juga mulai merubah desain produk-produk mereka dengan Material Design, yang membuatnya menjadi design yang "kekinian". 

Diprakarsai oleh Alvin Wang dan teamnya, Materialize merupakan salah satu framework material design, yang banyak digunakan oleh para web developer. Di dalam Materialize terdapat berbagai fitur pengenalan framework, mulai dari about yang berisi pengenalan produk, getting started tahapan sebelum memulai, css, components dan java script bagian yang berisikan code-code dan fitur-fitur yang berada di materialize, mobile bagian yang memperlihatkan beberapa fitur yang tersedia pada materialize untuk mobile, sampai showcase bagian yang memperlihatkan demo dari web yang menggunakan  materialize, semuanya tersedia disitu.

Dengan framework materialize sendiri, kamu sudah bisa membangun sekedar web responsive bahkan web dengan model parallax. Karena memang pada dasarnya dibuat untuk mempermudah para web developer dalam mendesign front-end web mereka. 

Materialize bisa menjadi pilihan alternatif bagi para developer jika ingin mendesain webnya dengan hal yang berbeda, karena memiliki fitur-fitur yang berbeda dari framework lain. Website Materialize dapat diakses di alamat materializecss.com. 

Pengertian

Materialize adalah kerangka kerja seperti bootstrap, dimana framework khusus untuk frontend yang terdiri dari HTML, CSS, dan Javascript yang dapat kita gunakan langsung. Uniknya, Materialize mengimplementasikan material design (salah satu design yang dilakukan oleh google).

Materialize dapat didownload di Website resminya. "Download disini"

Ada dua cara untuk memulai menggunakan materialize yaitu dengan menggunakan css biasa dan sass.



Materialize sendiri sudah mengandung SASS Mixin ,yang mempermudah Kamu dalam menggunakan CSS.
ini contoh penggunaan SASS (saya mengambil contoh sintaks css animation) :

-webkit-animation: 0.5s; 

-moz-animation: 0.5s; 

-o-animation: 0.5s;  

-ms-animation: 0.5s;  

animaton: 0.5s;

dari semua sintaks di atas Anda hanya perlu memanggil dalam satu baris sintaks sass mixin seperti ini :

@include animation(.5s);

Referensi

- https://www.codepolitan.com/
- http://www.dumetschool.com/

Penutup

Sekian dan terimakasih, semoga artikel ini dapat bermanfaat. Selamat belajar !

Read More

Membuat Hover Effect Gambar Dengan Banyak Cara

Membuat Hover Effect Gambar Dengan Banyak Cara

By nn   18:00   No comments:

Hallo...
Semangat pagi !

Kali ini Saya posting tentang Macam-Macam Hover Effect Gambar, Saya posting ini karena melihat teman-teman Prakerin dari jurusan TKJ yang banyak membuat Portal. Nah, Portal karya teman-teman ini bagus-bagus, dan banyak juga di antara mereka yang gambar pada portalnya mempunyai effek saat di sentuh dengan currsor (hover). Maka dari itu kawan, Saya akan share beberapa yang Saya tahu untuk effek hover gambar. Tapi bukan effek hover gabar biasa, dalam gambar yang di hover kan tertera judul dan juga link tujuan, seperti ini.

Nah, penasaran kan bagaimana kodenya ? Yuk simak !

Pengertian

Hover merupakan gerakan atau perubahan yang terjadi pada sebuah objek apabila area objek tersebut dilintasi atau disentuh oleh mouse (panah mouse). Sedangkan konsep untuk membuat model gerakan dapat kita bentuk dengan CSS transisi dan animasi, sehingga saat cursor menyentuh area dimana objek tersebut berada, maka gerakan akan tercipta sesuai dengan konsep CSS yang sudah kita susun dan tentukan nilainya pada masing-masing deklarasi elemen hover.

Latar Belakang

Dengan menerapkan hover, dapat mempercantik tampilan dan effek suatu objek.

Kegiatan

 Ada banyak effek dalam hover gambar, ini adalah beberapa effek nya.

1. Effek 1. Demo Disini

<style

.hovereffect {
  width: 40%;
  height: 40%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.6);
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: translate(460px, -100px) rotate(180deg);
  -ms-transform: translate(460px, -100px) rotate(180deg);
  transform: translate(460px, -100px) rotate(180deg);
  -webkit-transition: all 0.2s 0.4s ease-in-out;
  transition: all 0.2s 0.4s ease-in-out;
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
}

.hovereffect a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff;
  margin: 50px 0 0 0;
  background-color: transparent;
  -webkit-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.hovereffect a.info:hover {
  box-shadow: 0 0 5px #fff;
}

.hovereffect:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}

.hovereffect:hover h2 {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.hovereffect:hover a.info {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

</style>

    <div class="hovereffect">
        <img class="img-responsive" src="http://placehold.it/350x200" alt="">
        <div class="overlay">
            <h2>Hover effect 2</h2>
            <a class="info" href="#">link here</a>
        </div>
    </div>

2. Effek 2. Demo Disini

<style>

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}

.hovereffect:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
  filter: grayscale(1) blur(3px);
  -webkit-filter: grayscale(1) blur(3px);
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

.hovereffect h2 {
  text-transform: uppercase;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
}

.hovereffect a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  border: 1px solid #fff;
  margin: 50px 0 0 0;
  background-color: transparent;
}

.hovereffect a.info:hover {
  box-shadow: 0 0 5px #fff;
}

.hovereffect a.info, .hovereffect h2 {
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
  opacity: 0;
  filter: alpha(opacity=0);
  color: #fff;
  text-transform: uppercase;
}

.hovereffect:hover a.info, .hovereffect:hover h2 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

</style>

    <div class="hovereffect">
        <img class="img-responsive" src="http://placehold.it/350x200" alt="">
        <div class="overlay">
           <h2>Hover effect 3</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>

3. Effek 3. Demo Disini

    <div class="hovereffect">
        <img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXo62SKAmM3q2pUWxBjPmKiHTEs_p_ZRfZ0WLlpHWWByeEU0h066uzwoQmY9xpHPU9061rGO3NdhTDu2NSz8TSSwxuUPqvmyzgpFOd4elMB5HJiaUKV43d0k-_Xhj9ZMkcfaKN4a04lSk/s1600/IMG_7311.JPG" alt="">
        <div class="overlay">
           <h2>Hover effect 4</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>
<style>
.hovereffect {
  width: 40%;
  height: 40%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background-color: rgba(75,75,75,0.7);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover .overlay {
  background-color: rgba(48, 152, 157, 0.4);
}

.hovereffect img {
  display: block;
  position: relative;
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transform: translateY(45px);
  -ms-transform: translateY(45px);
  transform: translateY(45px);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover h2 {
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
}

.hovereffect a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff;
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  font-weight: normal;
  margin: -52px 0 0 0;
  padding: 62px 100px;
}

.hovereffect:hover a.info {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.hovereffect a.info:hover {
  box-shadow: 0 0 5px #fff;
}
</style>

4. Effek 4. Demo disini

    <div class="hovereffect">
        <img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXo62SKAmM3q2pUWxBjPmKiHTEs_p_ZRfZ0WLlpHWWByeEU0h066uzwoQmY9xpHPU9061rGO3NdhTDu2NSz8TSSwxuUPqvmyzgpFOd4elMB5HJiaUKV43d0k-_Xhj9ZMkcfaKN4a04lSk/s1600/IMG_7311.JPG" alt="">
        <div class="overlay">
           <h2>Hover effect 4v2</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>
<style>
.hovereffect {
  width: 40%;
  height: 50%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background-color: rgba(75,75,75,0.7);
  -webkit-transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
}

.hovereffect:hover .overlay {
  background-color: rgba(48, 152, 157, 0.4);
}

.hovereffect img {
  display: block;
  position: relative;
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transform: translateY(45px);
  -ms-transform: translateY(45px);
  transform: translateY(45px);
  -webkit-transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
}

.hovereffect:hover h2 {
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
}

.hovereffect a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff;
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
  font-weight: normal;
  margin: -52px 0 0 0;
  padding: 62px 100px;
}

.hovereffect:hover a.info {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.hovereffect a.info:hover {
  box-shadow: 0 0 5px #fff;
}
</style>

5. Effek 5. Demo disini

    <div class="hovereffect">
        <img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXo62SKAmM3q2pUWxBjPmKiHTEs_p_ZRfZ0WLlpHWWByeEU0h066uzwoQmY9xpHPU9061rGO3NdhTDu2NSz8TSSwxuUPqvmyzgpFOd4elMB5HJiaUKV43d0k-_Xhj9ZMkcfaKN4a04lSk/s1600/IMG_7311.JPG" alt="">
            <div class="overlay">
                <h2>Effect 5</h2>
    <p>
     <a href="#">LINK disini</a>
    </p>
            </div>
    </div>

<style>
.hovereffect {
  width: 40%;
  height: 40%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  position: absolute;
  overflow: hidden;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  border-bottom: 1px solid #FFF;
  border-top: 1px solid #FFF;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0,1);
  -ms-transform: scale(0,1);
  transform: scale(0,1);
}

.hovereffect:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

.hovereffect:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
  filter: brightness(0.6);
  -webkit-filter: brightness(0.6);
}

.hovereffect h2 {
  text-transform: uppercase;
  text-align: center;
  position: relative;
  font-size: 17px;
  background-color: transparent;
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}

.hovereffect a, hovereffect p {
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}

.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
</style>

Referensi

- https://miketricking.github.io/dist/

Read More

Membuat Slide Foto di Web Dengan CSS3

Membuat Slide Foto di Web Dengan CSS3

By nn   19:13   2 comments:

Hallo...
Semangat Pagi !

Setelah sebelumnya saya posting membuat slide foto di blogger, sekarang saya posting cara membuat slide foto di web. Tapi slide foto yang akan kita buat kali ini hanya dengan css. Kita sering menemui berbagai macam cara membuat slide foto, namun sebagian besar dari cara itu pasti menggunakan javascript dan jquery. Karena itulah kali ini saya share cara membuat slide foto dengan css.

Tampilan dari slide foto menggunakan css memang tidak sebaik dan sekeren dengan javascript ataupun jquery, apa lagi dengan bootstrap. namun membuat slide foto dengan css lebih mudah dan lebih asik !

Yuk simak kawan !

Langkah awal adalah, buka text editor anda, kalau saya memakai sublime text, karena lebih mudah pastinya.
nah setelah membuka sublime text, salinlah kode berikut ini :

---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Latihan Slide SA-Lee</title>
    <style>

     #slidercontainer {
      position: relative;
      overflow: hidden;
      background: #000
     }

     #slidercontainer {
      width: 768px;
      height: 341px;
      margin-left: 246px;
     }

     #css3slider img {
      width: 768px;
      height: 341px;
      margin-left: 0px;
     }

     #css3slider {
      position: absolute;
      width:3900px;
      -webkit-animation-name:slider;
      -webkit-animation-duration:15s;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-iteration-count:infinite;
      -moz-animation-name:slider;
      -moz-animation-duration:15s;
      -moz-animation-timing-function: ease-in-out;
      -moz-animation-iteration-count:infinite;
      -o-animation-name:slider;
      -o-animation-duration:15s;
      -o-animation-timing-function: ease-in-out;
      -o-animation-iteration-count:infinite;
      animation-name:slider;
      animation-duration:15s;
      animation-timing-function: ease-in-out;
      animation-iteration-count:infinite;
    }

    @-webkit-keyframes slider {   
      0% { left: 0; opacity: 0; }   
      2% { opacity: 1; }   
      20% { left: 0; opacity: 1; }   
      21% { opacity: 0; }   
      24% { opacity: 0; }   
      25% { left: -768px; opacity: 1; }     
      45% { left: -768px; opacity: 1; }   
      46% { opacity: 0; }   
      48% { opacity: 0; }   
      50% { left: -1536px; opacity: 1; }   
      70% { left: -1536px; opacity: 1; }   
      72% { opacity: 0; }   
      74% { opacity: 0; }  
      75% { left: -2304px; opacity: 1; }     
      95% { left: -2304px; opacity: 1; }     
      97%  { left: -2304px; opacity: 0;}     
      100% { left: 0; opacity: 0; }
    }

    @-moz-keyframes slider {   
      0% { left: 0; opacity: 0; }   
      2% { opacity: 1; }   
      20% { left: 0; opacity: 1; }   
      21% { opacity: 0; }   
      24% { opacity: 0; }   
      25% { left: -768px; opacity: 1; }     
      45% { left: -768px; opacity: 1; }   
      46% { opacity: 0; }   
      48% { opacity: 0; }   
      50% { left: -1536px; opacity: 1; }   
      70% { left: -1536px; opacity: 1; }   
      72% { opacity: 0; }   
      74% { opacity: 0; }  
      75% { left: -2304px; opacity: 1; }     
      95% { left: -2304px; opacity: 1; }     
      97%  { left: -2304px; opacity: 0;}     
      100% { left: 0; opacity: 0; }
    }

    @-o-keyframes slider {   
      0% { left: 0; opacity: 0; }   
      2% { opacity: 1; }   
      20% { left: 0; opacity: 1; }   
      21% { opacity: 0; }   
      24% { opacity: 0; }   
      25% { left: -768px; opacity: 1; }   
      45% { left: -768px; opacity: 1; }   
      46% { opacity: 0; }   
      48% { opacity: 0; }   
      50% { left: -1536px; opacity: 1; }   
      70% { left: -1536px; opacity: 1; }   
      72% { opacity: 0; }   
      74% { opacity: 0; }  
      75% { left: -2304px; opacity: 1; }     
      95% { left: -2304px; opacity: 1; }     
      97%  { left: -2304px; opacity: 0; }     
      100% { left: 0; opacity: 0; }
    }

    @keyframes slider {   
      0% { left: 0; opacity: 0; }   
      2% { opacity: 1; }   
      20% { left: 0; opacity: 1; }   
      21% { opacity: 0; }   
      24% { opacity: 0; }   
      25% { left: -768px; opacity: 1; }   
      45% { left: -768px; opacity: 1; }   
      46% { opacity: 0; }   
      48% { opacity: 0; }   
      50% { left: -1536px; opacity: 1; }   
      70% { left: -1536px; opacity: 1; }   
      72% { opacity: 0; }   
      74% { opacity: 0; }  
      75% { left: -2304px; opacity: 1; }     
      95% { left: -2304px; opacity: 1; }     
      97%  { left: -2304px; opacity: 0; }     
      100% { left: 0; opacity: 0; }
    }

    #css3slider:hover {
      -webkit-animation-play-state:paused;
      -moz-animation-play-state:paused;
      -o-animation-play-state:paused;
      animation-play-state:paused; }
    }

    #css3slider img {
      margin-left: 0px;
    }
    #slidercontainer:hover:after {
      color: rgba(255,255,255, 0.6);
    }
     </style>
  </head>
<body>
 <div id=slidercontainer>
  <div id=css3slider>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgehoIktxKiMY2ABq6ks7_MFnW_ERe-zj4RxfwPmJrCgT4dZV94Z3_giw0CFVru5gn3O3DWkgj_m88_GOjHTMU4PH5Gi6Wc-WF5PI0CPuQjPpNjkCRFpp5fdMUcv2-g_V4h4wZaczSP-0o/s960/10660299_1636913959930856_3102166650881031680_n.jpg"><!-- img src"sesuaikan dengan nama folder dan nama file foto anda"-->
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5OWFqi0t4L3VfBKMk6bOg1SrhV5r0qAKwmJT0jjQi2kIE4kB-8ExoyLq9NnDcQrMTp2JyZ87EAnW6Crbu2W-vE6QXT0_KjxdtioYyQOdzhkr2JNL29TDsJ9eEYgfiQW_CdI7yscBnUZg/s640/1904255_573624152766279_3782388883784785106_n.jpg">
    <img src="foto/saya.jpg"> <!-- misal foto anda terdapat di dalam folder foto-->
    <img src="inisaya.jpg"> <!-- misal foto anda terdapat di luar, satu folder dengan home.html-->
    <img src="fotosaya.png"> <!-- misal file fotosaya berekstensi .png-->
  </div>
 </div>
</body>
</html>

---

 Nah, selesai. simpan dengan nama home.html, ekstensi .html bisa kalian ubah menjadi .php :)

Lalu buka di browser anda, dengan cara CTRL+O pada browser, jika  kalian menyimpan dalam folder htdocs, buka dengan ketikkan localhost/namafolder/home.php di url browser.

Sekian dan terimakasih, kalau ada yang kurang jelas dan ingin di tanyakan, silahkan hubungi saya melalui sosial media, atau komentar di bawah ini.
Selamat mencoba dan selamat belajar !

Read More

Belajar Web Responsive

Belajar Web Responsive

By nn   21:34   No comments:

Hallo...
Semangat Pagi !

Di kesempatan ini, saya akan posting tentang web responsive, tentang web responsive saya pun sedang belajar, dan kurang faham. Namun saya akan share sedikit yang saya tahu tentang web responsive.

Sebelumnya kita buat dahulu kerangkanya dengan html, berbentuk seperti ini

Nah untuk css nya, saya sudah menyiapkan

---

*{ margin:0;padding:0; }
body{font-size:12px;font-family:verdana;}
#wrapper { 
 margin:auto; background: #fff; padding: 10px 0;width:1000px;
}
#header{
 width:100%;background:#EEE;
}
#content{
 float:left;background:#FFF;padding:10px;height:300px;width:600px;
}
#rightside{
 float:left;background:#ccc;padding:10px;height:300px;width:360px
}
#footer{
 clear:both;
 width:980px;
 background:#5F6354;
 color:#FFF;
 padding:10px
} 

---

setelah membuat css, kita membuat resolusinya. Yang membuat web dapat beresolusi di tablet ataupun android.

berikut kodenya menggunakan @medi screen

---

@media screen and (max-width: 768px)  {
 #rightside { width: 98%;border-top:1px solid #2D2E2C; float:none; }
 #content { width:98%; float:none; }
 #wrapper{ width:98%; }
 #footer{ width:98%; }
}
img {
 max-width: 100%;
 height: auto;
 width: auto\9; /* ie8 */
}

---

Oke, silahkan mencobaa dan selamat belajar kawan !

Read More

Membuat Web Sederhana dengan Menu Horizontal

Membuat Web Sederhana dengan Menu Horizontal

By nn   23:34   No comments:

Hallo...
Semangat Pagi !

Ketika saya memosting tutorial ini, awannya mendung, cuaca kurang mendukung. Padahal tadi pagi cerah. ahh tak apa lah, saya tetap semangat untuk memosting walaupun awan tak cerah.

ini saya share website sederhana, silahkan di download dan di pelajari. Jika ada yang kurang jelas silahkan tanyakan kepada saya.
Untuk download klik di bawah ini.

Read More

Membuat Menu Dropdown Horizontal dengan Transitions

Membuat Menu Dropdown Horizontal dengan Transitions

By nn   00:57   No comments:

Hallo...
Semangat Pagi !

Setelah sebelumnya saya posting dropdown klik, kali ini menu dropdown dengan effek transitions. Simak yuk !

Pengertian 
Menu Dropdown adalah menu beralih yang memungkinkan pengguna untuk memilih salah satu object dari daftar yang tersedia.

Latar Belakang
Dalam pembuatan web yang memiliki banyak konten, akan memakan banyak tempat, dan menjadikan menu terlihat berantakan karena tersusun tidak rapi. Dengan adanya dropdown, kita dapat menghemat tempan untuk menu, dan tampilan web kita tetap cantik dan rapi.

Alat dan Bahan
1. Komputer atau Laptop.
2. Sublime text atau text editor lainnya.

Tahap Pelaksanaan
1. Buka sublime text atau text editor lainnya.
2. salin atau tulis kode di bawah ini

---

Membuat Dropdown dengan Effek Klik Sederhana

Hallo...
Semangat Pagi !

Setelah sebelumnya saya posting hover dropdown, kali ini dropdown dengan effek ketika di klik. Simak yuk !

Pengertian 
Menu Dropdown adalah menu beralih yang memungkinkan pengguna untuk memilih salah satu object dari daftar yang tersedia.

Latar Belakang
Dalam pembuatan web yang memiliki banyak konten, akan memakan banyak tempat, dan menjadikan menu terlihat berantakan karena tersusun tidak rapi. Dengan adanya dropdown, kita dapat menghemat tempan untuk menu, dan tampilan web kita tetap cantik dan rapi.

Alat dan Bahan
1. Komputer atau Laptop.
2. Sublime text atau text editor lainnya.

Tahap Pelaksanaan
1. Buka sublime text atau text editor lainnya.
2. salin atau tulis kode di bawah ini

---

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdow:hover .dropbtn {
    background-color: red;
}

li.dropdow {
    display: inline-block;
}

.dropdow-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdow-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdow-content a:hover {background-color: #f1f1f1}

.show {display:block;}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">About</a></li>
  <li class="dropdow">
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown</a>
    <div class="dropdow-content" id="myDropdow">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>
<script>
function myFunction() {
    document.getElementById("myDropdow").classList.toggle("show");
}

window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdow-content");
    for (var d = 0; d < dropdows.length; d++) {
      var openDropdow = dropdows[d];
      if (openDropdow.classList.contains('show')) {
        openDropdow.classList.remove('show');
      }
    }
  }
}
</script>

</body>
</html>

---

3. Simpan dengan nama beranda.html 
4. Buka di browser anda, dengan cara CTRL+O

Referensi 
  -

Penutup
Trimakasih telah menyimak postingan saya, share dan like artikel ini. Join blog saya kawan klik disini.

Selamat mencoba dan selamat belajar. !
Apabila ada yang di tanyakan silahkan hubungi saya via sosmed :) 

---

Read More

Membuat Dropdown dengan Effek Klik Sederhana

Membuat Dropdown dengan Effek Klik Sederhana

By nn   23:59   No comments:

Hallo...
Semangat Pagi !

Setelah sebelumnya saya posting hover dropdown, kali ini dropdown dengan effek ketika di klik. Simak yuk !

Pengertian 
Menu Dropdown adalah menu beralih yang memungkinkan pengguna untuk memilih salah satu object dari daftar yang tersedia.

Latar Belakang
Dalam pembuatan web yang memiliki banyak konten, akan memakan banyak tempat, dan menjadikan menu terlihat berantakan karena tersusun tidak rapi. Dengan adanya dropdown, kita dapat menghemat tempan untuk menu, dan tampilan web kita tetap cantik dan rapi.

Alat dan Bahan
1. Komputer atau Laptop.
2. Sublime text atau text editor lainnya.

Tahap Pelaksanaan
1. Buka sublime text atau text editor lainnya.
2. salin atau tulis kode di bawah ini

---

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdow:hover .dropbtn {
    background-color: red;
}

li.dropdow {
    display: inline-block;
}

.dropdow-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdow-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdow-content a:hover {background-color: #f1f1f1}

.show {display:block;}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">About</a></li>
  <li class="dropdow">
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown</a>
    <div class="dropdow-content" id="myDropdow">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>
<script>
function myFunction() {
    document.getElementById("myDropdow").classList.toggle("show");
}

window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdow-content");
    for (var d = 0; d < dropdows.length; d++) {
      var openDropdow = dropdows[d];
      if (openDropdow.classList.contains('show')) {
        openDropdow.classList.remove('show');
      }
    }
  }
}
</script>

</body>
</html>

---

3. Simpan dengan nama mencoba.html 
4. Buka di browser anda, dengan cara CTRL+O

Referensi 
 www.w3schools.com

Penutup
Trimakasih telah menyimak postingan saya, share dan like artikel ini. Join blog saya kawan klik disini.

Selamat mencoba dan selamat belajar. !
Apabila ada yang di tanyakan silahkan hubungi saya via sosmed :) 

Read More

Membuat Hover Dropdown Sederhana

Membuat Hover Dropdown Sederhana

By nn   20:37   No comments:

Hallo...
Semangat Pagi !

Masih semangat untuk belajar kawan. Setelah sebelumnya saya posting tentang Mengenal dan Membuat Hover Effect Menu kali ini saya akan meneruskannya menjadi Membuat Hover Dropdown Sederhana.

Mari menyimak !

Pengertian 
Menu Dropdown adalah menu beralih yang memungkinkan pengguna untuk memilih salah satu object dari daftar yang tersedia.

Latar Belakang
Dalam pembuatan web yang memiliki banyak konten, akan memakan banyak tempat, dan menjadikan menu terlihat berantakan karena tersusun tidak rapi. Dengan adanya dropdown, kita dapat menghemat tempan untuk menu, dan tampilan web kita tetap cantik dan rapi.

Alat dan Bahan
1. Komputer atau Laptop.
2. Sublime text atau text editor lainnya.

Tahap Pelaksanaan
1. Tahap awal, tentu membuka text editornya terlebih dahulu, saya terbiasa menggunakan sublime text, karena memudahkan pengerjaan.
2. Tulis kode di bawah ini, lalu simpan dengan nama "beranda.html".


<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Menu 1</a></li>
  <li><a href="#news">Menu 2</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Sub Menu 1</a>
      <a href="#">Sub Menu 2</a>
      <a href="#">Sub Menu 3</a>
    </div>
  </li>
</ul>
</body>
</html>



3. Simpan, dan buka di browser anda dengan cara CTRL+O pada keyboard anda.

Referensi 
 www.w3schools.com

Penutup
Trimakasih telah menyimak postingan saya, share dan like artikel ini. Join blog saya kawan klik disini.

Selamat mencoba dan selamat belajar. !
Apabila ada yang di tanyakan silahkan hubungi saya via sosmed :)

Read More