CSSでぞうを作ってみました（ぞう Advent Calendar 2015 2日目）

  • Posted on
  • Category : Blog
CSSでぞうを作ってみました（ぞう Advent Calendar 2015 2日目）

CSSでぞうを作ってみました :)　恥ずかしながら要素ひとつで作るみたいなスキルもなく、記述もごちゃごちゃした感じになってしまいましたが、いずれも画像は使用せずにCSSのみで作っています。

これは「ぞう Advent Calendar 2015」の2日目のエントリーで、昨日はaiooxxさんの「おりがみぞう　#ぞう Advent Calendar 2015 – やしらいふ」でした。
色画用紙とマスキングテープを使って可愛らしいぞうを作られていて、自分でもやってみたいという方は作り方の動画も掲載しているのでそちらを参考にできます :)

“なんでもありだぞう”ということで、2日目の今日は冒頭にも書いたようにCSSのみで3種類のぞうを作ってみました。
それぞれがどのパーツでどのスタイルが適用されているかは、Chromeのデベロッパーツールなどを使ってDEMO内のぞうを見てもらうとわかりやすいと思います。

1. ぞう Twitter絵文字風

特に細かいところとか手を抜いちゃってますが、Twitterの絵文字にあるぞうをCSSで再現してみたものです。
HTMLとCSSは下記のようになっています。

HTML

<div class="elephant">
	<div class="face">
		<div class="nose"></div>
	</div>
	<div class="foot"></div>
</div>

CSS

div,
div::after,
div::before {
	position: absolute;
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
div::after,
div::before {
	content: '';
}
.elephant {
	position: relative;
	z-index: 2;
	width: 120px;
	height: 80px;
	margin: 0 auto;
	background-color: #99aab5;
	border-radius: 0 52px 15px 20px;
}
.elephant::before {
	top: 65px;
	left: 0;
	width: 115px;
	border-top: 42px solid #99aab5;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}
.elephant::after {
	top: 60px;
	left: 114px;
	width: 9px;
	height: 38px;
	background-color: #99aab5;
	border-radius: 0 0 4px 4px;
	-webkit-transform: rotate(-8deg);
	transform: rotate(-8deg);
}
.elephant .face {
	top: -10px;
	left: -26px;
	z-index: 2;
	width: 90px;
	height: 82px;
	background-color: #66757f;
	border-radius: 37px 37px 40px 40px;
}
.elephant .face::before {
	top: 0;
	left: 0;
	width: 88px;
	height: 75px;
	background-color: #99aab5;
	border-radius: 35px 30px 35px 0;
}
.elephant .face::after {
	top: 40px;
	left: 20px;
	width: 14px;
	height: 14px;
	background-color: #333;
	border-radius: 50%;
}
.elephant .face .nose {
	top: 74px;
	left: 0;
	width: 25px;
	height: 55px;
	background-color: #99aab5;
	border-radius: 0 0 0 25px;
}
.elephant .face .nose::before {
	top: 0;
	left: 23px;
	width: 9px;
	height: 8px;
	background-color: #99aab5;
	border-radius: 0 0 0 9px;
}
.elephant .face .nose::after {
	top: 42px;
	left: 15px;
	width: 16px;
	height: 15px;
	background-color: #99aab5;
	border-radius: 0 0 10px 30px;
	-webkit-transform: rotate(-37deg);
	transform: rotate(-37deg);
}
.elephant .foot,
.elephant .foot::after {
	width: 40px;
	height: 20px;
	background-color: #99aab5;
	border-radius: 0 0 10px 10px;
}
.elephant .foot {
	top: 107px;
	left: 10px;
}
.elephant .foot::after {
	top: 0;
	left: 55px;
}

2. ぞう design by ƹɒT

こちらは ƹɒT さんがデザインしたぞうのイラストをCSSで再現してみたものです。
HTMLとCSSは下記のようになっています。

HTML

<div class="elephant">
	<div class="face">
		<div class="eye"></div>
		<div class="nose"><div></div></div>
	</div>
</div>

CSS

div,
div::after,
div::before {
	position: absolute;
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
div::after,
div::before {
	content: '';
}
.elephant {
	position: relative;
	width: 130px;
	margin: 0 auto;
}
.elephant::before,
.elephant::after {
	top: -15px;
	width: 95px;
	height: 90px;
	background-color: #727071;
	border-radius: 60px/40px 40px 70px 70px;
}
.elephant::before {
	left: -52px;
	-webkit-transform: rotate(-60deg);
	transform: rotate(-60deg);
}
.elephant::after {
	right: -52px;
	-webkit-transform: rotate(60deg);
	transform: rotate(60deg);
}
.elephant .face {
	z-index: 2;
	width: 130px;
	height: 120px;
	background-color: #ddd;
	border-radius: 60px/70px 70px 50px 50px;
}
.elephant .face::before,
.elephant .face::after {
	top: 88px;
	width: 13px;
	height: 13px;
	background-color: rgba(217, 143, 176, .4);
	border-radius: 50%;
}
.elephant .face::before {
	left: 23px;
}
.elephant .face::after {
	left: 93px;
}
.elephant .face .eye::before,
.elephant .face .eye::after {
	top: 72px;
	width: 12px;
	height: 15px;
	background-color: #3e3a39;
	border-radius: 10px/10px 10px 14px 14px;
}
.elephant .face .eye::before {
	left: 34px;
	-webkit-transform: rotate(-40deg);
	transform: rotate(-40deg);
}
.elephant .face .eye::after {
	left: 84px;
	-webkit-transform: rotate(40deg);
	transform: rotate(40deg);
}
.elephant .face .nose {
	top: 113px;
	left: 45px;
	width: 40px;
	height: 27px;
	background-color: #ddd;
	border-radius: 0 0 10px 50px;
}
.elephant .face .nose::after {
	top: 3px;
	left: 35px;
	width: 30px;
	height: 22px;
	background-color: #ddd;
	border-radius: 0 15px 30px 0;
	-webkit-transform: rotate(-8deg);
	transform: rotate(-8deg);
}
.elephant .face .nose div,
.elephant .face .nose div::before,
.elephant .face .nose div::after {
	height: 10px;
	border-top: 2px solid #afafaf;
	border-radius: 50%;
}
.elephant .face .nose div {
	top: -12px;
	left: 6px;
	z-index: 2;
	width: 28px;
}
.elephant .face .nose div::before {
	top: 10px;
	left: 8px;
	width: 20px;
	-webkit-transform: rotate(-30deg);
	transform: rotate(-30deg);
}
.elephant .face .nose div::after {
	top: 15px;
	left: 25px;
	width: 14px;
	-webkit-transform: rotate(-70deg);
	transform: rotate(-70deg);
}

3. ぞう original

最後は自分で考えてみた（よく見る感じですが…）ぞうで、簡単にですが瞬きするアニメーションもつけてみました。
HTMLとCSSは下記のようになっています。

HTML

<div class="elephant">
	<div class="face">
		<div class="eye"></div>
		<div class="nose"><div></div></div>
	</div>
</div>

CSS

div,
div::after,
div::before {
	position: absolute;
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
div::after,
div::before {
	content: '';
}
.elephant {
	position: relative;
	top: -35px;
	width: 100px;
	height: 96px;
	margin: 0 auto;
	background-color: #ccc;
	border-radius: 48px 48px 0 0;
}
.elephant::before,
.elephant::after {
	top: 0;
	width: 52px;
	height: 90px;
	background-color: #ccc;
}
.elephant::before {
	left: -47px;
	border-radius: 36px 20px 0 36px;
	-webkit-transform: rotate(10deg);
	transform: rotate(10deg);
}
.elephant::after {
	right: -47px;
	border-radius: 20px 36px 36px 0;
	-webkit-transform: rotate(-10deg);
	transform: rotate(-10deg);
}
.elephant .face::before,
.elephant .face::after {
	top: 75px;
	width: 30px;
	height: 37px;
	background-color: #ccc;
}
.elephant .face::before {
	left: -4px;
	border-radius: 0 0 10px 30px;
}
.elephant .face::after {
	left: 74px;
	border-radius: 0 0 30px 10px;
}
.elephant .face .eye::before,
.elephant .face .eye::after {
	top: 53px;
	width: 14px;
	height: 20px;
	background-color: #444;
	border-radius: 50%;
	-webkit-animation: eye 7s infinite;
	animation: eye 7s infinite;
}
@-webkit-keyframes eye {
	49% { -webkit-transform: scaleY(1) }
	50% { -webkit-transform: scaleY(0) }
	51% { -webkit-transform: scaleY(1) }
}
@keyframes eye {
	49% {transform: scaleY(1) }
	50% {transform: scaleY(0) }
	51% {transform: scaleY(1) }
}
.elephant .face .eye::before {
	left: 12px;
}
.elephant .face .eye::after {
	left: 74px;
}
.elephant .face .nose {
	top: 95px;
	left: 29px;
	width: 44px;
	height: 70px;
	background-color: #ccc;
	border-radius: 0 0 0 40px;
}
.elephant .face .nose::before {
	top: 44px;
	left: 19px;
	width: 40px;
	height: 16px;
	background-color: #ccc;
	border-radius: 0 20px 20px 0;
	-webkit-transform: rotate(57deg);
	transform: rotate(57deg);
}
.elephant .face .nose::after {
	top: 0;
	left: 39px;
	width: 10px;
	height: 44px;
	border-left: 5px solid #fff;
	border-radius: 50%;
}
.elephant .face .nose div,
.elephant .face .nose div::before,
.elephant .face .nose div::after {
	height: 10px;
	left: 0;
	width: 24px;
	border-top: 2px solid #aaa;
	border-radius: 50%;
}
.elephant .face .nose div {
	top: 8px;
	left: 8px;
}
.elephant .face .nose div::before {
	top: 9px;
}
.elephant .face .nose div::after {
	top: 20px;
}

以上「ぞう Advent Calendar 2015」の2日目のエントリーでした。
まだまだカレンダーにも空きがありますし、ぞうに関するものならなんでもありって感じなので、興味ある方は是非参加してみてください！

ぞう Advent Calendar 2015 – Adventar

明日はnatsumiineさんの「ゴルゴタッチなぞう(予定)」です :)

Back to Top

CSSでぞうを作ってみました（ぞう Advent Calendar 2015 2日目）

CSSでぞうを作ってみました（ぞう Advent Calendar 2015 2日目）

/ Blog

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。