Ali @mintik
8 Kasım 2020 0:22

Swanky PureDrop

Çok havalı ve sitenize renk katacak olan bir çalışma. Örneğimizde herhangi bir js  dosyası kullanılmadığı gibi ikonları da küçük boyutta png dosyalarından oluşuyor. Bu sayede sitenize fazladan framework yükleyip ikon desteklemesi için uğraşmayacaksınız.

Stil:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,300);
ul {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

input[type='radio'] {
  display: none;
}

label {
  cursor: pointer;
}

::-webkit-scrollbar {
  display: none;
}

body .genel-cerceve {
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

body {
  height: 100vh;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 12px;
}
body .genel-cerceve {
  -webkit-perspective: 600px;
          perspective: 600px;
  width: 230px;
  position: absolute;
  margin: 10px auto;
  height: 360px;
}

body .cerceve-dikey {
  width: 225px;
  height: auto;
  overflow: hidden;
  border-radius: 4px;
  background: #2a394f;
}
body .cerceve-dikey label {
  padding: 25px;
  float: left;
  height: 72px;
  border-bottom: 1px solid #293649;
  position: relative;
  width: 100%;
  color: #eff4fa;
  -webkit-transition: text-indent .15s, height .3s;
  transition: text-indent .15s, height .3s;
  box-sizing: border-box;
}
body .cerceve-dikey label img {
  margin-right: 10px;
  position: relative;
  top: 2px;
  width: 16px;
}
body .cerceve-dikey label span {
  position: relative;
  top: -3px;
}
body .cerceve-dikey label:hover {
  background: #212e41;
  border-bottom: 1px solid #2A394F;
  text-indent: 4px;
}
body .cerceve-dikey label:hover .bar {
  width: 100%;
}
body .cerceve-dikey label .bar {
  width: 0px;
  -webkit-transition: width .15s;
  transition: width .15s;
  height: 2px;
  position: absolute;
  display: block;
  background: #355789;
  bottom: 0;
  left: 0;
}
body .cerceve-dikey label .ok-isareti {
  width: 5px;
  height: 5px;
  -webkit-transition: transform 0.8s;
  -webkit-transition: -webkit-transform 0.8s;
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition: transform 0.8s, -webkit-transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-top: 2px solid white;
  border-right: 2px solid white;
  float: right;
  position: relative;
  top: 6px;
  right: 2px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
body .acilanPanel {
  position: absolute;
  display: none;
  overflow: hidden;
  left: 0;
  width: 100%;
}
body .acilanPanel li {
  width: 100%;
  opacity: 0;
  left: -100%;
  background: #15a4fa;
  padding: 25px 0px;
  text-indent: 25px;
  box-shadow: 0px 0px #126CA1  inset;
  -webkit-transition: box-shadow .3s,text-indent .3s;
  transition: box-shadow .3s,text-indent .3s;
  position: relative;
}
body .acilanPanel li:hover {
  background: #0c93e4;
  box-shadow: 3px 0px #126CA1  inset;
  -webkit-transition: box-shadow .3s linear,text-indent .3s linear;
  transition: box-shadow .3s linear,text-indent .3s linear;
  text-indent: 31px;
}
body .acilanPanel .clear {
  clear: both;
}

input[type='radio']:checked + label .acilanPanel {
  display: block;
  top: 68px;
  border-bottom: 1px solid #212e41;
}

input[type="radio"]:checked + label > .ok-isareti {
  -webkit-transition: -webkit-transform 0.8s;
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition: transform 0.8s, -webkit-transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  border-top: 2px solid #14a3f9;
  border-right: 2px solid #14a3f9;
}

input[type='radio']:checked + label {
  height: 325px;
  background: #212e41;
  text-indent: 4px;
  -webkit-transition-property: height;
  transition-property: height;
  -webkit-transition-duration: .6s;
          transition-duration: .6s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

input[type='radio']:checked + label .bar {
  width: 0;
}

input[type='radio']:checked + label li:nth-of-type(1) {
  -webkit-animation: in 0.15s 0.575s forwards;
          animation: in 0.15s 0.575s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.575s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(2) {
  -webkit-animation: in 0.15s 0.7s forwards;
          animation: in 0.15s 0.7s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.7s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(3) {
  -webkit-animation: in 0.15s 0.825s forwards;
          animation: in 0.15s 0.825s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.825s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(4) {
  -webkit-animation: in 0.15s 0.95s forwards;
          animation: in 0.15s 0.95s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.95s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@-webkit-keyframes in {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}

@keyframes in {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}

Html:

<div class='genel-cerceve'>
  <div class='cerceve-dikey'>
    <input id='Baslangic' name='radio' type='radio'>
    <label for='Baslangic'>
      <img src='dosyalar/dash.png'>
      <span>Başlangıç</span>
      <div class='ok-isareti'></div>
      <div class='bar'></div>
      <div class='acilanPanel'>
        <ul>
          <li>Araçlar</li>
          <li>Raporlar</li>
          <li>Analiz</li>
          <li>Etkinlik</li>
        </ul>
      </div>
    </label>
    <input id='Satislar' name='radio' type='radio'>
    <label for='Satislar'>
      <img src='dosyalar/del.png'>
      <span>Satışlar</span>
      <div class='ok-isareti'></div>
      <div class='bar'></div>
      <div class='acilanPanel'>
        <ul>
          <li>Yeni Satışlar</li>
          <li>Eski Satışlar</li>
          <li>Satış Raporları</li>
          <li>Gönderiler</li>
        </ul>
      </div>
    </label>
    <input id='Mesajlar' name='radio' type='radio'>
    <label for='Mesajlar'>
      <img src='dosyalar/mess.png'>
      <span>Mesajlar</span>
      <div class='ok-isareti'></div>
      <div class='bar'></div>
      <div class='acilanPanel'>
        <ul>
          <li>Gelen Kutusu</li>
          <li>Giden Kutusu</li>
          <li>Gönderilenler</li>
          <li>Arşiv</li>
        </ul>
      </div>
    </label>
    <input id='uyeler' name='radio' type='radio'>
    <label for='uyeler'>
      <img src='dosyalar/users.png'>
      <span>Üyeler</span>
      <div class='ok-isareti'></div>
      <div class='bar'></div>
      <div class='acilanPanel'>
        <ul>
          <li>Yeni Üyeler</li>
          <li>Üye Grupları</li>
          <li>İzinler</li>
          <li>Şifreler</li>
        </ul>
      </div>
    </label>
    <input id='ayarlar' name='radio' type='radio'>
    <label for='ayarlar'>
      <img src='dosyalar/set.png'>
      <span>Ayarlar</span>
      <div class='ok-isareti'></div>
      <div class='bar'></div>
      <div class='acilanPanel'>
        <ul>
          <li>Veritabanları</li>
          <li>Tasarım</li>
          <li>Kullanıcı değiştir</li>
          <li>Çıkış yap</li>
        </ul>
      </div>
    </label>
  </div>
</div>

 

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla