04/10/2018, 20:11

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 CS S3 , và logo mà ...

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 {
  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;
}
Tags: css3 css3 logos

Chuyên Mục: Css

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

Bài liên quan

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 CS S3 , và logo mà ...

Trần Trung Dũng viết 3 tuần trước

Tùy chỉnh thứ tự mẫu danh sách ấn tượng hơn với CSS3

Việc sắp xếp nội dung theo thứ tự thì hầu như trang web nào cũng sử dụng, tuy nhiên những mẫu định dạng mặc định của nó khá thô sơ và không mấy ấn tượng. Trong bài viết này, chúng ta sẽ thử sử dụng một vài thuộc tính có trong CSS3 để ” hack ” cho nó đẹp hơn xem sao. Xem Demo | ...

Tạ Quốc Bảo viết 3 tuần trước

Thiết kế mẫu đồng hồ đếm ngược cực ấn tượng với CSS3

Không có cách học nào tốt hơn là tự bắt tay vào làm và từ đó chúng ta sẽ học và nhớ rất kỹ những gì mà chúng ta đã làm. Để thêm sự sáng tạo cho các bạn khi thiết kế web cũng như trang trí cho blog của mình. Hôm nay , mình sẽ chia sẻ cho các bạn một mẫu thiết kế đồng hồ đếm ngược , rất thích hợp cho ...

Trần Trung Dũng viết 3 tuần trước

Mẫu giỏ hàng ấn tượng với kiểu Drop Down lạ mắt

Mẫu giỏ hàng (shopping cart) mà mình chia sẻ cho các bạn trong bài viết này sẽ giúp các bạn tiết kiệm không gian thiết kế cho web, đồng thời cũng tạo sự tiện dụng cho khách hàng dễ dàng quan sát sản phẩm mà họ đã mua trên web và từ đó nâng cao khả năng bán hàng trên website của các bạn. Xem ...

Vũ Văn Thanh viết 3 tuần trước

Trình diễn sản phẩm ấn tượng với CSS3 và Impress.js

Bạn đang cần một hiệu ứng giới thiệu sản phẩm ấn tượng với khách hàng ? Hay đơn giản là bạn cần chỉnh sửa lại giao diện web nhằm thu hút người dùng và tăng doanh số bán hàng của mình. Nếu các bạn vẫn chưa tìm ra giải pháp cho riêng mình, thì thử dùng hiệu ứng trình diễn sản phẩm mà mình giới thiệu ...

Tạ Quốc Bảo viết 3 tuần trước
0