Webデザイン

【jQuery】画像のドミナントカラーを背景色にする「jquery.adaptive-backgrounds.js」

画像のドミナントカラーを抽出して、親要素の背景に設定するちょっと変わりダネのjQueryプラグイン「adaptive-backgrounds.js」のご紹介。

【JS】簡単な記述でCSSアニメーションを実装できる「AniJS」

animate.cssと併用してクリック・マウスオーバー・スクロールなどのイベントで簡単にアニメーションを実装できる「AniJS」が便利そうなのでメモ。

バーガーメニューなどアニメーションで切り替わるボタンを生成できる「Transformicons」

レスポンシブWebデザインなどのグローバルメニューで使えそうなアニメーションで切り替わるボタンを生成できるジェネレーター「Transformicons」の紹介です。

SVGで作成されたローディングアイコンセット「SVG Loaders」

CSSやJavaScriptを使用しないで簡単に実装できる、SVGで作られたフラットデザインの超軽量ローディングインジケーター「SVG Loaders」を紹介します。

コピペするだけで使えるCSSボタンジェネレーターまとめ

フラットなボタンから、グラデーションをかけた立体感のあるボタンまで、デザインをしてコピペするだけで使えるCSSボタンジェネレーターを厳選して10サイト紹介します。

【JS】マウスの動きに合わせて影の角度が変化する「shine.js」

テキストや要素にシャドーを掛けられるJavaScriptライブラリshine.jsのご紹介。マウスの動きに合わせてシャドーエフェクトがスムーズに心地よく変化します。

【jQuery】リアルな波紋を再現するプラグイン「jQuery Ripple」

マウスの動きやクリックに合わせて指定した要素にリアルな波紋のエフェクトを掛けるWebGLをベースにしたjQueryプラグイン「jQuery Ripples」をご紹介。

センスが磨ける?Webデザイナー向けのクイズ・ゲームサイト

デザイナーが仕事で使用するアプリケーションでの操作や、色彩感覚・タイポグラフィまでゲーム感覚でチャレンジできるサイトがいろいろあったのでまとめてみました。

CSSをショートハンドに書き換えてくれる「SHRTHND」

CSSを簡単にショートハンドに書き換えてくれるジェネレーター「SHRTHND」のご紹介。納品前・公開前にCSSを整形したい時に便利なジェネレーターです。

Web上で差分が確認できるテキスト比較ツール「difff」

Web制作で「どうして動かない?」「ん?…なんかおかしい?」なんて時にファイルを比較して問題を解決する事があると思います。そんな時に便利なWeb上で差分が確認できるテキスト比較ツール「Difff」のご紹介。

【Webデザイン】Webサイト制作に役立つブックマークレット

Webデザイン制作の前に、競合サイトやイメージに近いサイトの情報を参考程度に調べる事があると思います。そんな時、閲覧しながら調べられる役に立ちそうなブックマークレットをご紹介。

【jQuery】サイドバーをスライドで表示できるSimple Sidebar

サイドメニューを左右からスライドで表示することができるjQueryプラグイン「Simple Sidebar」の紹介です。最近よく見かけるドロワーメニューですが簡単に設置できるのでメモ。

【jQuery】ページ移動時にアニメーション効果をつけられるAnimsition

ページ遷移時に様々なアニメーション効果をつけられるJqueryプラグイン「Animsition」の紹介。フェードインフェードアウト・スライド・ズーム・フリップなど58種のアニメーションが用意されてます。

【jQuery】要素を3D回転させるプラグインTURNBOX.js

要素をくるっと回転させる事ができるTURNBOX.jsの紹介。ボタンだけでなくフォームやダイアログ、アップローダーまで動きのある魅力的なUIを実装できるJqueryプラグインです。

【CSS】色々と使える疑似クラス:nth-child()の実用例

要素の子要素ごとにスタイルを指定できるCSS3の疑似クラス:nth-child()は非常に便利ですよね。表組・カレンダーの装飾やレスポンシブ等で使用することも多いので実例を交えまとめてみました。

RANDOM POST
  • CSSをショートハンドに書き換えてくれる「SHRTHND」
  • 【jQuery】Youtubeがウィンドウ内に表示されたタイミングで再生させるプラグイン
  • 【フリー素材】海外のフリー写真素材サイト「StockSnap.io」
  • フラットな可愛らしいアバターアイコンセット「Free Cute Avatar Icon Set」
  • 無料で簡単にホームページを作成できる「Wix」の使い方とレビュー
  • 様々なエフェクトを実装できるパーティクルエンジン「Proton」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント63選
  • 【2020年版】無料で使えるフリーイラスト素材サイト30選(商用利用可)
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
  • 【2020年版】Google Fontsの使い方とおすすめ日本語フォント
  • Photoshopで簡単に背景を伸ばすテクニック
PICKUP
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • 【2020年版】無料で使えるフリーイラスト素材サイト30選(商用利用可)
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
  • Photoshopで画像を切り抜くテクニック【初心者向け】