意外とカンタン！CSS3で作る、スマホとかレスポンシブWebサイト用メニューアイコンのエフェクト｜ツーブロッカ
【追記あり】 ※iOSで動かなかったので少し調べたらtransformにベンダープレフィクス付けて動作しました。すみませんでした。 というわけでCSSのソース若干変わっています。。。 スマートフォンでWebサイトを見ていると、画面左（もしくは右）にこんなアイコンが表示されることがあると思います。 いわば「メニューアイコン」なのですが、これが画像やアイコンフォントを使わなくてもHTMLとCSSだけで出来てしまうのです。 今日はその作り方と、さらに「閉じる」ボタンに変化するアニメーションも作ってみます。 もう一度言います。HTMLとCSSだけで作ります！ シンプル。 まぁコレでなくてもいいんですけどね。 僕はこういうリンクをしない場合にa要素を使うのは好きではないのですが、例として、体（てい）としてa要素にしてやります。 本当は別の要素をcursor:pointerでなんとかするのが適切かと思
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
Splash and Coming Soon Page Effects with CSS3
Wouldn't that be absolutely great!? Yeah, it would!
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
「5分でわかるCSS3のグラフィックス機能」サンプル
text-shadow: 0 0 4px #fff, 1px -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
ブラウザからiOS7が使えるようになりました。
CSS Only iOS7 エイプリールフール用のページです。htmlとCSSのみでiOS7を再現してみました。各ボタンのアイコンは画像を使用せず、CSS3やアイコンフォントで再現しております。ボタンを押した時の動作もJavascriptを使用せず、CSS3のtransitionやanimeteを使用しております。 とりあえず動くものを実験として作りたかったので、一部妥協しているところもあります。ソースがめちゃくちゃ汚いです。 動作確認・推奨環境：Google Chrome・Safari Firefoxでも動作しますが、若干崩れてしまいます。スマートフォンの標準ブラウザでは一部正しく動作しない部分があります。CSS3を多用しているため、IEで見ると悲惨なことになります。 ツイート
Web Server's Default Page
This page is generated by Plesk, the leading hosting automation software. You see this page because there is no Web site at this address. You can do the following: Create domains and set up Web hosting using Plesk. Plesk is a hosting control panel with simple and secure web server and website management tools. It was specially designed to help IT specialists manage web, DNS, mail and other service
msto.jp - it転職 リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Magic CSS3 animations by miniMAC - minimamente
Come sapete, amo molto il linguaggio CSS ed in particolare mi piace sempre andare oltre, in questo caso ho voluto creare un pacchetto di animazioni in CSS3 che potrete usare liberamente per i vostri scopi e quindi nei vostri progetti web, si chiama Magic! Il progetto è hostato anche su GitHub, questo per avere i migliori pareri dai migliori sviluppatori e quindi migliorare il codice, renderlo il p
CSS3で作るシンプルなマウスオーバーアニメーション5種
CSS3で作るシンプルなマウスオーバーアニメーション5種 1.背景色がアニメーションするナビゲーション HOME ABOUT GALLERY LINK 2.横からスライドするナビゲーション HOME ABOUT GALLERY LINK 3.拡大・縮小するナビゲーション HOME ABOUT GALLERY LINK 4.くるりと奥に回転するナビゲーション HOME ABOUT GALLERY LINK 5.ぼやっと光るナビゲーション HOME ABOUT GALLERY LINK
.animate() | jQuery 1.9 日本語リファレンス | js STUDIO
各オプション値を設定します。詳細は下記の通りです。 duration 型:Number or String 初期値:400 アニメーションする時間を指定します。 easing 型:String 初期値:swing イージングの種類を指定します。 queue 型:Boolean 初期値:true falseを指定すると、キューに追加されずに即座にアニメーションを実行します。 1.7からは、文字列を指定することで追加するキューを指定できるようになりました。 specialEasing 1.4追加 型:PlainObject 1.4から追加された機能です。 CSSプロパティのマップ値を指定することで、その効果がイージングに反映されます(?) step 型:Function( Number now, Tween tween ) 各アニメーション要素の各アニメーションプロパティから呼び出される関数で
SVGは普及する。WebデザイナーはCSSとともにSVGが必須科目に
Internet Explorer 9では、Webブラウザ上にベクター形式で画像を描画できるSVG（Scalable Vector Graphics）のサポートが表明されています。ITproの記事「IE9の登場で画像フォーマットの本命に浮上するSVG」では、IE9がSVGをサポートすることでSVGの普及が始まるのではないかと予想しています。同意します。 SVGはHTML、CSS、JavaScriptと並ぶWebの要素に SVGは2001年にバージョン1.0、2003年にバージョン1.1がW3Cの勧告として策定されました。しかしマイクロソフトはIE6、IE7、IE8とずっとSVGに対応せず、一方でSVG策定以前から同社などが推進していたVML（Vector Markup Language）と呼ばれるベクター形式の言語を実装してきました。 Webブラウザで最大シェアを持つIEで使えないSVGは
アニメーション - animationプロパティCSSプロパティの詳細とデモ | ねこだまのCSSリファレンス&デモ
アニメーションCSSプロパティの詳細とデモ animationプロパティ - [公式（英語）] アニメーションの指定を一括指定 animation-name、 animation-duration、 animation-timing-function、 animation-delay、 animation-iteration-count、 animation-direction の6つのプロパティの値を、組み合わせて指定することができます。 ブラウザのサポート状況 Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 Firefox Google Chorme Safari Opera
[CSS]CSS3 Transitionsを使用して、ホバー時に繊細なアニメーションを与えるスタイルシート
a要素に余白をpaddingで設定し、カラーを指定します。 a.foo { padding: 5px 10px; background: #9c3; } a.foo:hover { background: #690; } [ad#ad-2] 繊細なアニメーションを与えるスタイルシート CSS3 Transitionsを使用して、ふわっと繊細なアニメーションを与えます。 デモページ（当方作成） 追加するのは、L4-7です。 ※デモページではpaddingなどの値を若干変更しています。 a.foo { padding: 5px 10px; background: #9c3; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: al
【ほぼ網羅】CSS3だけでアニメーションを実装する方法のまとめ
まずは、transitionプロパティでアニメーションを定義する方法です。 transitionプロパティは、開始時の状態と、終了時の状態を定義して使用します。 開始時と終了時を定義する方法には、以下の二種類があります。 1. hoverなどの擬似クラスを使用する方法 2. javascriptを使用して、CSSのプロパティを変更する方法 transitionでアニメーションを定義する際に、以下の４つの項目を指定することができます。 1. アニメーションにかかる時間 2. 対象のプロパティ 3. イージング 4. 遅延時間 この４つのプロパティはtransitionプロパティでまとめて定義することも出来ますし、個別に設定することも可能です。 まず、transitionプロパティを用いて、まとめて指定する方法ですが、以下の形式で設定を行います。 transition: アニメーションにかかる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
創造Web DEMO 0013
CSS3を使ったオンマウスで吹き出しが現れるサンプル
CSS Load.net - Loading CSS spinners and bars generator for AJAX & JQuery