Tag Archives: CSS3

1215/10月
zoom-slider-title-gazou

【TIPS|ズームスライダー】高速スライド&ズーム表示の画面遷移がインパクト大!

アニメーションしながらスライダー&ズーム表示する「ズームスライダー」。 demo 「ズームスライダー」の設置手順 htmlファイル内にCSSファイルとJSファイルをリンクさせる まず、以下のサイトから外部ファイルをダウンロードする。 元サイト http://tympanus.net/codrops/2015/07/06/zoom-slidRead More…

0215/6月
capture-title-version

【TIPS】画像ホバーの際アニメーション効果をつけるCSS3

スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプション表示ができるスタイルシート10パターンのまとめ。 記述はまず、どのパターンでも共通に適用させるCSSを設定して(ダウンロードした外部ファイルをリンクさせる)、あとはパターンごとに異なる個別のhtmlを書いていくという流れ。 目  次 ・head内に共通のRead More…

1515/5月
light-box-thumbnail

【TIPS】CSSだけで実装できる!! エレガンチックな「LIGHT BOX」

CSSだけで表現できるエレガンチックな「LIGHT BOX」3パターン。 記述の手順は、以下のサイトからソースをダウンロードし、対象とする画像の<img>タグにコードをつけて、あとはパターンごとの個別のCSSをリンクさせるという流れ。 http://tympanus.net/codrops/2011/12/26/css3-lightbox/ パタRead More…

2715/4月
sliding-image-panels-capture

【TIPS】画像を4枚のパネルに分割してエフェクトをかけたスライダー

画像を4枚のパネルに分割してエフェクトをかけたスライダー4パターン。 まず、共通のhtmlを記述を記述してから、パターンごとのCSSを記述していく流れ。 共通のhtmlを記述を記述 まずは共通のhtmlを記述していく。 画像内のテキストは、<div class=”cr-titles”>のタグ内で書き換える。  【 htmlRead More…

1715/4月
ihover-capture-1

【TIPS】画像ホバーの際アニメーション効果をつけるCSS3 – ihover –

スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプションを表示するスタイルシート。CSS3だけでここまでできるとは…。 目  次 ・hover effect【1】左側と右側からテキストがスライドしてくるエフェクト ・hover effect【2】画像を画面上側に、テキストを下側にエフェクトをかけて配置 ・hoRead More…

1315/4月
four-boxes-capture

画像を4つのパネルに分割&エフェクト効果のスライドショー -Four Boxes Slideshow-

画像を4つのパネルに分割してエフェクトをかけたスライドショー3パターンのコードまとめ。 まず、ダウンロードした外部ファイルの中にある3パターン共通のCSSファイル(3ファイル)とJSファイル(3ファイル)を設定する。  【 html 】  1   <head>  2       <link rel=”stylesheRead More…

1215/4月
css3-logo

【TIPS】CSSで作るドロップダウンメニューのドロップ表示5パターン

CSSで作るドロップダウンメニューのドロップ表示5パターンです。 コードの書き方は、どのパターンでも共通となるhtmlと CSSに加え、パターンごとに個別に設定するCSSを記述していきます。 共通部分になるhtmlとCSSを記述する まずは、共通部分になるhtmlを記述していきます。  【 html 】  1   <ul id=&#8221Read More…

0815/4月
css3-logo

【TIPS】画像ホバーの際アニメーション効果をつけるCSS3 – InContent –

スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプション表示をする スタイルシート6パターン。 基本的にどのパターンで実装する場合でも、以下のサイトからダウンロードした外部ファイルの中にあるCSSファイルを一つ設置するだけでOK。 https://github.com/brunodsgn/incontent パターンごとに変えるRead More…

1515/3月
sweet-thumbnails-preview

サムネイルプレビュー付きスライダー【 Sweet Thumbnails Preview Gallery 】

サムネイルプレビュー付きスライダー。 demo 記述の流れは、まず対象とする<img>タグにhtmlタグを追加して、以下のサイトから外部ファイルをダウンロードする。 http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/ 外部ファイルの中からCSS、Javascript、JRead More…