CSS | 雲（cloud）を作成する方法

2021-06-17CSS 図形デザイン,CSS

CSSでシンプルな雲を作成する方法を紹介しています。

1. 雲の作り方
- 1.1. 丸い部分のbox-shadowについて

雲の作り方

box-shadowプロパティを使った雲の作成方法です。

See the Pen CSS | Cloud by yochans (@yochans) on CodePen.

<div class="container">
	<div class="cloud-1"></div>
</div>

サンプルでは、疑似要素を利用して下部分（before）と上に丸い部分を2箇所とその影（after）で雲を表現しています。

丸い部分は、いくつでも増やす事が可能で変形や配色、配置も自由にできますので、当方はどうしても苦手で安易なやつに逃げていますが、上手に配置できれば様々な雲の形を作成できるかと思います。

「#d3d3d3」で指定しているコードは影の部分です。

.cloud-1 {
	position: relative;
	top: 80px; /* 雲の位置 */
	left: 80px; /* 雲の位置 */
}

/* 下の部分 */
.cloud-1::before {
	content: "";
	position: absolute;
	left: -35px; /* 位置 */
	width: 180px; /* 横幅 */
	height: 50px; /* 高さ */
	background: #FFF; /* 色 */
	border-radius: 20px; /* 丸み */
	box-shadow: #d3d3d3 0px 1px 0 2px; /* 影 */
}

 /* 丸い部分 */
.cloud-1::after {
	content: "";
	position: absolute;
	width: 20px; /* 基本サイズ */
	height: 20px; /* 基本サイズ */
	background: #FFF; /* 色 */
	border-radius: 50%;
	box-shadow:
		#FFFF 75px -20px 0 40px,
		#d3d3d3 74px -20px 0 40px,
		#d3d3d3 76px -20px 0 40px,
		#FFFF 2px -10px 0 30px,
		#d3d3d3 0px -10px 0 30px;
}