deZige

Efek Buka Layar Halaman Dengan CSS

Buka layar halaman dengan menggunakan CSS dengan efek right slide

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.

Style Buka Layar Dengan CSS

✾✾✾

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

2 comments:

  1. Kalau mau dipake di homepage bisa gak, Kang Yudi? Kalau bisa, bagian HTML /*elemen yang tertutup layar disini*/ <---- diisi dengan apa? Nuhun.

    ReplyDelete
    Replies
    1. Bisa, element yang tertutup layar disini, itu merupakan elemen yang nantinya akan ditutup oleh html buka layar.

      Bagian mana yang akan ditutup layar tergantung elemen tersebut, karena dalam hal ini penamaanya bisa berbeda.

      Sebagai contoh: elemen outer-wraper

      Delete

Terima Kasih Atas Komentar Anda

  • +Bagikan
  • +Admin

Kontak SosMed

.
deZige