Fireworks CS6体験版を使って驚いてしまった強化点 | Webデザインのタネ一定期間更新がないため広告を表示しています
角丸にドロップシャドウ、グラデーションにアニメーションなど、超簡単にCSS3スタイルの作成＆コード生成をしてくれる「CSS3 ジェネレーター」まとめ！！
角丸にドロップシャドウ、グラデーションにアニメーションなど、超簡単にCSS3スタイルの作成＆コード生成をしてくれる「CSS3 ジェネレーター」まとめ！！ html5-css3-orange-logos / Nelson Felix Giga どうも！おつぱ（ @OZPA ）です！ 今回は、角丸やドロップシャドウ、グラデーションに2D/3Dアニメーションなど、CSS3に対応したスタイルを簡単に作成、さらにコードを生成してくれる「CSS3 ジェネレーター」を厳選して8つご紹介！ ｳｵｱｱｱｱｱｱｱｱ さて、CSS3対応ブラウザも増え、角丸、ドロップシャドウ、グラデーションにWebフォント、はたまた2D/3Dのトランスフォーム（回転／拡大縮小／移動）やアニメーションなどなど…リッチなUIがコードのみで表現できるようになりました。 関連：[CSS]GoodDesign賞にノミネートされて落選するこ
Veli 🦄 Veromann - 🏆 designer. 👨🎨🎨. 👨💻
startups startups startups startups startups co-founder , designer, developer weekdone.comWeekdone founding member KLKoosloodus I eeke ugla yk work with you on design branding ui ux usability mobile apps and code css html javascript Wordpress startups veteran attendeementor at Garage48 Garage48 Veli-Johan Veromann , designer Sponsor me UI/UX design for web and mobile, branding; front-end developme
レスポンシブにうまくデザインされたサイト集:phpspot開発日誌
10 More Incredible Examples of Responsive Web Design レスポンシブにうまくデザインされたサイト集。 レスポンシブなデザインというのはサイズを変えたデザインを数パターン作るということから、最初からレスポンシブに作る場合はちょっとこれまでとデザインのやり方が変わっちゃうという場合も多いのではないでしょうか。 レスポンシブなデザインのサイトを多く見ておき、ここはこうするといったネタをインプットしておくことで、レスポンシブにデザインする際に役立ちそうな気がします CSS3とかHTML5とか、レスポンシブとか、なんか昔に比べてやること増えたなぁ…、という気持ちになりつつ、うまくフレームワーク等も使いこなして効率良くサイトを作って行きたいところですね 関連エントリ 秀逸なレスポンシブWEBデザイン50のサンプル レスポンシブなjQueryスライダー実
人はなぜ角丸に魅かれるのか、その理由と角丸の効果的な使い方
ウェブのインターフェイスだけでなく、現実の世界でもたくさんの角丸を目にします。角丸は一時のトレンドではなく、デザインのスタンダードと言ってもよいでしょう。 そんな角丸がなぜ好まれるのか、どう使えばよいのか、ウェブページにどのように実装するのかなどを紹介します。 Rounded Corners and Why They Are Here to Stay 下記は各ポイントを意訳したものです。 角丸は目に、そして脳に優しい< 角丸のイメージは安心 -Appleのこだわり 角丸はいつ使用するべきか 角丸の実装：CSS3< 角丸の実装：古い方法 終わりに 角丸は目に、そして脳に優しい ビジュアル認知の権威：Jürg Nänni教授によると、『鋭角の長方形は同じ大きさの楕円より認知するのに努力を必要とする。人間の目は円形のものをより速く捉えることができる。」と述べています。 鋭角と角丸の視線の流れ 鋭
PhotoshopのレイヤースタイルをCSSで再現してリアルタイムに出力してくれるプラグインCSS Hat - WebDelog
2012/09/06追記： 現在 Windows版も対応されています。 fontのプロパティ各種にも対応されています。 詳しくは最新の記事にて確認して下さい。 最近はCSS3によってリッチなUIを作成できるようになりましたが、 Photoshopで作成されたデザインを元に CSSを作成するのはなかなか手間で、 PhotoshopでCSSを書き出せたら楽なのに… と思う方も多いのではないかと思います。 それを実現してくれたPhotoshopプラグインがあったので紹介します。 CSS Hat 先日このページを見つけて、 サイト内に設置してあるフォームにメールを送って そのまま何も無かったので忘れかけていたところ、 『CSS Hat is launching』 というメッセージが届いていて、 購入するためのリンクが届いていました。 30%オフの$19.90(通常は$29.99)で購入出来るとのこ
Image Accordion with CSS3
CSS transitions are not supported in your browser Sorry, only modern browsers. True Colors Honest Light Silent Serenity Warm Welcome Sensible Magic Lovely Midnight Illuminated Darkness Happy Child
画像一枚だけで写真を重ねたようにするチュートリアル | コリス
シンプルなHTMLで画像を配置し、:before, :after疑似要素を使って、写真を重ねたようなエフェクトにするチュートリアルを紹介します。 重ねたエフェクトはホバー時にCSS3アニメーションします。 デモページ ※ホバー時のアニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルです。 ラッパーのdiv要素はWebkit系ブラウザ用で、将来無しでも機能するようになるかもしれません。 <div class="stack"> <img src="image1.jpg" /> </div> [ad#ad-2] CSS スタイルシートは4つのデモのキャプチャと共に、紹介します。 まずは、右端の写真が垂直方向に重なっただけのスタイルシートです。重なりは:before, :afterを使用します。 .stack { position: relative; z-index
レスポンシブWebデザインとは (1/5)
スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基本まで、レスポンシブWebデザインによる制作案件を数多くこなす菊池 崇氏が解説します。（編集部） 本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 レスポンシブWebデザイン（Responsive Web Design）
jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門 | TM Life
またまた昔書いたエントリーのサンプルを jsdo.it に移植しました. 元々のエントリーは『HTML5 と CSS3 で Web 制作』. 画像を使わずに, HTML5 と CSS3 のみでっぽいサイトを作成しています. Step by Step 形式でまとめたので, 徐々に Web ページが出来ていく感じを 楽しんでもらえたらなとおもいます. jsdo.it を使って作っています. fork してイジったり前回の step との差分を見たりと色々やれるので ぜひ活用して遊んで下さい!! ※サンプルの実行結果は jsdo.it の fullscreen モードで見てください!! Demo Download サンプルについて オリジナル時同様, 指摘されそうな点を自分で予め指摘しておきます. CSS3 を無理くり使いまくってる(面白いのでw) 画像を使っていない(のは個人的なこだわりです.
jQuery/CSS3でPath風メニューを·Pie Menu MOONGIFT
Pie MenuはPathのメニューに似たUIをjQueryで再現したライブラリです。 人気のあるiOSアプリのUIはすぐに真似したモックアップが登場します。Pathもその一つです。流れるようなUIはもちろん、赤いプラスボタンのメニューが人気です。Pie Menuはそんなメニュー表示をjQuery/CSS3で再現したライブラリです。 赤いボタンを押します。 アニメーションがあってメニューが表示されます。 パラメータを変更して表示をカスタマイズできます。 密着版。 デモ動画です。 デスクトップ版でPie Menuを採用したとしてもなかなか使い方が分からないかもしれませんが、PhoneGapと組み合わせると話が違ってきそうです。スマートフォン向けサイトで使ってみても面白いかもしれません。 Pie MenuはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライ
IE6～IE8でCSS3が使える「CSS3 PIE 1.0.0」登場
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. 15日(米国時間)、「CSS3 PIE」初のメジャーバージョンとなる「CSS3 PIE 1.0.0」が公開された。CSS3 PIEは、CSSレベル3に対応していないIE 6/IE 7/IE 8に対して、いくつかのCSS3プロパティをレンダリングする機能を提供するプログラム。Apache License v2およびGPL v2のデュアルライセンスのもとオープンソースで公開されている。 CSS3 PIEは、既存のCSSスタイルシートに「behavior: url(PIE.htc);」の1行を追加するだけでCSS3が利用できるようになるユーティリティツール。現在サポートされているCSS3
[CSS]Responsiveデザイン対応のページ制作に役立つ5つのスタイルシートのテクニック
Responsiveデザイン対応ページを制作する際に役立つ、max-width, min-width, overflowなどの役立つ5つのテクニックを紹介します。 5 Useful CSS Tricks for Responsive Design [ad#ad-2] 下記は各ポイントを意訳したものです。 動画コンテンツの配置 max-width, min-widthの小技 値を相対値に overflow: hiddenを使ったテクニック 長いテキストは折り返す 動画コンテンツの配置 Responsiveデザインに対応した動画コンテンツの配置方法です。 デモページ CSS: 動画コンテンツの配置 .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
CSS3だけで作るボタンデザインいろいろ
html5-memo.com
HTML5 と CSS3 で Web 制作 | TM Life
公海555000kk线路检测—首页（欢迎您）
CSS3で描かれたシェイプのサンプル集:phpspot開発日誌
タブやフォームなどのUIもレスポンシブWebデザインに対応させた960グリッドシステム搭載のCSSフレームワーク・Gumby Framework
