Tạo mẫu logo stackoverflow với CSS3

Tranh thủ một chút ít thời gian, mình sẽ chia sẻ cho các bạn thêm một đoạn css3 giúp các bạn tạo một mẫu logo rất nổi tiếng mà bất kì ai học lập trình cũng đều biết, đó là logo của trang stackoverflow. Qua mẫu logo này, mình tin chắc các bạn sẽ học cách sử dụng css3 để thiết kế những hình vẽ theo ý muốn của mình. Logo mà chúng ta sẽ làm giống như hình bên dưới.

HTML

Đoạn html markup cho logo này như sau :

<div id="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

Và đây là toàn bộ đoạn css giúp các bạn tạo được logo như trong ảnh.

body {
	background: #444;
}

#box {
	awidth: 100px; height: 50px;
	
	border: 10px solid #F67A00;
	border-top: 0;
	
	margin: 150px auto 0;
	
	position: relative;
}

/* the slabs now */

#box div {
	position: absolute;
	left: 15px; right: 15px;
	background: #F67A00;
	height: 10px;
	
	/* transitions */
	transition: all 0.2s ease-in;
}

/* Now we'll select each slab and position
them with a bit of transformation when needed. */

#box :nth-child(1) {
	bottom: 10px;
}

#box :nth-child(2) {
	bottom: 30px;
	
	transform: rotate(5deg);
}

#box :nth-child(3) {
	bottom: 50px;
	
	transform: rotate(15deg) translate(3px, -4px);
}

#box :nth-child(4) {
	bottom: 70px;
	
	transform: rotate(25deg) translate(9px, -10px);
}

#box :nth-child(5) {
	bottom: 90px;
	
	transform: rotate(45deg) translate(13px, -27px);
}

#box :nth-child(6) {
	bottom: 110px;
	
	transform: rotate(70deg) translate(11px, -54px);
}

/* just a bit of animation on hover now. */

#box:hover div {
	transform: rotate(0deg) translate(0,0);
}

Chúc các bạn cuối tuần vui vẻ !

Chuyên Mục: Css

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