CSSのみで実装するキャプションエフェクト 20 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
CSSのローディング・アイコンのコスト
今までは主にアニメーションGIFで作られていたローディング・アイコンをCSSアニメーションで作るみたいなのが流行っている。面白いとは思うし、ちゃんと作ればスケーラブルなので便利そうでもある。けれどもローディング・アイコンを表示するための空要素が必要になり、かつ後にそれを消さなくてはならない。CSSだけだと面倒くさそうだ。 どういうローディング・アイコンかはこの際問題ではないので、とりあえずmain要素以下に何かしら(仮にサムネイルとする)をロードするまでローディング・アイコンを表示することを考えてみる。普通はJavaScriptでローディング・アイコンの追加→サムネイルのビルド→ローディング・アイコンの削除→サムネイルの追加とやるわけだけど、ローディング・アイコンの追加と削除でDOM操作を伴うのはコストがある気がする。 <main id="result"> <div class="spin
ウェブのデザインやアイデアによい刺激をうける日本のウェブサイトのまとめ
いつもは海外のウェブサイトをテーマごとにまとめて紹介していますが、たまには日本のもと思い、まとめてみました。 デザインやアイデアによい刺激をうける国産のウェブサイトを紹介します。 海外のも定期的にまとめています。 面白いアイデアを使った最近のウェブサイトのまとめ -2014年3月 デザインや仕掛けが素晴らしいウェブサイトのまとめ -2014年1月 MIDORI AOYAMA DJ/プロデューサー Midori Aoyama氏のサイト。フラット・スクロールの定番のトレンドに斜めのグリッド、ポリゴン、アニメーションなど最新のデザインが非常にかっこいいです。制作会社はLETTERS, INC.で、今日リニューアルしたばっか！
擦れた雰囲気を表現できるグランジテクスチャセット「Six Free Grungy Metal Texture」
デザイン制作時に利用する素材の中でも定番として幅広いシーンで活躍してくれるテクスチャ。種類も非常に豊富でいろいろな表現や使い道があるため、デザイナーにとっては欠かせない素材ではないでしょうか？そんな中今回紹介するのは、擦れた雰囲気を表現できるグランジテクスチャセット「Six Free Grungy Metal Texture」です。 自然に劣化した風合いを活かしたグランジテクスチャがセットになってフリーで配布されています。 詳しくは以下 セットは全部で6種類。どれも錆や、長年の外気からの影響を受けた傷や痛みなどに侵されており、実際の素材としては補修が必要な状態ですが、テクスチャ素材としては良い味として、デザインにアクセントを加えることができそうです。背景としてそのまま、また加工して使用したり、ロゴデザインやグラフィック作品などのパーツデザインとして切り取ってみたりと、使い方によってさまざま
さまざまな種類のフリーアイコンフォントセット「20 More Sets of Free Icon Fonts」
打ち込むだけで簡単にさまざまなアイコンを利用できるアイコンフォント。多彩なデザインシーンで活躍してくれます。今回はそんなアイコンフォントをまとめた「20 More Sets of Free Icon Fonts」を紹介したいと思います。 （Dashicons） シンプルなテイストのものを中心に、いろんなテーマのアイコンフォントが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Ionicons: The premium icon font for Ionic Framework 非常にシンプルなデザインなので、幅広いシーンで活用することができそうですね。 Dribbble – Icons V.3 – Free Download by Hüseyin Yilmaz ☺ 丸みを帯びた可愛らしく柔らかい質感が特徴のアイコンフォント。主流のフラットデ
HTMLの色をミックスしたり、色にフィルタをかけたりして操作できるjQueryプラグイン「xcolor」:phpspot開発日誌
jQuery color plugin xcolor ? Code is poetry HTMLの色をミックスしたり、色にフィルタをかけたりして操作できるjQueryプラグイン「xcolor」。 #xxxxxx の形式を操作するのはちょっと難しいと思っていましたが、このプラグインで簡単にできそう。 既存の色をセピア化、グレー化 補色、WEBカラーへの変換 特定色の類似色を得る かなり多機能です。 ユーザが入力した色をベースにカラースキーマ等を自動生成する場合に使えそうです 関連エントリ 画像の親エレメントの背景を画像のカラーに合わせられるjQueryプラグイン「adaptive-backgrounds」 色の細かなカスタマイズが可能なスライド式カラーピッカー「jQuery Color Picker Sliders」 オシャレで高機能なドロップダウンを実装できるjQueryプラグイン「jqu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
アナログ時計のUIで時刻を入力できるjQueryプラグイン「ClockPicker」:phpspot開発日誌