CSS | 雲(cloud)を作成する方法

CSS 図形デザイン,CSS

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

雲の作り方

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;
}

丸い部分のbox-shadowについて

  • 指定する値は左から「x座標」「y座標」「ぼかし具合」「大きさ」
  • 最初の指定が再全面、最後の指定が再背面になる
  • 大きさはwidth、heightに依存する

CSS 図形デザイン,CSS

Posted by Yousuke.U