Search Bar Keren dengan HTML Jade

SAKJANESIP - Di postingan kali ini saya akan membahas cara membuat form pencarian with HTML Jade dengan mudah. Kode yang sangat ringan dan impresnya bagus sekali.

Simpel Search Bar

Search Bar Keren dengan HTML Jade

SCSS

.search
  input.search__input(placeholder="Search")
  button.fa.fa-search.search__button  

HTML

$background-color: #EAEDF2;
$button-color: #5AEED1;
$button-text-color: #fff;
$search-height: 50px;
$search-font-size: 14px;

// SEARCH BAR
.search {
  box-shadow: 0 20px 10px -10px rgba(200, 200, 200, .5);
  display: inline-block;
}

.search__input {
  border: 0;
  outline: 0;
  line-height: $search-height;
  font-size: $search-font-size;
  padding: 0 ($search-height - $search-font-size)/2;
  float: left;
}

.search__button {
  box-shadow: -10px 0 10px -5px rgba($button-color, .5);
  color: $button-text-color;
  background-color: $button-color;
  width: $search-height;
  line-height: $search-height;
  text-align: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  outline: 0;
  transition: box-shadow .3s ease-out;
  
  &:active {
    box-shadow: -10px 0 10px -10px rgba($button-color, .5);
  }
}

// lAMAN Tengah
html {
  background-color: $background-color;
  display: table;
  width: 100%;
  height: 100%;
  font-family: arial;
}
body {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

• DEMO

Demikian cara membuat Search Bar Keren dengan HTML Jade, Semoga bermanfaat.

Cara Membuat Cube Animation dengan CSS

SAKJANESIP - Cube animation itu apa sih kak? Cube adalah kota sedangkan animation adalah animasi, jadi ya kotak animasi, hehe. Langsung saja ya ke TKP.

Cube Animation

Silahkan di kreatifitaskan kode di bawah ini dengan keinginan sobat, karena ini masih beta. So jangan di rusak tapi dikembangkan ya.

Cara Membuat Cube Animation dengan CSS

.hero 

  .hero__title create by Zhuberzhu

  .cube

  .cube

  .cube

  .cube

  .cube

  .cube

Silahkan taruh kode di atas di bagian HTML Jade.

@import url('https://fonts.googleapis.com/css?family=Montserrat:700');

// cb BY Zhuberzhu

.hero {

  background-color: #0040C1;

  position: relative;

  height: 100vh;

  overflow: hidden;

  font-family: 'Montserrat', sans-serif;

}



.hero__title {

  color: #fff;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 50px;

  z-index: 1;

}



.cube {

  position: absolute;

  top: 80vh;

  left: 45vw;

  width: 10px;

  height: 10px;

  border: solid 1px darken(#0040C1, 8%);

  transform-origin: top left;

  transform: scale(0) rotate(0deg) translate(-50%, -50%);

  animation: cube 12s ease-in forwards infinite;

  

  &:nth-child(2n) {

    border-color: lighten(#0040C1, 10%);

  }

  

  &:nth-child(2) {

    animation-delay: 2s;

    left: 25vw;

    top: 40vh;

  }

  

  &:nth-child(3) {

    animation-delay: 4s;

    left: 75vw;

    top: 50vh;

  }

  

  &:nth-child(4) {

    animation-delay: 6s;

    left: 90vw;

    top: 10vh;

  }

  

  &:nth-child(5) {

    animation-delay: 8s;

    left: 10vw;

    top: 85vh;

  }

  

  &:nth-child(6) {

    animation-delay: 10s;

    left: 50vw;

    top: 10vh;

  }

}



@keyframes cube {

  from {

    transform: scale(0) rotate(0deg) translate(-50%, -50%);   

    opacity: 1;

  }

  to {

    transform: scale(20) rotate(960deg) translate(-50%, -50%); 

    opacity: 0;

  }

}

Buat kode di atas ini silahkan taruh di file SCSS. Selamat mencoba.

• DEMO