身近なモノをCSSで表現してみよう 「ボーダー柄のシャツ」編

身近なモノをCSSで表現してみよう 「ボーダー柄のシャツ」編

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

こんにちは。元島です。

CSSという言葉を聞いた事がありますか?

CSSとは、WEBページのデザイン/レイアウト/アニメーション等、WEBページの見た目の制御に関する仕様・技術の事です。

僕の普段の業務では、専門のWEBデザイナーがデザイン制作を行っている為、プログラマーの僕がCSSを扱う場面はほぼありません。

かといって、デザイン専門職がいるのだから、プログラマーの僕はCSSを知らなくても良いのか?
というとそうではないと思います。

何故かというとCSSには
・WEBページの体感速度を向上させる技法、
・ページ自体を高速化する技法
等の見た目だけでなく、WEBページの性能と動作に関わる技術も沢山含まれているからです。

という事で、勉強を兼ね身近なモノをCSSで表現していく事で、自分なりにCSSの知識を向上させようと思います。

今回は、シンプルなボーダー柄のシャツをCSSで表現します。
下記の画像を参考にしました。

[bitwabe]身近なモノをCSSで表現してみよう_20160310

こちら完成品です。
画像は使わず、CSSと2つのDIV要素で1つのシャツを作成しています。

[bitwabe]身近なモノをCSSで表現してみよう_20160310 (1)

HTMLとCSSはこちらになります。
HTML

CSS ※モダンブラウザのみ対応
/base/
.shirt,
.shirt::after,
.shirt::before,
.shirt>.neck{
margin:0;
padding:0;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.shirt,
.shirt::after,
.shirt::before{
border:1px solid rgba(0,0,0,.2);
background-color:#000;
background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(.5,#fff),color-stop(.5,transparent),to(transparent));
-webkit-background-size:13px;
}
.shirt{
display:inline-block;
position:relative;
margin:32px 88px;
width:112px;
height:184px;
box-shadow:0 4px 2px rgba(0,0,0,.7);
}
.shirt::after,
.shirt::before{
content:"";
display:block;
z-index:-1;
position:absolute;
top:0;
width:27px;
height:168px;
}
.shirt::after{
left:0;
transform-origin:0 0;
transform:rotate(24deg);
box-shadow:2px 4px 4px rgba(0,0,0,.7);
}
.shirt::before{
right:0;
transform-origin:100% 0;
transform:rotate(-24deg);
box-shadow:-2px 4px 4px rgba(0,0,0,.7);
}
.shirt>.neck{
position:absolute;
left:50%;
top:-2px;
transform:translate(-50%,0);
}
.shirt>.neck.neck-round{
width:56px;
height:28px;
background:#fff;
border-radius:0 0 56px 56px;
border-style:solid;
border-width:0 4px 4px 4px;
border-color:#000;
box-shadow:0px 2px 4px rgba(0,0,0,.7);
}
.shirt>.neck.neck-collar{
width:0;
background-color:#000;
border-style:solid;
border-width:24px 32px 0 32px;
border-color:#fff transparent transparent transparent;
box-shadow:2px 4px 2px rgba(0,0,0,.7);
}
/theme/
.shirt.shirt-blue,.shirt.shirt-blue::after,.shirt.shirt-blue::before{
background-color:#99f;
}
.shirt.shirt-blue>.neck.neck-round{
border-color:#33f;
}
.shirt.shirt-blue>.neck.neck-collar{
background-color:#33f;
}
.shirt.shirt-red,.shirt.shirt-red::after,.shirt.shirt-red::before{
background-color:#f77;
}
.shirt.shirt-red>.neck.neck-round{
border-color:#f33;
}
.shirt.shirt-red>.neck.neck-collar{
background-color:#f33;
}
.shirt.shirt-yellow,.shirt.shirt-yellow::after,.shirt.shirt-yellow::before{
background-color:#fb4;
}
.shirt.shirt-yellow>.neck.neck-round{
border-color:#f92;
}
.shirt.shirt-yellow>.neck.neck-collar{
background-color:#f92;
}

引き続き、次回の記事で詳しい解説をしていこうと思います。
次回も、是非見て頂けたら嬉しいです!
お忙しいところ、ご覧頂きありがとうございました。

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ