takasi-iのブックマーク / 2014年8月28日

takasi-i id:takasi-i

2014年8月28日のブックマーク (2件)

[CSS] Blending Modeを利用したロゴの作成 - VIVABlog
複数のオブジェクトを重なるように表示するCSS3の「mix-blend-mode」を使ったロゴの作成方法が解説されています。ソースはあまり綺麗ではありませんが、spanで1文字ずつ囲ってそれぞれをずらして配置。spanにmix-blend-mode: multiply;の属性を指定するだけと簡単。リンク先からソースがダウンロードできるので、それを参考にして、文字を替えるだけですぐに利用することができます。 Source How to Use CSS3 Blending Mode [CSS3 Tips]
takasi-i 2014/08/28
リンク
［CSS］だけでオンズのロゴを作ってみた。
ちょっとした遊びゴコロを発揮して CSS だけでオンズのロゴマークを作る方法を模索してみました。もともと比較的簡単な構成のロゴマークなので、それほど難しくはないと思っていましたので、ちょっとハードルを上げるために１つのルールを定めました。それは「たった１つの div 要素のみで作る」こと。つまり使える html は <div class="onze"></div> のみで、あとはスタイルシートを駆使して制作することになります。具体的には疑似セレクタ「:before」と「:after」を利用することになりますね。以下、実際にできあがったコードを順を追って説明していきます。 .onze { margin:0 auto; position:relative; width:130px; height:130px; background-color:#1aa; border-radius:
takasi-i 2014/08/28
CSS

ロゴ

color

a

html

ルール

考え方

サンプル
リンク
- 2014年9月2日
- 2014年8月28日
- 2014年8月13日