タグ

HTMLとルールに関するtakasi-iのブックマーク (1)

  • [CSS]だけでオンズのロゴを作ってみた。

    ちょっとした遊びゴコロを発揮して CSS だけでオンズのロゴマークを作る方法を模索してみました。 もともと比較的簡単な構成のロゴマークなので、それほど難しくはないと思っていましたので、ちょっとハードルを上げるために1つのルールを定めました。 それは「たった1つの div 要素のみで作る」こと。 つまり使える html は <div class="onze"></div> のみで、あとはスタイルシートを駆使して制作することになります。 具体的には疑似セレクタ「:before」と「:after」を利用することになりますね。 以下、実際にできあがったコードを順を追って説明していきます。 .onze { margin:0 auto; position:relative; width:130px; height:130px; background-color:#1aa; border-radius:

  • 1