Thêm mẫu logo Adidas ấn tượng với CSS3

27/07/2017

Tranh thủ chút ít thời gian mình sẽ chia sẻ cho các bạn một đoạn css3 giúp các bạn tạo các hình thể và sắp đặt các hình này theo ý muốn. Cụ thể trong bài viết này là mẫu logo adidas chính hãng. Trước đây mình đã giới thiệu cho các bạn bài viết Tự tay thiết kế logo Adidas bằng CSS3 , và logo mà mình giới thiệu sau đây sẽ có dáng vẻ hoàn toàn khác.

Thêm mẫu logo Adidas ấn tượng với CSS3

Xem Demo | Download

HTML

Cấu trúc html sau đây sẽ đại diện cho 3 đường kẻ và dòng chữ adidas quen thuộc.

<div class="barre-1"></div>
<div class="barre-2"></div>
<div class="barre-3"></div>
<div class="barre-blanche"><p>adidas</p></div>

CSS

/* Maintenant le CSS */
div {
  width: 50px;
  background: black;
  display: inline-block;
  margin-right: 15px;
}

.barre-1 {
  height: 50px;
  transition: transform;
  transform: rotate(-30deg);
  position: relative;
  top: 11px;
  left: 100px;
}

.barre-2 {
  height: 100px;
  transition: transform;
  transform: rotate(-30deg);
  position: relative;
  top: 14px;
  left: 100px;
}

.barre-3 {
  height: 150px;
  transition: transform;
  transform: rotate(-30deg);
  position: relative;
  top: 17px;
  left: 100px;
}

.barre-blanche {
  position: absolute;
  top: 45px;
  left: 200px;
  transition: transform;
  transform: rotate(90deg);
  background: white;
  height: 250px;
}

p {
  transition: transform;
  transform: rotate(-90deg);
  font-family: "Questrial";
  font-weight: 900;
  font-size: 4.8em;
  position: absolute;
  top: 27px;
  left: -95px;
}

 

Chuyên Mục:

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

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !