Home » CSS3 應用

[CSS3]用 CSS3 畫圖示 - 雲朵

[ 日期： | 瀏覽：10,377 | 迴響：搶沙發 ]
範例 1

CSS3 除了用來裝飾網頁元素之外，其實如果你有天份的話，學學之前的日本神人透過畫出個哆啦a夢也不是什麼大問題哩。當然啦~羅馬不是一天造成的，現在要立馬畫出哆啦a夢是太強人所難了，所以我們就從最基本的圖示來練習吧！

筆者要利用 border-radius 圓角效果來將各位怎樣畫出一朵雲。首先放置個 div 區塊：

檢視原始碼 HTML
1
2
3

<body>
	<div class="cloud"></div>
</body>

先將 div 區塊變成一個左右邊為半圓的矩形區塊：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9

.cloud {
	width: 360px;
	height: 120px;
	background-color: #fff;
	border: 3px solid #ccc;
	border-radius: 60px;
	position: relative;
	margin: 200px auto 0;
}

筆者將邊框加粗是為了讓各位能方便看出是如何構成雲的。
css3-draw-cloud-0

接著利用 ::after 擬元素(Pseudo-elements) 來產生左上方的小雲朵部份：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12

.cloud::after{
	content: '';
	position: absolute;
	top: -60px;
	left: 50px;
	width: 120px;
	height: 120px;
	background-color: #fff;
	border: 3px solid #ccc;
	border-radius: 50%;
	z-index: -1;
}

這樣就會變成了類似坦克車的樣子(XD)：
css3-draw-cloud-1

再來使用 ::before 來產生右上方的小雲朵部份：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12

.cloud::before{
	content: '';
	position: absolute;
	top: -90px;
	right: 50px;
	width: 180px;
	height: 180px;
	background-color: #fff;
	border: 3px solid #ccc;
	border-radius: 50%;
	z-index: -1;
}

這兩個小雲朵誰大誰小都可以，就依各人的"美感"去設計了：
css3-draw-cloud-2

剛好現在窗外的天氣灰灰的，所以筆者將雲朵的顏色改成灰的，並將雲朵的邊框及 CSS 調整一下：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

.cloud {
	width: 360px;
	height: 120px;
	background-color: #f2f2f2;
	border: 3px solid #ccc;
	border-top: none;
	border-radius: 60px;
	position: relative;
	margin: 200px auto 0;
}
.cloud::before, .cloud::after {
	content: '';
	position: absolute;
	background-color: #f2f2f2;
	border: 3px solid #ccc;
	border-radius: 50%;
	z-index: -1;
}
.cloud::after {
	top: -50px;
	left: 50px;
	width: 120px;
	height: 120px;
	border: none;
	border-left: 3px solid #ccc;
}
.cloud::before {
	top: -90px;
	right: 50px;
	width: 180px;
	height: 180px;
}

嘿嘿~一躲髒西西的雲朵就變出來了：
css3-draw-cloud-3

各位同學你也可以將全部的邊框都拿掉，再修改成其它背景顏色或是漸層顏色來做效果，這部份就請自己動手修改囉！

See the Pen [CSS3]用 CSS3 畫圖示 - 雲朵 by abgne.tw (@abgne-tw) on CodePen

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響