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

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.

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 {
  awidth: 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: Css

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