[2015年3月時点のホバーエフェクト総まとめ(CSS3/jQuery)] 他 海外のCSS情報 | WEBデザインすーぷ
2015年3月6日 CSS 250以上ののjQuery＆CSS3Hoverエフェクト（Plugins＆チュートリアル） 250+ jQuery & CSS3 Hover Effects (Plugins & Tutorials) jQuery and CSS3 made a big difference in the webdesign industry. Lot of new features added to make dynamic websites. Hover effects are often used in websites to add usability. jQueryとCSS3がwebデザイン産業における大きい相違を作りました。新しいたくさんの特性がダイナミックなウェブサイトを作るために付け加えられました。Hoverエフェクトが有用性を加えるためによくウェブサイトで使わ
![[2015年3月時点のホバーエフェクト総まとめ(CSS3/jQuery)] 他 海外のCSS情報 | WEBデザインすーぷ](https://cdn-ak-scissors.b.st-hatena.com/image/square/8837365c90b4b16c12024bcc2473ddfc6727d696/height=288;version=1;width=512/http%3A%2F%2Fi0.wp.com%2Fweb.html-css-javascript.com%2Fwp-content%2Fuploads%2F2015%2F03%2Fi5.jpg%3Ffit%3D723%252C240)
12種類 CSS3アニメーションで枠線に楽しい動きをつけてみた | Stronghold Archive
どうもこんにちは。Toshikuraです。今回のTipsは【12種類 CSS3アニメーションで枠線に楽しい動きをつけてみた】です。Flash主流時代にはよく見たので作ってみました。実装は比較的簡単ですのでよろしければ遊んでみてください。まずはデモ（クラス切り替えでの実装）｜デモ（マウスホバーでの実装）を見ていただけると内容が把握できるかと思います。 実装方法 実装には下記HTMLが必要になります。枠線とは書きましたが正確にはそれぞれ上下左右に配置されたDIV要素になります。 HTML <div class="box"> <h1>1</h1> <div class="bd1 bd"> <div class="bdT"></div> <div class="bdB"></div> <div class="bdR"></div> <div class="bdL"></div> </div> </
Loaders Kit - CSS3で作るローディングアイコン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebアプリケーションはAjaxを多用するので処理状態を分かりやすくためローディングアイコンを使うと良いでしょう。通常その手のリソースにはアニメーションGIFが使われますが、色やサイズを変えたいと思う度に素材を作らないといけないのは不便です。 そこで新しいローディングアイコンを提供してくれるのがLoaders Kitです。なんとCSS3を使って多彩なローディングアイコンを提供しています。 画像では分かりづらいので動画にて。 実際の使い方ですが、例えば左上のタイマーの場合は次のようなスタイルシートになっています。 /* Timer*/ .timer{ width: 24px; height: 24px; background-color: transparent; box-shado
jQuery One Page Scroll by Pete R. | The Pete Design
Ready-to-use plugin All you need is an HTML markup, call the script and BAM! <div class="main"> <section>...</section> <section>...</section> ... </div> $(".main").onepage_scroll(); Pretty Neat Eh? You can customise the animation timing, the selector or even the animation easing using CSS3. I can't wait to see what you guys will come up with. Don't forget to grab them for free on Github'
フラットだけど立体的なCSS3アニメーション付モーダルダイアログ実装デモ:phpspot開発日誌
Creating CSS3 Animated Modal Windows in an Image Gallery | InsertHTML フラットだけど立体的なCSS3アニメーション付モーダルダイアログ実装デモ。 フラットデザインなのに立体的なUIはなかなかクールで、フラットデザインを実装する上で今後欠かせない要素となってきそうです。 そのモーダルダイアログを実装するデモが公開されており、一見の価値ありです。 関連エントリ ハイクオリティなソーシャル向けのフラットアイコンセット BootstrapベースのフラットUI実装フレームワーク「Furatto」 文具等のフラットなステーショナリーアイコンセット フラットな６２種類のファイル・タイプアイコンセット「File Type Icons」
HTML5 × CSS3 × jQueryを真面目に勉強 – #17 Bootstrap をカスタマイズしてオリジナルテーマを作ってみた | DevelopersIO
トレンディ且つナウい Web ページを構築するための CSS フレームワーク（※枠組み）です。フレームワークというとなんだか大袈裟な響きですが、実態は単なる CSS と JavaScript という２つのテキストファイルだけで特別な使い方等もありません。利用者はこれらを HTML ファイルに読み込ませたのち、Bootstrap 側で既に定義済みのクラスを各 HTML 要素に指定するだけで、自分は一行も CSS を書くことなく高品質な Web ページが作れてしまったりします。 Twitter Bootstrap うろ覚えですが、2011年の夏頃に最初のメジャーバージョンがリリースされました *1。当時 Twitter のエンジニアで現在は Github にお勤め中の Mark Otto 氏によって開発され、2013年4月時点ではバージョン2.3.1が最新版となっています。またバージョン3.0
アイデア満載！レスポンシブ対応のナビゲーションを実装するチュートリアルのまとめ
デスクトップ、タブレット、スマートフォン、それぞれに適した表示にするナビゲーションを実装するチュートリアルを紹介します。 CSSで、JavaScript併用、jQueryのプラグインで簡単実装など、いろいろあります。
もうCSS3で悩まない チートシート/リファレンス系サイトまとめ
先日書いたCSS小ネタまとめのようにCSS3も使えば使うほど味が出て、応用次第で色んなことできて楽しいですよね。私も大好きです、CSS3。 IE非対応云々のためハックがどーこーとかめんどくさいことはありますけど。 というわけでここらで初心者からパワーユーザーまでぜひおさえておきたいチートシートページやリファレンスサイトをまとめておきますので参考にどうぞ。 CSS3の困った/アレが知りたい、はここで調べよう 筆者選で7つほど。他にもいろいろあるんですが、読みやすいのメインに挙げてみました。 1.E BISUCOM TECH LAB : CSS3プロパティ＆ブラウザ対応一覧 恐ろしくまとまり過ぎているページ。もともと書籍の巻末付録だったものをWebで公開しているらしいです。各プロパティの対応ブラウザが一目でわかるのがありがたい。 ベンダープレフィックスの要・不要とかまで書いてます。時々更新され
モダンなサイトを作成するためのCSS3チュートリアル集:phpspot開発日誌
Latest CSS3 Tutorials For You To Create Modern Websites モダンなサイトを作成するためのCSS3チュートリアル集。 CSS3のテクニックがあつまったチュートリアル集のご紹介。自分に無い知識を取り入れるために参考にできそう。 いつも進んでる感を感じますが、もうずっと進化し続けるんでしょうね。 関連エントリ CSS3でChrome風ウィンドウを作成するチュートリアル 使えない(?)CSS3ジェネレーター「Useless CSS3 Generator」 CSS3でボーダーを超かっこよくアニメーションするサンプル CSS3ベースのオシャレな価格表作成チュートリアル
これは見ておくべきCSS3＆HTML5の実験１６サイトまとめ:phpspot開発日誌
16 Ridiculously Impressive CSS3 & HTML5 Experiments | Free and Useful Online Resources for Designers and Developers これは見ておくべきCSS3＆HTML5の実験１６サイトまとめ 数年前なら誰もがFlashで出来ていると疑わなかったようなデモがHTML5＆CSS3で実現されています。 これだけのことがWEBでできるんだという部分を把握しておく意味でも見ておいたほうがよさそうです これだけ出来ることが増えていくと自由な反面、WEBも開発コスト等があがっていきそうで怖いところがありますね 関連エントリ WebCamで撮影をHTML5で実現するデモ HTML5を使ったクールなサイトデザイン集２１ HTML5のゲームエンジン「Quintus」
HTML5 × CSS3 × jQueryを真面目に勉強 – #13 iOSのUITableViewをjQueryで作ってみた | DevelopersIO
HTML5 × CSS3 × jQueryを真面目に勉強 – #13 iOSのUITableViewをjQueryで作ってみた 2013年1月14日にjQuery Mobile 1.3.0 Betaがリリースされました。 Announcing jQuery Mobile 1.3.0 Beta jQuery Mobile 1.3.0 Betaの紹介記事はこちら。 AjQuery Mobile 1.3.0 Betaがリリース！変更点まとめ - へっぽこプログラマーの日記 弊社でもモバイルコンテンツの開発案件にて徐々に利用実績が積み重なっておりますが、初期ベータ版の頃より「なんで一向に実装されないのかなー…？」と僕がずっと手をこまねいて待ち続けている機能があります。 UI Table View風リスト iOS端末ではおなじみのリストビューです。 リスト項目をインデックスごとにグルーピングし、リス
[CSS]h1一つだけでこんなにかわいいレトロ風リボンが実装できるスタイルシート
このレトロ風の凝ったデザインのリボン、HTMLはh1要素だけで実装されています。 余分なspan, div要素もなく、もちろん画像は一切使用されていません。 Single Element Pure CSS3 Double Fold Ribbon CSSはそれなりのボリュームになりますが、スタイルシートだけでデザインする見出しのバリエーションとしてストックしておきたいですね。 HTML HTMLは非常にシンプルです。 「contenteditable」はコンテンツの編集許可で、見出しのテキストを編集できます。 <h1>Single Element - Pure CSS3 - Type here...</h1> 外部スクリプト スタイルシートのベンダープレフィックスを自動で付与するために、外部スクリプトを使用します。 CSS スタイルシートにベンダープレフィックスを記述すれば上記のスクリプトは
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinterest) そんな女子力の
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
HTML5 × CSS3 × jQueryを真面目に勉強 – #9 CSS3アニメーション（Transition） | DevelopersIO
この順序で指定するのが必須というわけではありませんが、durationとdelayの順序だけは決まっており、逆にすることが出来ません。 記述例) transition /* * @transition-duration * @transition-property * @transition-timing-function * @transition-delay */ transition: .3s background ease .5s; 当記事執筆時点（2012年11月）では、このプロパティに対してベンダープレフィックスをつけて指定することになります。 ベンダープレフィックスをつけてみた - transition -webkit-transition: .3s background ease .5s; -moz-transition: .3s background ease .5s;
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEBデザイナ必携のHTML5&CSS3のコードジェネレータ「HTML5 & CSS3 Tools and Tutorials」:phpspot開発日誌
Engadget | Technology News & Reviews
CSS3を使わなくてもつい使いたくなる、楽しくて実用的なオンラインジェネレーター -Useless CSS3 Generator
IDEA * IDEA
