ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するために CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を利用します。しばしばページに変化（英: Transition）やアニメーション（英: Animation）を加えるために CSS を利用しますが、まだまだ開発する余地がありそうです。 アニメーションは、訪問ユーザーにとってデザインをよリ理解しやすく、ためになる情報を伝える強力なツールとなるでしょう。ウェブサイト制作で活用でき、よりパワフルな使い方ができる基本原則を今回はご紹介します。 ディズニー社の現場で長年培われた、アニメーションの基本原則 12 個（英: 12 Principles of Animation）
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
LESSで3倍ラクするスマートフォンコーディング 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
CSS3の勉強になるかも！？画像を使わないボタンの作成手順
CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。
クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント
IE 9が登場！ ユーザーの閲覧環境がますます多様化！ 4月26日、ついに日本でもInternet Explorer（以下、IE） 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome（以下、Chrome）など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何？ Webブラウザや端末などの閲覧環境が多様化してきていま
[CSS]画像を使用しないで、紙がひらっとめくれたエフェクトを与えるスタイルシート
あらゆるサイズのエレメントに利用が可能な、紙がひらっとめくれたようなページカールのエフェクトを与えるスタイルシートを紹介します。 デモページの拡大 このエフェクトはページのあらゆるサイズの要素に簡単に適用できます。 紙がひらっとめくれたエフェクトの実装方法 HTML HTMLはシンプルです。div要素にclassを付与しているだけです。 <div class="box">My box</div> CSS：シャドウの適用 box-shadowを使用して、内側と外側にシャドウを適用します。 .box { position: relative; width: 500px; padding: 50px; margin: 0 auto; background-color: #fff; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0
IE7からのCSSの小難しいセレクタやプロパティいろいろ
チャイルドセレクタや隣接セレクタなど、あんまり馴染みのないちょっと小難しい CSS のセレクタなどをまとめてみました。 これからクロスブラウザの照準を、IE7 に合わせるなら、ちょっとお役立ちかもです！ そろそろ IE6 のことは忘れて、IE7 からのクロスブラウザを目指せばいいのかなーという気がしています。CSS のプラパティーの中には、今まで IE6 のことを考えて使わなかったものがたくさんあったりします。それらを改めて確認してみると、コーディングの幅が広がるなーという気になったりもします。 これから使う事が増えるかもしれない、CSS のセレクタやプロパティを、もう一度振り返ってみると同時に、IE7 で注意したい事などを簡単にまとめてみました。 IE6 ではサポートされていませんでしたが、IE7 からは使ってもOKなセレクタやプロパティには、どんなものがあるのか確認してみます。後半は
[CSS]角丸やシャドウだけではないCSS3の大切な三つのテクニック
CSS3って角丸とかシャドウとかグラデーションでしょ、という人に知っておいてほしいCSS3の大切なテクニックを紹介します。 3 Advanced CSS3 Techniques You Should Learn デモページ（※キャプチャはChrome） [ad#ad-2] 1. Advanced Selectors CSS3で最も重要といってもよい特徴の一つが「Advanced Selectors」です。簡単に説明すると、特定のHTMLエレメントに対してIDを使用しないで、スタイルを適用できるものです。 リスト要素で配置した下記のデモを見てください。 背景色を奇数番目はブルーに、更に5番目はレッドにしています。
HTML5+CSS3用のブラウザのスタイルをリセットするテンプレートファイル -HTML5 Reset
HTML5+CSS3の環境で汎用的に利用できるHTML・スタイルシート・スクリプトなどのファイルを一式にまとめたテンプレートを紹介します。 ファイル構成：コメント無し版 各ファイルの説明 index.html HTML5の要素を配置した汎用的に利用できるHTMLファイル。各スタイルシートファイルも埋め込まれています。 css/main.css @import用のスタイルシートです。 css/reset.css Eric Meyerの「Reset CSS」です。 css/core.css ベースとなるスタイルが定義されています。 css/_patches 各ブラウザ用のスタイルシートです。 css/_print プリント用のスタイルシートです。 js Modernizrがセットされています。
[CSS]あなたのウェブデザインに繊細を加える珠玉のスタイルシート
繊細のポイントは「気がつくかな？」ぐらいにすること。 そんなわずかな繊細をウェブデザインに加えるスタイルシートを紹介します。 Take Advantage of CSS3 to Achieve Subtle Design デモページ 下記は各ポイントを意訳したものです。 はじめに 繊細の大事なポイントは人々が気づかないかもしれない、そして記憶に残らないくらい非常にささやかなものにすることです。 私はこれが初耳だという人がいることを疑います。これは感覚と認識研究によって述べられたよく知られている概念の一つです。 繊細なデザインが難しいのは、「もう少し多くした方がいいのかな？」と容易に思えてしまうところです。このことを知らないと、繊細は失われるでしょう。 以上を踏まえた上で、ウェブデザインにさまざまな形の繊細を提供するために使用できる三つのCSS3のテクニックを紹介します。 1. transi
ココを押えておけばCSS3がだいたい分かるツール集 | 日刊ウェブログ式
CSS3 Generator CSS3の各ブラウザごとの対応状況の確認とソースコードの生成が同時に行える便利ツール。対応状況はブラウザのアイコンの上にカーソルを持っていくと表示されます。 Official Site CSS3 Gradient Generator v2.0 グラデーションのコードを吐き出すツール。カラーピッカーなどを使って直感的に操作できる Official Site CSS Border Radius ボーダーの角丸を表現するコードを吐き出すツール。四辺の周囲にある数値を変更するだけです。 Official Site Button Maker 画像を一切使わずにCSSだけでクールなボタンを作成。グラデーション、角丸、影などの調節が可能 Official Site CSS3, please! 左側のコードを書きかえると、プレビューが右上のプレビューが変化します。CSS3テス
[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
IE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」
TOP > WebDesign > IE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」 WEBサイト構築においてもはや常識となったCSS。新たな仕様のCSS3が整備されつつあり、表現の幅をさらに広げてくれるものになっていますが、最新のブラウザのみ対応しており、IE6のようなシェアがある旧世代のブラウザは対応していないというのが現状です。そこで今日紹介するのはIE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」です。 全てのCSS3のプロパティが適応されるのではなく、角を丸くしたり、ボックスに影を入れたりテキストに影を入れたりといったCSS3の機能をスクリプトにｙほって再現するというものです。 詳しくは以下 スクリプトを読み込ませると言
[CSS]実例から学ぶCSS3の効果的な使い方
CSS3の角丸、テキストシャドウ、ボックスシャドウ、RGBA、グラデーションなどを効果的に使用したサイトをSix Revisionsから紹介します。
画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD
昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、本日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない？という疑問を抱き実際に作ってみました！ 今回作成したのは日本人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。 CSS3で作ったドラえもんの完成品！ CSS3 ドラえもん 最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3で実装されたUIエレメントのオープンソースのまとめ -CSS3 Code Snippets | コリス
html5-memo.com
so-network.biz
borderプロパティを使用した華麗なる四つのエフェクト | コリス
http://www.designwalker.com/2010/05/css3.html
