Efek Buka Layar Halaman Dengan CSS

Buka Layar Halaman Dengan CSS - Banyak sekali gaya yang disajikan untuk memperindah tampilan web/blog, baik dengan JavaScript atau jQuery, namun dalam hal ini gaya yang akan disajikan menggunakan CSS yaitu efek slide untuk Buka Layar Halaman pada web/blog.

Gaya/style setiap orang berbeda tergantung konsep dan kesukaannya masing-masing, buka layar halaman merupakan salah satu gaya yang bisa disajikan untuk memperindah web/blog, dalam hal ini memang tidak begitu penting untuk ditampilkan sebagai sebuah gaya, tapi bagi yang menyukainya bisa mempergunakan gaya/style ini untuk memperindah tampilan.

✾✾✾

Penggunaan script css-nya pun tidak begitu panjang tapi bisa memberikan tampilan yang berbeda untuk sebuah template.

CSS

.buka-layar {
width:100%;
height:100%;
background:red;
position:relative;
margin: 0 auto;
overflow:hidden;
}
.halaman {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:#ccc;
z-index:1000;
-webkit-transition:0.4s;
transition:0.4s;
}
.halaman p {
padding:0;
margin:0;
font-size:30px;
color:#ccc;
text-align:center;
text-shadow:1px 1px 0 #888;
}
.buka-layar input {
position:absolute;
display:none;
}
.tombol-buka {
width:50px;
height:50px;
position:relative;
margin:50% auto 0;
border-radius:5px;
background:#ccc url(alamat gambar) no-repeat 50% 50%;
background-size:90%;
box-shadow: -1px -1px 1px #ddd, 1px 1px 1px #888;
}
.tombol-buka:active {
box-shadow: 1px 1px 1px #ddd, -1px -1px 1px #888;
}
.tombol-buka label {
display:block;
width:50px;
height:50px;
cursor:pointer;
position:relative;
}
#dezige-buka-layar:checked ~ .halaman {
left:100%;
}

HTML

<div class="buka-layar">
     <input type="radio" name="deZige Buka Layar" id="dezige-buka-layar">
                   
         /*elemen yang tertutup layar disini*/
         
         <div class="halaman">
              <div class="tombol-buka">
              <label for="dezige-buka-layar" title="Open Menu"></label>
              </div>
              <p>deZige<br>Buka Layar</p>
         </div>
</div>

Selamat berkreasi