Xem bài viết Tạo Logo Tuyệt Đẹp Bằng CSS

Tạo Logo Tuyệt Đẹp Bằng CSS

Aug 05, 2012Html / Css
Bằng cách sử dụng các thuộc tính đã biết và cũng rất là quen thuộc trong thiết kế web như: border-radius, position,.. thì mình có thể tạo được 1 logo rất là đẹp mà chỉ cần các bước đơn giản và một vài dòng code nhỏ.

1. HTML

Phần HTML mình dùng 1 thẻ div lớn bao quanh bên ngoài và 5 thẻ div nhỏ bên trong để làm các thành phần cho logo.

2. CSS

Phần CSS này mình dùng thuộc tính positon của thẻ div cha để định vị các thẻ div con bên trong. Mỗi thẻ div bên trong mình cho 1 màu sắc và vị trí khác nhau và chúng lun có border-radius giống nhau.
	.logo 		{ width: 90px; height:100px; position: relative; margin: 0 auto; }
	.logo > div { float: left; width: 15%;  margin: 2.5%; border-radius: 6px; position: relative; }
	.p1			{ background: #EB645F; height: 40%; top: 30%; }
	.p2			{ background: #E99B5D; height: 70%; top: 15%; }
	.p3			{ background: #EEE37A; height: 100%; }
	.p4			{ background: #7CCB20; height: 70%; top: 15%; }
	.p5			{ background: #669DB6; height: 40%; top: 30%; }
Và đây là kết quả của mình:
Tao-logo-tuyet-dep-bang-css-2cwebvn

Kết luận

Bạn có thích bài viết này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, xin cảm ơn!

Mọi ý kiến đóng góp hay thắc mắc bạn có thể gởi về cho chúng tôi qua form bình luận phía dưới. Cám ơn bạn đã ghé thăm web mình và xin chúc bạn thành công!

Nguồn: 2Cweb.vn

 

Leave a Comments