Tạo bảng hiệu “Last Vegas” bằng CSS3

Có bạn nào đã từng đến “Last Vegas” chưa ? nếu đã từng, thì các bạn sẽ thấy nơi đây đúng là thiên đường trên hạ giới. Hôm nay chúng ta sẽ không phải là học cách tạo biển hiệu, mà chúng ta sẽ học cách mà các thuộc tính trong CSS giúp chúng ta sắp xếp cũng như nó có những khả năng nào. Thông qua bài viết này, các bạn nào mới học về CSS sẽ có thể nắm vững được những kiến thức cơ bản nhất.

Xem Demo | Download

HTML

Các bạn tạo bảng hiệu theo cấu trúc html như sau :

<main>
  <div class="sign"></div>
  <div class="text">
    <div class="welcome">
      <span>W</span>
      <span>E</span>
      <span>L</span>
      <span>C</span>
      <span>O</span>
      <span>M</span>
      <span>E</span>
    </div>
    <div class="to">
      <span>TO</span>
    </div>
    <div class="fab">Fabulous</div>
    <div class="las">LAS VEGAS</div>
    <div class="nv">NEVADA</div>
  </div>
</main>

CSS

Và đây là toàn bộ đoạn css giúp chúng ta sắp xếp từng câu chữ trong bảng hiệu.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url(https://fonts.googleapis.com/css?family=Mr+Dafoe:300,400);

html {
  background: #4889BF center/cover no-repeat fixed;
}
.sign {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg) skew(20deg, 20deg);
  awidth: 350px;
  height: 350px;
  background: #EFEFEF;
  box-shadow: inset 0 0 0 10px #ffCB3A;
  border: 5px dotted #E6D1b2;
  border-top-left-radius: 70px;
  border-bottom-right-radius: 70px;
}
.text {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
  font-family: Helvetica, sans-serif;
  color: #0261DF;
}
.welcome {
  display: flex;
}
.welcome span {
  display: inline-block;
  awidth: 32px;
  height: 30px;
  padding: 15px;
  font-size: 30px;
  font-weight: bold;
  color: #FF020D;
  background: white;
  border: 1px solid #DEC08C;
  border-radius: 50%;
  box-shadow: 0px 10px 5px #5D646E;
}
.text .to {
  position: relative;
  top: 28px;
  left: -140px;
  family: 'Open Sans';
  font-size: 26px;
  font-weight: 400;
}
.text .fab {
  position: relative;
  top: -14px;
  left: 5px;
  font-family: 'Mr Dafoe';
  font-size: 64px;
  line-height: 50px;
  letter-spacing:5px;
}
.text .las {
  position: relative;
  top: -20px;
  left: 8px;
  font-size: 66px;
  font-weight: 600;
  letter-spacing: 5px;
  color: red;
}
.text .nv {
  position: relative;
  top: -25px;
  left: 0;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 6px;
}

Chúc các bạn có thể hiểu và học thành công về CSS nói riêng và thiết kế web nói chung.

Chuyên Mục: Css

Bài viết được đăng bởi webmaster