Kali ini saya akan membagikan freebies seputar template website dengan Format .PSD.

Selamat Siang,

Disiang yang cerah ini kita akan membahas topik seputar hover effect pada button. apa itu hover ? hover adalah salah satu dari pseudo class dalam css.

Bagaimana cara kerja hover ?
Hover bekerja ketika kita mengarah kan kursor ke element tertentu yang sudah kita beri effect hover.

Bagaimana cara menggunakan hover ?
Cara menggunakan hover sangat mudah,

Syntax

nama_element:hover{
   /*
    silahkan tuliskan effect disini
   */
}

saya sudah membuat beberapa contoh untuk teman - teman agar bisa di pelajari.
Berikut sekilas infonya

Selamat siang para sahabat GZKZ.
Di siang hari yang panas ini penulis ingin berbagi sedikit angin sepoi - sepoi untuk para sahabat sekalian. Hari ini saya akan membagi free HTML & CSS template yaitu GZIMUS.
berikut sekilas info tentang tampilannya

Selamat Pagi :)

Selamat siang semua,
Pada hari ini penulis ingin berbagi template buatan penulis, meski pun penulis belum terlalu mahir hehehe,
Berikut ada lah Priview dari template yang akan penulis bagikan

Google Drive

~Selamat Malam

Navigasi pada website adalah penting pada sebuah website . Sistem navigasi website seperti peta jalan untuk semua daerah dan informasi yang berbeda yang terkandung dalam situs web.

Menggunakan skema navigasi yang konsisten dari halaman ke halaman membantu pengunjung situs mempelajari sistem navigasi website Anda.

dan malam ini saya akan memberikan salah satu Sidebar Navgation

Contoh :

~Selamat Malam

Kali ini berbagi dengan teman - teman cara membuat Fullscreen layout yang nanti akan di bagi menjadi beberapa kolom

Contoh :


pertama - tama mari kita buat stuktur HTML nya terlebih dahulu

HTML

<div class="container">
   
        <div class="main">
            <div class="section">
                 
                       <div class="box">
                            <h2>Judul Disini</h2>
                       </div>
             
                         <div class="konten">
                                <h2>Sub judul</h2>
                                <p>Sebuah keterangan</p>
                 
                          </div> <!-- close tag div konten -->
                    </div><!-- close tag div section -->

 lalu tambahkan CSS

/* reset semua margin dan padding element */
*{
padding:0;
margin:0;
}

/* reset semua box-sizing ,sesudah ,dan sebelum element tersebut */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:90%;
color:#FFF;
}

.container{
width:100%;
height:100%;
}

.main{
position:absolute;
width:100%;
height:100%;

}

.main > .section{
position:absolute;
width:20%;
height:100%;
cursor:pointer;
}

.main > .section:first-child{
top:0;
left:0;
background:url('images/ariana.jpg');
background-repeat:no-repeat;
background-position:center;
transform:rotateY(0deg);
background-size:cover;
transition:all 0.30s ease 0.30s;

}

.main > .section:first-child:hover{
transition:all 0.30s ease 0.30s;
transform:rotateY(-180deg);
}


.main > .section:first-child:hover > .konten{
top:0;
width:100%;
height:100%;
z-index:900;
opacity:1;
transform:rotateY(180deg);
background:rgba(246,36,89,1);
transition:all 0.20s ease 0.20s;
position:absolute;
}

Kemarin saya telah membat Page Transition dengan jQuery dan CSS tapi kali ini kita tidak akan menggunakan jQuery melainkan hanya menggunakan CSS. Walaupun tanpa jQuery "Page Transition" ini juga tidak kalah kerennya .

~ Selamat malam

Hari ini kami ingin berbagi koleksi transisi halaman kreatif dengan Anda. Saya telah membuat beberapa animasi yang bisa diterapkan untuk "halaman". Efek yang saya buat sangat sederhana, yaitu gerakan slide sederhana.

Harap dicatat bahwa ini hanya untuk menampilkan beberapa efek yang menarik dan inspirasi. Ini bukan slider atau sesuatu seperti itu. Saya hanya akan menerapkan ini untuk transisi halaman yang terlihat, tidak untuk sebuah navigasi.

kira - kira seperti ini


*{
margin:0;
padding:0;
}

ul,li{ list-style:none; }

a{  text-decoration:none; }

body{ font-family:Arial, Helvetica, sans-serif; }

.konten-item{

width:25%;
margin:10% 37%;
box-shadow:0 0px 30px rgba(0,0,0,.30);

}

.konten-item li{

color:#fff;
        padding:10px;
background:#5BB9F0;

}

.konten-item li:nth-child(1){

padding:0;
background:#5BB9F0;

}

.konten-item img{

opacity:1;
        width:100%;
transition:all .30s ease .30s;

}

/*
awal animasi
*/

.konten-item li:nth-child(2),
.konten-item li:nth-child(3){

transform:translateY(0);
transition:all .30s ease .30s;

}

.konten-item:hover li:nth-child(2),
.konten-item:hover li:nth-child(3){

transform:translateY(-25px);
transition:all .30s ease .30s;

}

.konten-item:hover li img{

opacity:.70;
transition:all .30s ease .30s;

}

.konten-item:hover .read{ opacity:100; }

.read{

opacity:0;
width:25%;
height:auto;
position:absolute;
margin-top:-62px;
box-shadow:inset 0px 0 #FFF;
transition:all .20s ease .20s;

}

.read a{

color:#5BB9F0;
font-size:20px;
padding-left:10px;

}

.change .bg-layer{

position:fixed;
width:100%;
height:100%;
top:50%;
left:50%;
bottom:auto;
right:auto;
background:#52B3D9;
transform:translateX(-50%) translateY(-50%);

}

.change .loading-bar{

position:fixed;
top:50%;
left:20%;
width:60%;
height:2px;
background:#FFF;
box-shadow:inset 0 0 0 #000;
animation:normal bar 5s ease-in-out;

}

.change .loading-text{
top:52%;
left:45%;
z-index:10;
position:fixed;
visibility:visible;
}

.loading-text h3{

color:#fff;

visibility:hidden;
}

.change .loading-text h3{
visibility:visible;
}



@keyframes bar{

0%{
box-shadow:inset 0px 0 0 #000;
}

100%{
box-shadow:inset 900px 0 0 #000;
}

}

Jquery

 <script>

$(document).ready(function(){
   
                                 $(".read a").click(function(e){
       $("body").addClass("change");
     
                                       setInterval(function(){
            $("body").removeClass("change");
},4000);
});
 
  });

 </script>

Tada Sudah Siap , Bagaimana ?Mudah Bukan ?

~Terima Kasih

Masonry - adalah tata letak grid yand didasarkan pada kolom. Tidak seperti layout lainnya, baris dan tinggi tidak memiliki nilai yang tetap. Pada dasarnya tata letak Masonry mengoptimalkan penggunaan ruang didalam halaman web. Layout jenis ini tidak membutuhkan pembatas untuk menjaga struktur dan tata letak .

hai, malam semua sahabat gazkintz ,,