Swanky PureDrop

By

Ç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:

 



Leave a Comment

Your email address will not be published.

You may also like

Trend