タグが付けられた記事一覧を表示しています。駆使して表現するイメージスライダーを作ってみます。複数のモーダルウィンドウを開閉するアイテムの一覧のサンプルコードをつくってみました。仕様に合わせて内容を更新済み。Plu...続きを読む【CSS】汎用性を重視したCSSアニメーションボタン30種類WebデザインテクニックWordPressテーマを制作する際、テーマごとでCSSボタン用の装飾(特にマウスオーバー時のエフェクト)をデザインするのですが、ユーザーがボタン用のセレクタのみで利用できるよう、一定の汎用性を考慮した条件下でデザインし...2017/08/30続きを読む【CSS】画像に色を重ね合わせてテキスト部分を切り抜く汎用的な方法は?Webデザインテクニック例えば、サイトのヘッダー画像やギャラリー形式のアーカイブページなどでは、画像の上にサイトタイトルや投稿タイトルとなる文字列を重ねて表示するデザインを施す場合、画像とテキストが同化して見難くならないよう、テキストが白文字な...2017/08/09続きを読む【CSS】clip-pathを利用してテキストをアニメーションで表示する方法WebデザインテクニックCSSのclip-pathというプロパティを利用すると、任意のHTML要素を指定したパスの形状に切り抜いて表示させることができます。利用されるケースでは、画像をパスで繋がれた図形の部分だけ切り抜いて表示するというパ...2017/08/04続きを読むCSSのみ!クリックでメニューが回転して開閉する3DアニメーションサンプルWebデザインテクニック今後制作予定のWordPressテーマのグローバルメニューのプロトタイプとして作成した、ハンバーガーアイコンをクリックすると、隠れていたメニューが奥から回転しながら起き上がって表示されるイメージのコンポーネントのサンプル...2017/07/09続きを読む簡単!超軽量!プラグインなしでページ遷移時にフェードイン・アウトさせる方法Webデザインテクニックサイト内の別ページへの切り替え時にフェードイン/フェードアウトなどのエフェクトを施してくれるJavascriptやjQueryプラグインはいくつかあります。ショートコード応用カスタマイズAMPモードについてアップデート。