Card Stack – Üst üste sıralanmış kareler

By

stack

Css3 ile hazırlanmış güzel bir kart örneği. Lane Olson tarafından hazırlanmış  olan bu örnek üst üste  yığılmış  üç  adet karttan oluşuyor. Mouse  ile  kartların üzerine geldiğinizde kartlar  açılıyor  ve mouse  hangi kartın üstünde ise o kart  biraz  büyüyüp  diğer  kartların önünde  görünüyor.

Kullanım

Css : 

 .card1 {
  left: 50%;
  margin-left: -13em;
  z-index: 10;
  transform: rotatez(-3deg);
  -moz-transform: rotatez(-3deg);
  -webkit-transform: rotatez(-3deg);
  transition: all 0.5s ease-out 0.3s;
}
.card2 {
  left: 50%;
  margin-left: -12em;
  z-index: 9;
  transition: all 0.5s ease-out 0.15s;
}
.card3 {
  left: 50%;
  margin-left: -11em;
  z-index: 8;
  transform: rotatez(3deg);
  -webkit-transform: rotatez(3deg);
  -moz-transform: rotatez(3deg);
  transition: all 0.5s ease-out;
}

body {
  background: #666666;
  font-family: Georgia;
  font-size: 0.75em;
  line-height: 1.5em;
}
h1 {
  font-family: Helvetica, Arial, sans-serif;
}
.card-container {
  position: relative;
  width: 18em;
  margin: 0 auto;
}
.card {
  position: absolute;
  top: 0;
  background: #fff;
  box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.65);
  border-radius: 0em;
  padding: 2em;
  width: 20em;
  max-width: 20em;
  -webkit-backface-visibility: hidden;
}
.card a {
  margin: 0em -2em;
  display: block;
  width: 120%;
  max-width: 24em;
  position: relative;
  line-height: 1em;
}
.card a:after {
  content: "";
  position: absolute;
  left: 500;
  right: 500;
  top: 0px;
  bottom: 1px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.card h1 {
  margin-top: 0;
}
.card p {
  line-height: 1.75em;
  margin-bottom: 0;
}
.card-container:hover .card,
.card-container.hover .card {
  opacity: 0.9;
  transform: scale(0.95);
  -webkit-transform: scale(0.95);
  margin-left: -12em;
}
.card-container:hover .card:hover,
.card-container.hover .card:hover,
.card-container:hover .card.hover,
.card-container.hover .card.hover {
  opacity: 1;
  z-index: 11;
  transform: scale(1);
  -webkit-transform: scale(1);
}
.card-container:hover .card1,
.card-container.hover .card1 {
  transform: rotatez(0deg) scale(0.95);
  -webkit-transform: rotatez(0deg) scale(0.95);
}
.card-container:hover .card2,
.card-container.hover .card2 {
  left: 0%;
}
.card-container:hover .card3,
.card-container.hover .card3 {
  left: 100%;
}
img {
  max-width: 100%;
}

 Html : 

    

Card 1

This was the first period where evidence of dinosaurs is present, though they were not there at the very beginning. It began right after the Permian mass extinction which wiped out 90% of all life and marks the beginning of the Mesozoic Era.

Card 2

This was the first period where evidence of dinosaurs is present, though they were not there at the very beginning. It began right after the Permian mass extinction which wiped out 90% of all life and marks the beginning of the Mesozoic Era.

Card 3

This was the first period where evidence of dinosaurs is present, though they were not there at the very beginning. It began right after the Permian mass extinction which wiped out 90% of all life and marks the beginning of the Mesozoic Era.

 



Leave a Comment

Your email address will not be published.

You may also like

Trend