CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe
MENURespond to your user’s browser features.Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.Add your detects Development build What is Modernizr?It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user. Why do I need it?All web develope
将来、何かの役に立つかもしれないので、メモとしてエントリー。 IEなんかの古いブラウザに対応するための CSS ハック方法は古くから知られていますが、CSS3 への過渡期の現在、（本当は使いたくない）ベンダー・プレフィックスや Modernizr なんかを使って新しいデザインにチャレンジしている人も多いことでしょう。 それでもなお、特定ブラウザの、特定バージョンで思った通りのデザインにならないことがあれば、やはり何かしらのハックに頼らざるを得ない状況は、今も昔も変わらないのかもしれません。 そんな場合のハックを An HTML5 boilerplate addon for CSS browser nitpicks から紹介です。紹介されているテクニックは、従来型の CSS 解釈時バグや CSS 属性のアリ／ナシといった特徴や機能ベースではなく、そのものズバリ、ユーザーエージェントによるブラ
Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states. Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active st
The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example. The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative wa
26 Responsive Web Designs - Web Design Blog ? DesignM.ag レスポンシブWEBデザインのサンプル26 パソコン、スマホ等のデバイスでアクセスされた際にCSSを使ってフレキシブルにデザインを変えるというレスポンシブWEBデザイン。 それぞれのデバイス専用の画面を用意するのではなく、画面幅等で判断してCSSを切替えられれば開発側としてみれば手間が少なくなり合理的な開発が行えますね。 そうしたレスポンシブWEBデザインを上手く使ったサイト集がまとまっていましたのでご紹介です。 今後ますますスマホが重要度を増し、こうした考え方がWEBデザインをする上で必須の物になってくるような気がしますね。 関連エントリ お洒落なECサイトデザイン集３８ 次のサービスに使えるかもしれないロゴデザイン集２２ 奥行きをうまく使ったサイトデザイン集３０
コピペで使える！Photoshop不要になりそうな高品質テキストシャドウサンプル集 2011年06月13日- 12 Fun CSS Text Shadows You Can Copy and Paste | Design Shack コピペで使える！Photoshop不要になりそうな高品質テキストシャドウサンプル集のご紹介。 Photoshop不要には絶対ならないとは思うんですが、Photoshopで作るのと遜色ないテキストシャドウが実現されております コードと実例を元に紹介されていてコピペで使えます。 こういうものはいつでもデザインを変えられるという意味でCSS3でやっちゃうのがデベロッパー的には楽ですよね。 画像を作成→アップロード→タグ置き換え を CSS3で一発置換っていう方がはるかに効率的です 一日も早く、ほとんどのブラウザでCSS3が使えることを願います。 関連エントリ CSS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
