#Introducing Typogram Hello friend, I am wentin, creator of CSS ICON. I have been building Typogram — a logo design tool, and it is now launched! Upvote us on Product Hunt!
SVG Icons Animated with CSS
<div class="wrapper"> <svg version="1.1" id="sun" class="climacon climacon_sun" viewBox="15 15 70 70"> <clipPath id="sunFillClip"> <path d="M0,0v100h100V0H0z M50.001,57.999c-4.417,0-8-3.582-8-7.999c0-4.418,3.582-7.999,8-7.999s7.998,3.581,7.998,7.999C57.999,54.417,54.418,57.999,50.001,57.999z"/> </clipPath> <g class="climacon_iconWrap climacon_iconWrap-sun"> <g class="climacon_componentWrap climaco
CSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
Pure CSS GUI icons – Nicolas Gallagher
An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set. Demo: Pure CSS GUI icons Known support: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+. An exercise in constraintSeveral months ago I was experimenting with the creation o
アクティブなコメントボタンの画像を変更できるようになりました - はてなスター日記
さきほどはてなスターのプログラムを変更し、コメントがついた状態のアクティブなコメントボタンの画像を変更できるようにしました。 他のボタンと同様に、スタイルシートに以下のような指定を加えることで、コメントがついた状態のボタン（デフォルトではオレンジ色のボタン）を変更することが可能です。 .hatena-star-comment-button-image-active { background-image: url(http://s.hatena.ne.jp/images/comment_active.gif); } この変更により、はてなスターのデザインをすべてカスタマイズできるようになりました。改めて、画像や文字のデザインの変更についての解説をまとめ、近日中にはてなスターサイト内にご案内したいと思います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
