CSS3 Logo : Tập tành với logo ABN AMRO

Nếu các bạn đang muốn tìm kiếm một mẫu logo đơn giản để tự thiết kế bằng CSS3, thì có lẽ logo của hãng ABN AMRO sẽ rất phù hợp cho các bạn. Chỉ việc sử dụng background gradient và thuộc tính transform có trong CSS3, các bạn có thể thiết kế logo này chỉ trong vài nốt nhạc.

Xem Demo | Download

HTML

Trước hết chúng ta cần tạo khung html cho việc thiết kế logo như sau :

<div id="abnamro">
    <div class="canvas">
        <div class="icon">
        </div>
    </div>
</div>

CSS

Và đây là toàn bộ định dạng css giúp các bạn tạo hình nên logo ABN AMRO

#abnamro .canvas {

    background:    -moz-radial-gradient(50% 50%, circle, #ddd 50%, #f2f2f2 50%);
    background:     -ms-radial-gradient(50% 50%, circle, #ddd 50%, #f2f2f2 50%);
    background:      -o-radial-gradient(50% 50%, circle, #ddd 50%, #f2f2f2 50%);
    background: -webkit-radial-gradient(50% 50%, circle, #ddd 50%, #f2f2f2 50%);
    background:         radial-gradient(50% 50%, circle, #ddd 50%, #f2f2f2 50%);
    background-size: 4px 4px;
}
#abnamro .icon {
	background: #007d78;
	height: 125px;
	left: 195px;
	top: 62px;
	awidth: 150px;
}
#abnamro .icon:after {
	background:    -moz-linear-gradient(45deg, #007d78 50%, #ff9300 50%);
    background:     -ms-linear-gradient(45deg, #007d78 50%, #ff9300 50%);
    background:      -o-linear-gradient(45deg, #007d78 50%, #ff9300 50%);
    background: -webkit-linear-gradient(45deg, #007d78 50%, #ff9300 50%);
    background:         linear-gradient(45deg, #007d78 50%, #ff9300 50%);
	content: "";
	display: block;
	height: 106px;
	left: 22px;
	position:absolute;
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
	top: 72px;
	awidth: 106px;

}

/* general styles */
.canvas {
    display: block;
    overflow: hidden;
    position: relative;
    top: 0px;
    text-indent:-9999px;
    z-index: 10;
	height: 304px;
    awidth:540px;
}
.icon, .icon * {
    display: block;
    position: absolute;
}

Mong rằng, qua mẫu logo này, có thể các bạn có thể tìm thấy điều gì đó cho những mẫu thiết kế của mình sau này, và nếu như muốn sử dụng lại logo này, các bạn chỉ cần copy và dán nó vào trong các mẫu thiết kế của mình là xong.

Chuyên Mục: Css

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