ヘッダーにもあるモリクリのロゴ。
「morita create」に含まれるアルファベット小文字の「m」「r」「t」「c」で構成しています。
「シンプルなロゴだし、HTMLとCSSだけで出来るんじゃね?」
安直に考えて、さっそく実行〜♪
HTMLはこんな感じでいいかな?
<ul id="mrtc"> <li class="m">m</li> <li class="r">r</li> <li class="t">t</li> <li class="c">c</li> </ul>
liタグの中身の文字は特にいらないけど、コピーできるという特に使い道のない機能を入れ込んでみた。
そもそも、imgタグを使えば1行で済むのに、わざわざこんな事する意味はあるのだろうか?
まずは全体の構成から。
#mrtc { margin: 0 auto 1em; } #mrtc li { display: inline-block; //横並びのブロック要素に vertical-align: bottom; //下揃えに width: 100px; //横幅 height: 50px; //高さ margin: 0 5px; //文字の間隔 position: relative; //後々必要に… overflow: hidden; //ハミ出した要素を非表示に text-indent: -100%; //テキストを隠す }
ベースのスタイルシートでリセットをかけているので、「list-style: none;」とかは省いてます。
縦横比が1:2なので、とりあえず横幅と高さは計算しやすいサイズにしました。
まずは「m」から。
#mrtc .m { border: 2px solid #000; //長方形のブロック要素を作成 border-bottom: none; //下辺のボーダーを消す -webkit-border-top-right-radius: 15px; //右上を角丸に -moz-border-top-right-radius: 15px; border-top-right-radius: 15px; } #mrtc .m:before { content: ""; position: absolute; top: 0; left: 50%; display: block; background: #000; width: 2px; height: 100%; margin-left: -1px; }
基本は幅2pxの長方形をベースに、変形させていく感じです。
「:before」でliタグに擬似要素をつけて、幅2pxの縦棒を作ってセンターに配置させてます。
#mrtc { margin: 0 auto 1em; } #mrtc li { display: inline-block; vertical-align: bottom; width: 100px; height: 50px; margin: 0 5px; position: relative; overflow: hidden; text-indent: -100%; } #mrtc .m { border: 2px solid #000; border-bottom: none; -webkit-border-top-right-radius: 15px; -moz-border-top-right-radius: 15px; border-top-right-radius: 15px; } #mrtc .m:before { content: ""; position: absolute; top: 0; left: 50%; display: block; background: #000; width: 2px; height: 100%; margin-left: -1px; } #mrtc .r { border: 2px solid #000; border-right: none; border-bottom: none; -webkit-border-top-left-radius: 15px; -moz-border-top-left-radius: 15px; border-top-left-radius: 15px; } #mrtc .t { background: #c00; width: 104px; height: 104px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-tradius: 50%; } #mrtc .t:before { content: ""; position: absolute; top: 0; left: 50%; display: block; background: #fff; width: 2px; height: 100%; margin-left: -1px; } #mrtc .t:after { content: ""; position: absolute; top: 50%; left: 0; display: block; background: #fff; width: 100%; height: 2px; margin-top: -1px; } #mrtc .c { border: 2px solid #000; border-right: none; -webkit-border-top-left-radius: 15px; -moz-border-top-left-radius: 15px; border-top-left-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-bottom-left-radius: 15px; border-bottom-left-radius: 15px; }
そして完成したモリクリロゴCSSバージョンが↓コチラ〜♪
- m
- r
- t
- c
実はこのロゴ、三代目なんだけど、それはまた別の機会で!