CSSのみで実装できる！テキストリンクのホバー時に、カラーをアニメーションで変更させる実装方法のまとめ | コリス

2020/03/26 22 users 要件 スライド 実装 コリス テクニック

テキストリンクをホバーした際に、テキストのカラーをスライドのアニメーションで変更させるピュアCSSの実装方法を紹介します。 IEには対応してないけど実装が簡単な方法、IEに対応しているけど実装がちょっと面倒な方法など、プロジェクトの要件に適したテクニックをご利用ください。 4 Ways to Animate the Color of a... 続きを読む

CSSオンリーで作られたLightBox「css-lightbox」:phpspot開発日誌

2015/12/10 11 users lightbox lightGallery CSS 全部 機能

Cerealkillerway/css-lightbox GitHub CSSオンリーで作られたLightBox「css-lightbox」 CSSのみで作られたとは思えないような感じのLightboxがピュアCSSで実現されています。 関連エントリ 必要な機能は全部入ったモダンなLightBox実装jQueryプラグイン「lightGallery」 レスポンシブで全画面やズーム表示に対応したLi... 続きを読む

ピュアCSSなローディングアニメーション実装サンプル:phpspot開発日誌

2013/12/13 17 users phpspot開発日誌 ever ローディングエフェクト

ピュアCSSなローディングアニメーション実装サンプル 2013年12月13日- Cleanest CSS spinner, ever | Lea Verou ピュアCSSなローディングアニメーション実装サンプル。 スマホなんかでgifアニメーションがうごかなかったりしてローディングエフェクトが動いていない場合がありますが、ピュアCSSで動作し、かつRetinaディスプレイ等でも劣化なしということで... 続きを読む

ピュアCSSで描かれたアイコンセット「Cikonss」:phpspot開発日誌

2013/06/20 35 users アイコンセット class CSS ライブラリ さい

ピュアCSSで描かれたアイコンセット「Cikonss」 2013年06月20日- Cikonss | Pure CSS Responsive Icons ピュアCSSで描かれたアイコンセット「Cikonss」 アイコンフォントは利用せず、CSSで描画されるアイコンのライブラリです。span class="アイコンタイプ" とすればアイコンが描画できるというものです classによってアイコンのサイ... 続きを読む

Yahooが作ったピュアCSSのUIライブラリ「Pure」:phpspot開発日誌

2013/06/03 90 users pure グリッド CSSモジュール UIライブラリ テーブル

Yahooが作ったピュアCSSのUIライブラリ「Pure」 2013年06月03日- Pure Yahooが作ったピュアCSSのUIライブラリ「Pure」 グリッド、フォーム、ボタン、テーブル、メニュー等を実現するCSSモジュールです。 なんとなくBootstrapっぽい感じがしますが、JavaScriptレスというのが特徴なんでしょうか。 今時JavaScriptは普通に動くでしょ、という方もい... 続きを読む

キューブが3Dに回転するUIを作れる「jqCube」:phpspot開発日誌

2012/09/20 18 users div Element Cube キューブ マリオ

Rotating Cube キューブが3Dに回転するUIを作れる「jqCube」 面には普通のHTMLが書けてそのままレンダリングされます。 「おれ、３D分からないけど、３Dっぽいものが作れるぜ」と同僚にいうことが出来るでしょう。 使い方は面をDIVで定義して、$(element).cube() とやるだけでOK なんという簡単さでしょうか。 関連エントリ ピュアCSSでマリオを3D表示したデモ ... 続きを読む

ピュアCSSで実装するスクロール要素へのドロップシャドウ効果:phpspot開発日誌

2012/05/09 20 users phpspot開発日誌 background ブッダ 上下

Scrolling shadows ピュアCSSで実装するスクロール要素へのドロップシャドウ効果。 スクロール位置がトップにある状態だと下位置にシャドウが表示。 中間位置までスクロールすると上下に表示 フッタに移動すると下のみに表示 ピュアCSSでこれが実装できるみたいです。 :before, :after 内のbackgroundを使ってうまく実装されているみたいですね 関連エントリ ページ内ス... 続きを読む

カッコよくデザインされたピュアCSS3なアコーディオン実装デモ:phpspot開発日誌

2012/02/24 25 users phpspot開発日誌 tar Codrops テクニック

Accordion with CSS3 | Codrops カッコよくデザインされたピュアCSS3なアコーディオン実装デモがチュートリアル付きで公開されています。 次のようなデザインでそのままサイトに使えそうです。このご時世、ピュアCSSでやる必要もないかとは思いますが、テクニックは学べます ダウンロードして素材として使っちゃいましょう 関連エントリ CSS3単体で動く垂直アコーディオンを:tar... 続きを読む

ピュアCSSなソーシャルサイトのログインボタン:phpspot開発日誌

2011/11/24 24 users ログインボタン phpspot開発日誌 CSS ブラウザ 素材

CSS3 Social Sign-in Buttons ピュアCSSなソーシャルサイトのログインボタン。 CSSを使った次のようなボタンが簡単に実装できる素材です。 画像を使わないので対応ブラウザではすぐ描画されるのがいいです 対応ブラウザはGoogle Chrome, Firefox 3.5+, Safari 4+, IE 10+, Opera 11.10+. 関連エントリ TwitterやFa... 続きを読む

ピュアCSS3のコンテンツスライダー:phpspot開発日誌

2011/11/14 24 users phpspot開発日誌 コンテンツスライダー 関連エントリ

The Pure CSS3 Content Slider ピュアCSS3のコンテンツスライダーが公開されています。 色々できるのはわかってきたんですが、次から次とピュアCSSなものが出来ていってますね。 開発者としてはマルチプラットフォームで作りやすい方を選ぶのが自然ですがこういう可能性を知っておくことも重要かも。 良い感じにアニメーションしてます 関連エントリ ピュアCSS3でタイピングアニメー... 続きを読む

ピュアCSSなのに折りたたみ可能なツリーメニュー実装例:phpspot開発日誌

2011/10/18 48 users phpspot開発日誌 MENU CSS そこら辺 ツリー

Pure CSS collapsible tree menu | The CSS Ninja - All things CSS, JavaScript & HTML ピュアCSSなのに折りたたみ可能なツリーメニュー実装例。 次のような折りたたみが可能なツリーが実装されています。どうやってやってるの？というところですがそこら辺も記事内で解説されています。 デザインもいい感じです 関連エントリ 綺麗な... 続きを読む

良い感じの水平アコーディオン実装jQueryプラグイン「liteAccordion」:phpspot開発日誌

2011/10/13 53 users アニメーショ phpspot開発日誌 関連エントリ 選択肢

liteAccordion - a horizontal accordion plugin for jQuery 良い感じの水平アコーディオン実装jQueryプラグイン「liteAccordion」 次のようなデザインのアコーディオン実装プラグインです。 シンプルデザインにもすることが出来ます。 アコーディオン実装の際の選択肢として覚えておいてもよいかも。 関連エントリ ピュアCSSでアニメーショ... 続きを読む

ピュアCSSでページ上に通知を出すチュートリアル:phpspot開発日誌

2011/09/21 29 users チュートリアル phpspot開発日誌 Twitter 通知

Pop From Top Notification | CSS-Tricks ピュアCSSでページ上に通知を出すチュートリアル Twitterなんかで、ページ上に表示されるあの通知をピュアCSS(CSS3利用）で実現するテクニックです。 当然、CSS3対応していないブラウザでは使えませんがテクニックとして知っておいても損はなさそう。 関連エントリ Ajaxスタイルのローディングも画像を使わずピュア... 続きを読む

ピュアCSSでアニメーションするアコーディオン実装デモ:phpspot開発日誌

2011/06/06 39 users phpspot開発日誌 iPhone 関連エントリ 仕方

Pure CSS3 accordion ? Red Team Design ピュアCSSでアニメーションするアコーディオン実装デモが公開されています。 なかなかいい感じにCSS3でスタイリングされてるのもポイント。iPhoneでも試してみましたが普通に動作しました。 デモページを見る スマートフォン向けにいいかもしれませんね。 関連エントリ グリッドアコーディオンで新しい情報表示の仕方 少ないスペ... 続きを読む

Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ:phpspot開発日誌

2011/05/30 53 users ローディング Ajaxスタイル phpspot開発日誌 デモ

Ajax Style Loading Animation in CSS3 ( no Images ) - nikesh.me Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ。 マシンにもよるかもしれませんが、なんともなめらかに動作してくれます。 デモページ 画像サイズは最近のブロードバンド環境では微々たるものとはいっても、ピュアCSSのバイト数にはかなわないと思います。 ペ... 続きを読む

ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６:phpspot開発日誌

2011/05/27 50 users phpspot開発日誌 CSS 引き出し 全部CSS 手間

56 Pure CSS Effects Javascript Alternatives Including Demos | Designs Mag (Designs Magazine) ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６。 全部CSSでやっちゃうのはむしろ手間になったりしそうですが、CSSでもできるという引き出しをもっておくと思いの外簡単にできることもおおそう... 続きを読む

ピュアCSSでスライドアウトインタフェースの実現:phpspot開発日誌

2011/04/21 27 users phpspot開発日誌 実現 hover JSなし 再度

Pure CSS Slide-out Interface ピュアCSSでスライドアウトインタフェースの実現。 ページの再度にちょこっとタブ風の画像を置いておいて、クリックするとアニメーションしながら表示されるあのUIがJSなしで実装されています。 具体的なサンプルCSSとマークアップが提供されています。 :hover と transition を使って実装されているようですが、こんなに簡単にできる... 続きを読む

CSSオンリーでJSを使った風のよく使われるテクニック集１０:phpspot開発日誌

2010/06/02 299 users cssオンリー phpspot開発日誌 実際

Creating 10 Most-Used Javascript Techniques Using Pure CSS Styling | DevSnippets CSSオンリーでJSを使った風のよく使われるテクニック集１０。 よく使われているかどうかは実際はよくわかりませんが、ピュアCSSということでなかなか凄いテクニック集がまとまっています。 我こそはCSSマスターという方は覚えておいてもよさそ... 続きを読む