CSSやSVGで実装するローディングアニメーション - NxWorld以前であればアニメーションGIFを用いることが多かったローディングアニメーション（プリローダー）も最近ではSVGを使ったり見栄えだけでなく動きも含めてCSSのみで実装するということも大分増えてきたので、過去に参考にさせてもらったものや覚えておきたいと思った実装方法のまとめです。 また、サンプルやチュートリアル以外に簡単にCSSやSVGを使用したローディングアニメーションを作成できるジェネレータも併せて紹介します。
CSSアニメーションでページの表示時に要素を小気味よく動かすデモ集:phpspot開発日誌
CSS Animated Intro Section | CodyHouse CSSアニメーションでページの表示時に要素を小気味よく動かすデモ集。 ページ切替時のアニメーション等を実装したライブラリは他にもありますが、こちらは各要素にCSSプロパティを設定して細かくアニメーション制御したデモ集です。 パラメータの調整で自由に動きをカスタマイズすることもできそうです 関連エントリ ページ遷移を意識させないアニメーションによるページ切り替え効果実装 アニメーションするプログレスバーを実装できるjQueryプラグイン「barIndicator」 テキストを独特の虹色アニメーションさせられる「Rainbow.js」 流行りのページスクロールによるアニメーション効果が多数収録されたサンプル集
CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS MEDIA
mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。本記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。 そもそもブレンドモードとは？ ブレンドモードはクリエイティブな表現を作る上での基本機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、XDや、Figmaで搭載されていて、レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。本記事ではCS
ヒーローイメージにCSSで実装するグラデーションを組み合わせたサンプル - NxWorld
ヒーローイメージとはファーストビューでドーンと表示される大きなイメージのことで、海外だけでなく国内でも取り入れているサイトを見かけることが多くなってきました。 そんなヒーローイメージにCSSで実装したグラデーションを組み合わせたサンプルです。 グラデーションを重ねる 単純に画面いっぱいに表示した背景画像の上にグラデーションを重ねたものです。 HTMLは.heroを指定したdiv要素のみを使用し、CSSは下記のように記述します。 .hero { height: 100vh; background: linear-gradient(-45deg, rgba(229,93,135,.7), rgba(95,195,228,.7)), url(background.jpg) center center / cover no-repeat; }
webnonotes.com - webnonotes リソースおよび情報
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.
Show Image Under Text (with Acceptable Fallback) | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Updated April 2014 with more modern information. WebKit supports the cool background-clip CSS3 property, which you can use to do some pretty neat stuff. The first time we touched on it was the iPhone Slide-to-unlock idea where we set a gradient to animate through the background of the text.
今すぐ試してみたくなる！CSS3やjQueryで実装できるリッチなエフェクト6選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのモモコです。 今回はjQueryやCSS3を使用したリッチなエフェクトやhover効果をまとめた記事の中から、スタイリッシュなエフェクトを幾つかご紹介します。 CSS3やJqueryで実装出来るリッチなエフェクト6選 3D Thumbnail Hover Effects http://tympanus.net/Tutorials/3DHoverEffects/ 紙のように画像を折り畳んだりめくったりするようなエフェクト。とてもリアルですね…！思い切ってサムネイルに動きをつけたい時に役立ちそうです。 Scrollable Thumbs Menu with jQuery http://tympanus.net/Tutorials/ScrollingThumbs/ ミニギャラリー的な用途に使えそうなエフェクト。左下のメニューにカーソルを当てるとサムネイル画像の一覧が縦にず
CSS3で実現した多数のホバーエフェクト実装CSS「Hover.css」:phpspot開発日誌
Hover.css - A collection of CSS3 powered hover effects CSS3で実現した多数のホバーエフェクト実装CSS「Hover.css」。 ボックスが浮き上がったり、拡大アニメーションしたり、ボーダーがアニメーションしたり、影がアニメーションしたり、めくり効果を得たり等、実に様々なホバーエフェクトを実装できます。 ホバーアニメーションはもうこれでお腹いっぱいというグライの多数のアニメーションが実装されています。 関連エントリ レスポンシブ対応のサイト構造作成用の軽量CSSフレームワーク「Layers CSS」 ピュアCSSなローディングアニメーション実装サンプル 生のCSSからスタイルガイド用ドキュメントを自動生成できる「Kalei」 好みのチェックボックスのデザインが簡単に作れる「CSS Checkbox」 フラットデザインでCSSベースの読
JavaScriptで制御しているCSS3のtransitionを途中で中断させる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアチームのづやです。 CSS3のtransition便利ですよね。 JavaScriptから制御してると、jQueryでanimateをstopさせるときみたいに途中で動きを止めたいことがありました。そんな時どうすればいいかわからなかったので、調べてみました。 JavaScriptから制御しているCSS3のtransitionを途中で中断させる方法 動かしてるstyleを上書きしてしまう これが一番ベターっぽい。中断したいタイミングで対象となってるstyleを上書きすると止まってくれるようでした。 <!-- こんな要素があって --> <input type="button" name="start" id="start" value="開始"><br> <input type="button" name="stop" id="stop" value="停止"><br>
Hover.css - A collection of CSS3 powered hover effects
2D Transitions Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward Backward Background Transitions Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Bootstrapは無し、HTML5とCSS3のシンプルなコードで実装されたレスポンシブ対応のテンプレートのまとめ
Clippy — CSS clip-path maker
iHover CSS3 hover effects pack
Webデザインのすごいアイデアや細かいこだわりがいっぱい！素晴らしいUXを堪能できるサイトのまとめ
Onsen CSS Components
awesome-css-tutorials-2014-spring.html
Magic Animations CSS3
iHover
CSS Property Advent Calendar 2013 - Adventar
