Thiết kế hình đám mây đơn giản bằng CSS3

Có lẽ khi đọc tiêu đề, sẽ có nhiều bạn lầm tưởng mình đã post lộn chủ đề. Bởi vì từ trước đến nay việc thiết kế những hình ảnh như thế này chỉ dành cho những phần mềm tạo ảnh chuyên nghiệp như Photoshop hay những phần mềm tạo ảnh khác, chứ định dạng bằng CSS thì làm sao có thể được.

Xem Demo | Download

Tuy nhiên với sự ra đời của CSS3, cùng với nhiều thuộc tính mới mà nó mang lại, thì việc thiết kế ra những hình đám mây như trong bài viết này thì hoàn toàn có thể được, thậm chí rất đơn giản nữa là đằng khác.  Chỉ với một thẻ html cùng với sự trợ giúp của các lựa chọn :after và :before. Chúng ta có thể định hình được những hình vẽ nhất định. Nếu các bạn vẫn chưa tin thì cùng mình thực hiện từng bước như sau :

Bước 1 : HTML

Chúng ta chỉ cần đoạn html nhỏ sau đây là có thể tạo được hình đám mây.

<div id = "cloud"><span class='shadow'></span></div>

Bước 2 : Định dạng CSS

Các bạn copy toàn bộ đoạn CSS bên dưới để tạo hình đám mây.

#cloud {
	awidth: 350px; height: 120px;

	background: #f2f9fe;
	background: linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
	background: -webkit-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
	background: -moz-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
	background: -ms-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
	background: -o-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);

	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;

	position: relative;
	margin: 120px auto 20px;
}

#cloud:after, #cloud:before {
	content: ';
	position: absolute;
	background: #f2f9fe;
	z-index: -1
}

#cloud:after {
	awidth: 100px; height: 100px;
	top: -50px; left: 50px;

	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
}

#cloud:before {
	awidth: 180px; height: 180px;
	top: -90px; right: 50px;

	border-radius: 200px;
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
}

.shadow {
	awidth: 350px;
	position: absolute; bottom: -10px;
	background: #000;
	z-index: -1;

	box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);

	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}

Xong rồi đó các bạn, thử kiểm tra kết quả xem điều mình nói ở phần mở đầu có đúng không ? Nếu các bạn có bất kì câu hỏi nào liên quan đến bài viết, thì đừng ngần ngại để lại lời nhắn dưới dạng comments nhé.

Chúc các bạn thành công !

Chuyên Mục: Css

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