CSS3アニメーションで、背景を変えたり、ボタンをバウンドさせたり、画像をフェードやフリップで表示したりなどをコピペで実装できるライブラリ、緩急をともなったイージングやトゥイーンの微調整を設定できるオンラインツールをまとめて紹介します。
[CSS]コピペで簡単にCSS3アニメーションを実装できるライブラリ・ツールのまとめ
CSS3アニメーションで、背景を変えたり、ボタンをバウンドさせたり、画像をフェードやフリップで表示したりなどをコピペで実装できるライブラリ、緩急をともなったイージングやトゥイーンの微調整を設定できるオンラインツールをまとめて紹介します。
CSS3、transition プロパティでアニメーションさせる
最近CSS3のアニメーションを勉強しています。復習を兼ねて transition プロパティの基本的な使い方をまとめました。 “transition”は時間的変化という事のようです。animation プロパティよりも簡易的なアニメーションという印象で、animation より単純な指定でよいのでとっかかりやすかったです。 現時点でtransitionはIEは全く対応しておらず、その他のブラウザでもベンダープレフィックスが必要です。 アニメーションさせたい要素に、tansitionの4つのプロパティを指定する事により動きを表現できます。プロパティはまとめて書く事もできます。ベンダープレフィックスが必要なので、まとめて書かないと長くなってしまいますね。tansitionの各プロパティの説明が以下になります。 1. transition-propety アニメーションの対象とするcssのプロパ
[CSS]タブコンテンツにCSS3アニメーションを少しだけ加えてかっこよくするチュートリアル
JavaScriptを使用しないで、スタイルシートでタブコンテンツを実装するポイントから、コンテンツの切り替えやタブのフォーカス時にちょっとしたCSS3アニメーションを加えるチュートリアルを紹介します。 Demo 4: 垂直型タブ 実装 HTML タブの各コンテンツはdiv要素で、タブはinput要素で実装します。input要素のチェックでタブを切り替えます。 <section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1">About us</label> <input id="tab-2" type="radio" name="radio-set"
[CSS]1ページで構成されたウェブサイトで使える、かっこいいCSS3アニメーションのテクニック
CSS3アニメーションを使って、ダイナミックなスライドやフェードのアニメーションでページ（コンテンツ）を切り替えるテクニックを3つ紹介します。 Demo 3 Demo 3は左からスライドのアニメーションで切り替わります。 実装 デモは一見、Homeを含む4ページで構成されているように見えますが、1ページで作成されています。 HTML HTMLはdiv要素で配置したコンテンツが4つ、ナビゲーションが1つの構成です。 コンテンツはそれぞれ異なるidとclassを付与します。 <!-- Home --> <div id="home" class="content"> <h2>Home</h2> <p>Some content</p> <!-- ... --> </div> <!-- /Home --> <!-- Portfolio --> <div id="portfolio" class="p
要素がコンテンツエリアなどからはみ出ているデザインを再現するための CSS | ヨモツネット
Web ページのデザインで、ある要素がコンテンツエリアを突き破ってはみ出ている場合、それを簡単に再現するための CSS のソースコード例です。親要素の Width が指定されていて、そこからはみ出る要素がある想定で行います。 動作確認用の demo 親要素から子要素をはみ出させたい場合、子要素の margin にマイナスを指定することで子要素の横幅を広げることができます。以下にそのサンプルコードを示します。このサンプルコードの例では親要素の横幅が 200px、その子要素の横幅は300px となります。 <div style="width:200px;"> <div style="margin-right:-100px;">子要素</div> </div> 確認しやすいように border, background などを指定してレンダリングすると以下のような結果となります。 <div sty
Matias Etchevarne - UX and Product Designer
With over 23 years of extensive experience in UX, strategic design, and innovation, I have had the privilege of leading and guiding UX teams across diverse industries. Throughout my career, I have undertaken numerous large-scale and intricate projects, consistently emphasizing the balance of user experience with business objectives. My expertise spans across major sectors, including fintech, data
ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」:phpspot開発日誌
ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」 2008年07月11日- ke-tai.org > Blog Archive > ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」 DoCoMo向けにCSS指定をインラインに埋め込むPHPライブラリ「toInlineCSSDoCoMo」作りました : アシアルブログ ケータイ向けサイトを作っていく上で一番問題となるのが、ドコモ端末が外部CSSファイル読み込みや、styleタグでの内部参照に対応していないことです。ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」がke-tai.org で紹介されています。 以下のようにメソッドを呼び出すとCSSを組み込んだ形に自動でHTMLを変換してくれるみたい
Prototype.js - JavaScriptでメニュータブ切り替え
body部分、JavaScript、CSSを別々にソースを載せています。JavaScript以外は簡単にいじれると思うのでご自由に変更してご利用ください。 <div id="tabContent"> <ul id="tabIndex"> <li class="tab">タグ１</li> <li class="tab">タグ２</li> <li class="tab">タグ３</li> <li class="tab">タグ４</li> </ul> <div id="tabBoxIndex"> <div class="tabBox">内容１</div> <div class="tabBox">内容２</div> <div class="tabBox">内容３</div> <div class="tabBox">内容４</div> </div> </div> JavaScriptはprototy
死ぬまでに見ておくべきCSSデザインサイト集まとめ - GIGAZINE
ということで、今まで数限りなくネットのあちこちで紹介されてきたCSSデザイン関連のサイトがリスト化されてまとめられたようです。これだけあれば当分はブログなどのデザインのネタに困ることはなさそう。インスピレーションを得るのに使うもよし、デザインの参考にするのもよし、知っておいて損はないものばかりです。 リストは以下の通り。 CSS Beauty | CSS Design, News, Jobs, Community, Web Standards http://www.cssbeauty.com/ CSS Drive- Categorized CSS gallery and examples. http://www.cssdrive.com/ Stylegala - Web Design Publication http://www.stylegala.com/ CSS Mania http:
CSS レイアウト切り替えスイッチ | WWW WATCH
Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 10KB） デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HoverBoard 3D | CSSDeck
Blogger