[B! css] gabillのブックマーク

gabill id:gabill

cssに関するgabillのブックマーク (7)

画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD
昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、本日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない？という疑問を抱き実際に作ってみました！今回作成したのは日本人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。 CSS3で作ったドラえもんの完成品！ CSS3 ドラえもん最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対
gabill 2010/05/04
css
リンク
スクロールさせると日が沈んでいく面白いサイト「Morning Sunset」:phpspot開発日誌
Morning Sunset スクロールさせると日が沈んでいく面白いサイト「Morning Sunset」スクロールが進むにしたがってbackground-imageが徐々に変化して青空が夕焼けになるというもの。次のように夕焼けに。面白い驚き効果なので応用してみると面白いことができるかもしれませんね。
gabill 2010/03/20
とんでもなく重くなるだろうけど、セル画をたくさん重ねれば物語の進行にあわせて挿絵がアニメーションする小説のできあがり。

これはすごい

css
リンク
マークアップ効率化 - zen-codingでコーディングを倍速に
HTMLの記法について基本的には「div」の様に要素を省略せずに記述して、それを展開すると「<div></div>」という形に展開されます。このときに展開できる要素は以下の公式ドキュメントに明記されていますのでそちらを見るとよいです。 Zen HTML Elements Zen HTML Selectors Zen CheatSheets 基本的な記法ひとつずつ順番に記述して説明していきます。しばらく初歩的な説明になるのである程度知っている方は飛ばしていただいて良いかと思います。まずものすごく基本的な記法である、単独タグの記法について説明を行います。 cssのセレクタをイメージしながら見ていくと納得しやすいと思います。タグだけ変換変換前 div 変換後 <div></div> デモ文末でtabを押してください div 変換後、div要素の間にカーソルが移動するので、すぐにテキ
gabill 2010/03/18
プログラミング

css

javascript

web

webサービス
リンク
Opera Logo with CSS · David DeSandro
Opera Logo with CSS The Opera logo, rendered only with CSS, no images. Compare it with the real deal. Alas, best viewed in Firefox 3.6, Safari 4, or Chrome 5. Aside from another shameless plea for attention, this demonstration gives me a chance to look at some CSS3 properties across browsers. Border Radius In all the tutorials and hubbub over CSS3, elliptical border radius is one of those features
gabill 2010/03/12
css

opera

これはすごい
リンク
[CSS]上級者向け、スタイルシートのテクニック集
スタイルシートで実装する実用的なものからちょっと変わったものまで、25のテクニックをDesizn Techから紹介します。 25 Advanced CSS Techniques 1. CSS Gradient Text and Background テキストや背景をグラデーション表示。
gabill 2009/03/27
css

デザイン
リンク
はてなブログ | 無料ブログを作成しよう
月に1冊、未知なる本を読もうという試み（2024年1〜3月）はじめに 1月：【暇・退屈論】國分功一郎『暇と退屈の倫理学』 2月：【決済】ゴットフリート・レイブラント、ナターシャ・デ・テラン『教養としての決済』 3月：【自炊】土井善晴『一汁一菜で良いという提案』総括はじめに社会人として過ごす年数も少なくはなくなっ…
gabill 2009/02/15
これは便利。

opera

css

便利
リンク
IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック - WEBデザイン　BLOG
CSS設定でオブジェクトを半透明にできるプロパティがあります。 IEのみのCSSプロパティでしたが、Firefox・Operaでも同じように表示可能にできる方法を説明したサイトがありましたので紹介しておきます。他にもいくつかのOpacityプロパティを使ったTipsが紹介されていますので、参考に覗いてみてください。 CSS Opacity in Mozilla,IE, and Opera http://www.mandarindesign.com/opacity.html CSS Opacity設定以下のコードでIE・Firefox・Opera・Netscape・Safariで同等表示がえられます。 filter: alpha(opacity=25); -moz-opacity:0.25; opacity:0.25; IE alpha(opacity=透明度); 100が100％とな
gabill 2008/12/29
css
リンク
1