Tạo Mẫu 3D Business Card Bằng CSS

Cập nhật: Lượt xem: 1179 [ Css ]

Hôm nay Laptrinhweb sẽ chia sẻ cho các bạn một mẫu Bussiness Card cực kỳ ấn tượng và đẹp mắt, đặc biệt là các bạn không cần phải dùng các phần mềm thiết kế hay các công cụ tạo ảnh động nào, tất cả chỉ bằng CSS.

Tạo Mẫu 3D Business Card Bằng CSS

HTML 

Đầu tiên , chúng ta cần phải có các phân tử html như sau :

<div class="wrap">
  <div class="card">
    <div class="front"></div>
    <div class="back"></div>
    <div class="top"></div>
    <div class="bottom"></div>
 
    <div class="left">
      <div class="name">Hoc Web PHP</div>
      <div class="prof">Web Developer</div>
    </div>
    <div class="right">
      <div class="logo"><i class="fa fa-cubes"></i>
        Web Developer
      </div>
      <div class="bottomInfo">
        <ul>
          <li><i class="fa fa-home"></i>Hocwebphp.Com</li>
          <li><i class="fa fa-phone"></i>01629994xxx</li>
          <li><i class="fa fa-envelope-o"></i>weptipsnet@gmail.com</li>
          <li><i class="fa fa-twitter"></i>@Hocwebphp</li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS

Và đây là toạn bộ đoạn css giúp các bạn tạo một tấm card ấn tượng :

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
 
body {
  background: #222;
  font-family:'Lato', sans-serif;
}
.wrap {
  perspective: 1200px;
}
.card {
  position: absolute;
  top: 50px; left: 0; right: 0;
  margin: auto;
  width: 20px;
  transform-style: preserve-3d;
  transition: all 2s;
  transform: rotateY(60deg) rotateX(20deg);
}
.card:hover {
  transform: rotateY(-90deg);
}
.card div {
  position: absolute;
}
.back {
  transform: translateZ(-100px);
  background: #666;
  width: 20px;
  height: 300px;
  background: linear-gradient(to right, rgba(254,255,255,1) 40%,rgba(0,0,0,1) 50%,rgba(255,255,255,1) 60%);
}
.front {
  transform: translateZ(100px);
  background: #666;
  width: 20px;
  height: 300px;
  background: linear-gradient(to right, rgba(254,255,255,1) 40%,rgba(0,0,0,1) 50%,rgba(255,255,255,1) 60%);
}
.top {
  transform: rotateX(-90deg) translateY(-100px);
  transform-origin: top center;
  width: 20px;
  height: 200px;
  background: linear-gradient(to right, rgba(254,255,255,1) 40%,rgba(0,0,0,1) 50%,rgba(255,255,255,1) 60%);
 
}
.bottom {
  transform: rotateX(90deg) translateY(100px);
  transform-origin: bottom center;
  width: 20px;
  height: 200px;
  top: 100px;
  background: linear-gradient(to right, rgba(254,255,255,1) 40%,rgba(0,0,0,1) 50%,rgba(255,255,255,1) 60%);
}
 
.right {
  left: -180px;
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
  width: 200px;
  height: 300px;
  background: #fff;
}
.logo {
  width: 80%;
  height: 100px;
  padding: 20px;
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
}
.logo i {
  display: block;
  font-size: 40px;
}
.bottomInfo {
  width: 90%;
  height: 100px;
  position: absolute;
  bottom: 10px; left: 0; right: 0;
  margin: auto;
}
.bottomInfo ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bottomInfo ul li {
  margin: 4px;
  font-size: 11px;
  text-align: center;
}
.bottomInfo ul li i {
  width: 20px;
  text-align: center;
  font-size: 12px;
}
 
.left {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
  background: #333;
  width: 200px;
  height: 300px;
  background: #fff;
  outline: 4px solid;
  outline-offset: -10px;
}
.name {
  width: 80%;
  height: 30px;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  font-weight: 100;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  position: absolute;
  top: 110px; left: 0; right: 0;
  margin: auto;
}
.prof {
  width: 80%;
  height: 30px;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 10px;
  text-align: center;
  line-height: 30px;
  position: absolute;
  top: 140px; left: 0; right: 0;
  margin: auto;
}

Rất đơn giản phải không các bạn, có thể các bạn sẽ không áp dụng gì nhiều vào trong các dự án web hay chính trang web của các bạn, nhưng đoạn css mà mình chia sẻ trong bài viết này sẽ thật sự hữu ích cho những ai muốn tìm hiểu sâu hơn về CSS3 cũng như có thể tùy biến cho những ứng dụng khác mà các bạn muốn có.

Hãy thường xuyên truy cập Hocwebphp.Com để xem được nhiều bài viết hay hơn nhé!

Chúc các bạn thành công !