CUSTOM DROP-DOWN LIST STYLINGという記事で、ドロップダウンメニューをカスタマイズするコードが紹介されています。 シンプルなフェードのアニメーションがあっていい感じです。 CUSTOM DROP-DOWN LIST STYLING
CUSTOM DROP-DOWN LIST STYLING – ドロップダウンメニューをカスタマイズするコード – creamu
CUSTOM DROP-DOWN LIST STYLINGという記事で、ドロップダウンメニューをカスタマイズするコードが紹介されています。 シンプルなフェードのアニメーションがあっていい感じです。 CUSTOM DROP-DOWN LIST STYLING
CSS3でTiltShiftな写真を作れる「tiltShift.js」:phpspot開発日誌
tiltShift.js - a jQuery plugin using CSS3 filters to replicate the tilt shift effect CSS3でTiltShiftな写真を作れる「tiltShift.js」 写真にミニチュアや一眼風に効果を与えられるTiltShiftですが、CSS3でも実現が可能なようです。 マウスオーバーで徐々にアニメーションしつつTiltShiftがかかったり消したりという効果も実現可能。スクリプトならではの強みですね。 応用すればマウス位置を中心としてぼかし、なんてこともできちゃうのかも CSS3さんパネェっす、ときっと貴方は言ってるはず。 関連エントリ CSS3でブロック要素を折り紙風にたたんだエフェクトを付けられる「oriDomi」 jQueryでフリップエフェクトを使った良プラグインやサンプル集１０ ターミナルに文字を打ってる
秀逸なアイデアが素晴らしい！CSS3を使ったホバーエフェクトのまとめ
画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。
HTML5カンファレンス2012の資料まとめ
HTML5カンファレンス2012の講演資料のまとめです。 HTML5カンファレンスは非常に有意義なものでした。講演頂いた方、スタッフの皆様ありがとうございます。 HTMLとかCSSとかAPIとか -2012秋編-（矢倉眞隆さん） HTML5 や CSS3 の新しいタグやプロパティについての解説。 でもその前に、W3C と WHATWG についての話。 一部のメディアで、W3C と WHATWG が決裂したかのような報道がされたが、実際は問題ないとのこと。 W3C と WHATWG の Editor を務めていた Ian Hickson氏は WHATWG の HTML に集中し、バグ修正が加速しそうです。 セッションでは紹介されていませんでしたが、こちらの記事に Ian Hickson氏からのメールの邦訳など載っています。 HTML5仕様をめぐるW3CとWHATWGについて、Ian Hick
意外に簡単！CSS3を使ったシンプルな横メニューの作り方
CSS3をいくつか使ったシンプル横メニューの作り方を順番に説明してみます。特に目新しいものではないですが、CSS3をこれから勉強する人や使い方が分からないという人のお役に立てばと思います。 以前に「細部にこだわってみた！CSS3を使った美しい横メニューの作り方」というのを書きましたが、こちらの方が難しいと思います。 例によってCSS3はブラウザによって対応状況が違い、IE8以下だと今回紹介するCSS3プロパティに対応していません。他の主要ブラウザはよほど古いバージョンでない限り問題ないと思います。 ここら辺のCSS3の基礎について勉強したい方は「CSS3について知っておきたいことのまとめ」をご覧ください。 HTMLはこんな感じです。Internet Explorerだけ文字数の関係でIEと略させていただきました。 <ul id="menu"> <li><a href="#">IE</a><
Fireworks CS6の新機能、CSSプロパティパネルを便利に使ったWebデザインの流れまとめ – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
G3株式会社さまのコーポレートサイトを制作させていただきました。 CSSプロパティパネルが便利すぎて… 今回、FireworksのCSSプロパティパネルが最高すぎることによってかなりの短時間でサイト制作できたので、それのご紹介がてら、どのようにサイトを作っていったかご紹介したいと思います。 すでにサイトがWordPressで動いていて、別のテーマで運用中だったので、 テキスト等もそのまま流用でき、私の作業としては純粋にWordPressテーマのデザインとコーディングの部分でしたので今回ご紹介するのはその部分の流れになります♪ まず、イメージを膨らませる イメージ固めから入りました。 会社のコンセプトが「毎日をワクワクさせちゃえ！」だったので、私の中でのワクワクのイメージを考えてみます。 google画像検索でワクワクを検索してみたり。 なんとなーくブルーが多い印象。 こういうものも参考にし
ソーシャルアイコンをWebフォントで表示する方法を色々ご紹介
twitterやFacebookなどのソーシャルメディア関連のアイコンを表示しているサイトはよく見かけますが、そのほとんどは画像だと思います。 今回、Webフォントを使って表示する方法を紹介しますので参考になればと思います。 実物は別サーバーにアップしていますので、こちらでご確認ください。 今回はWeb Symbols typefaceさんのアイコンを使わせていただきました。 で、まず最初にアイコン形式のフォントを読み込む設定をします。 @font-face { font-family: 'WebSymbolsRegular'; src: url('websymbols-regular-webfont.eot'); src: url('websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('webs
Google検索結果の横に表示されるスクリーンショットのギザギザをCSSで表示する
Google検索結果の横に表示されるスクリーンショット上下のギザギザをCSSで表示する方法を紹介します。 １．Google検索結果の横に表示されるスクリーンショットについて Google検索で、検索結果の横に表示される「＞＞」にマウスをポイントまたはクリックすると、 サイトのスクリーンショットが表示されます。 スクリーンショットの縦幅が長い場合、冒頭に示したとおり、分割したことを示すギザギザが表示されます。 ということで、このギザギザを表示するCSSを調査してみました。 完全に調査できていないかもしれない＆かなり省略していますので、ご利用になる場合はご注意ください。また、ギザギザ画像（透過PNG）は各自でご用意ください。 Google Chrome/Firefox/IE9で表示することを確認しています。IE9は条件付きコメントで振り分けが必要です。 ２．ギザギザを表示するCSS サンプルを
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
クールな円形メニューをピュアCSS3で実装するチュートリアル:phpspot開発日誌
The Creation of a CSS3 Clickable, Rotating Menu | InsertHTML クールな円形メニューをピュアCSS3で実装するチュートリアル。 クリックすると回転したり良い感じに立体感が出ていたりアニメーションしたりCSS3の機能をフルに使った円形メニュー。 奇抜なメニューであっと驚かせたいという場合に使えそうです デモページ メニューアイコンもしっかり回転されています。 関連エントリ アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」 ピュアCSS3で作られた「path.com」っぽい円形メニュー実装デモ jQueryとCSS3を使ったPath風の円形メニューサンプル ゲームに出てきそうな円形メニュー実装jQueryプラグイン「Pretty Pie Menu」
canvasを使って画像をスタイリングするチュートリアル:phpspot開発日誌
Image styling with canvas | Webdesigner Depot canvasを使って画像をスタイリングするチュートリアル。 画像をブラウザ上でリアルタイムに切り抜いたり色合いを変えたり、円形にクリップしたりするサンプルが公開されています。 canvasだけではなくてCSS3も使っているみたいですが、かなりの事がcanvasで出来てしまってサーバにやさしい、ということでスマホベースのサービスなんかでは使えそうなテクニックです。 ブラウザによってcanvasに対応していないPC環境ではちょっと使いづらいかもしれませんね 色合いも変更できます。もっと高度なこともできそうですね 関連エントリ CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２ Canvasベースのお絵かきが実装できるjQueryプラグイン「Sketch.js」 HTML5のcanv
phiary
今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
Adobe Edge Animate用にファイルを書き出せるFireworks拡張 | バシャログ。
風邪をすっ飛ばして肺炎という診断をくだされて、3日間ほど寝込んでいたminamiです。皆さんも気をつけて！ AdobeからWebサイト構築ツール&サービス「Edge Tools & Services」が発表されました。 その中のHTML5／CSS3／JavaScriptベースでアニメーションを作成できるEdge Animateというツールに、Fireworksで連携できてしまう拡張をご紹介します。 Edge Animate 上記拡張をインストールします。FW CS5でも問題なく動作しました。 Fireworks上で適当な矩形と文言をレイアウトします。 コマンド > Edge Animate > Export Edge が拡張によって追加されているので、選択します。 プロジェクトファイルを出力するフォルダを指定します。 フォルダに自動的にEdge Animateで必要なファイルが書きだされま
［速報］アドビがHTML5とモバイルにフォーカスした新ツール群「Adobe Edge Tools & Services」を発表。アニメーション作成、レスポンシブデザインなどが効率的に
［速報］アドビがHTML5とモバイルにフォーカスした新ツール群「Adobe Edge Tools & Services」を発表。アニメーション作成、レスポンシブデザインなどが効率的に 米アドビは24日（日本時間24日深夜）、サンフランシスコでイベント「Create the Web」を開催。CSSやJavaScriptを使ったアニメーション作成、画面の大きさによって動的にレイアウトが変化するレスポンシブなWebデザイン、複数のモバイルデバイスへの対応、HTML5やCSS3に対応したコーディングなど、最新のWeb技術に対応した開発を支援する新ツール群「Adobe Edge Tools & Services」を発表しました。 発表された新ツールやサービスを日本語で解説するWebサイトもすでに公開されています。サンフランシスコで開催されたイベントの内容を、ダイジェストで紹介しましょう。 Adobe
必読！5分でわかるレスポンシブWebデザインまとめ 制作編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お久しぶりです。デザイナーの野田です。 まず、今回の記事を見ていただく前に、前回と前々回に書かせていただきました。 「必読！5分でわかるレスポンシブWebデザインまとめ」 「必読！5分でわかるレスポンシブWebデザインまとめ Pt.2」 を読んでいただけるとスムーズです。 今回で、【必読！5分でわかるレスポンシブWebデザインまとめ】のシリーズも最後にさせていただきますので、少しコンテンツ量が多くなります。 100％ 5分では分らないので、タイトルはスルーしてやってください。 様々なサイトでレスポンシブWebデザインについて紹介されていますが、制作方法が異なっていたり、内容が少し難しいと感じる部分がありました。 この記事は、ディレクターの方やデザイナーの方、どちらにも理解しやすいように書かせていただいてます。 また、これまでレスポンシブWebデザインについてやってきましたが、基本的な部分で
[CSS]円形エレメントの実装とホバー時に面白いアニメーションのエフェクトを与えるスタイルシート
最近よく見かけるようになった円形のエレメントに、ホバー時に普通のより面白いエフェクトをCSS3アニメーションで実装するチュートリアルを紹介します。 Circle Hover Effects with CSS Transitions 右：ホバー時のアイテム、左：通常時のサムネイルの状態です。 円形エレメントの実装 ホバーエフェクトのデモ 円形エレメントの実装 まずはベースとなる円形エレメントの実装です。 アイテム時を例に紹介します。 HTML 各円形のエレメントはリスト要素で、見出しやパラグラフをdiv要素で二重に内包します。 <ul class="ch-grid"> <li> <div class="ch-item ch-img-1"> <div class="ch-info"> <h3>見出し</h3> <p>パラグラフ <a href="http://">リンク</a></p> </d
一枚の画像を高速にスライドさせてアニメーション表示する「JZoopraxiscope」:phpspot開発日誌
JZoopraxiscope - jQuery plugin for making animations from static images. 一枚の画像を高速にスライドさせてアニメーション表示する「JZoopraxiscope」 次のような横長の画像を高速に横にスライドさせることでアニメーションさせてしまうものです。 ブラウザプラグイン不要で好きなサイズでアニメーションさせられます。 GIFアニメでもなく、FlashでもHTML5のvideoでもないアニメーション実装方法として知っておいてもよさそう 関連エントリ WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」 CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Tran
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3で実装されたUIエレメントのオープンソースのまとめ -CSS3 Code Snippets | コリス
html5-memo.com
Portfolio Flipping Slider Using jQuery & CSS3 – ポートフォリオをくるくる回転させながら見せられるスクリプト – creamu