CSSで和の波模様の青海波(せいがいは)のパターンをアニメーション付きで表現したもの
CSSだけで作られた和柄の青海波文様。日本の波を表す模様です。またアニメーションもついていて、すこし遊び感がある背景パターンです
CSS3で導入された not() を使ったhoverによってグレースケールを操作するデモンストレーション
CSS3のnot()を使った否定的なセレクタの使い方のデモンストレーション。マウスオーバーによる動作を否定的に行っています。また、not()を使うことでコードが短く書けるメリットも
border transparent を使った、背景を映し出す三角形を使ったテクニックと応用
CSSの擬似要素のborderを使って透明な背景が映し出される三角形を作り出すテクニック。応用することでいろいろな見せ方も可能になる
完成度の高い文字を美しく見せる、2つの色を指定するだけで使えるSCSSコード
文字を美しく見せるCSSのテクニック、SCSSで簡単に色々なカラーのバリエーションで作成することが可能。変更箇所はたったの2箇所でOK
2つのGIFアニメを重ねることで同盟部分に別の映像を重ねることで表現するテクニック
HTMLで2つの画像を組み合わせて合成することで、GIFアニメーションの効果と、GIFの透かし効果をうまく使って インパクトのある画像を作るテクニック
スクロールが可能なのを知らせる矢印マークの動きで、要素が裂ける感じが斬新なCSSを使ったアニメーション
wave simulation ちょっと、見たことない感じでとても斬新。 矢印マークがふわふわと動いて、スクロールができることを知らせることはよく使われますが、このアイディアは斬新。 矢印マークの動きと合わせて、矢印マー […]
テキストのエリアをぼかして、クリックでくっきり見えるようにするネタぼれ防止のアイディア
ネタバレ防止に使える、テクニック。CSSのtext-shadowを使ってぼかした状態で表示させ、クリックされた時に内容がクリアに見えるようにすることでネタバレを防止するアイディア
HTML5のvideoを画面いっぱいの背景にする方法
HTML5のvideoタグを使って、ブラウザの画面いっぱいに動画を背景として流す方法です。 videoタグとちょっとのCSSで実現可能です。
画像を使わずにCSSでエアメールの枠の模様を背景で作る方法
エアメールとはこんなやつです。最近はあまり見かけなくなりましたね、今は別のこの封筒じゃなくても手紙がちゃんと届くってことなんでしょうか？それでも文房具屋さんでは片隅に置かれてたりして、まだまだニーズがありますね。 そんな […]
テキストエリアがアクティブになるとプラベルの文字がピョンっと飛び出す 入力フォームのデザイン
お問い合わせフォームや、会員登録等のフォームで使われるような入力フォームで、その場所がアクティブにあると、中にあるラベルである文字が入力の箇所からぴょんと飛び出すアクションの入力フォームのデザインです。 文 […]
通常のテキストリンクをマウスオーバー時に、リンク感を更に出すアイディア
テキスト中に埋め込まれたテキストリンクでは、なんか物足りない。そんな時にこれを使うとぴったりかも
Tableのヘッダーが見えなくならないようにスクロールに合わせて常に表示されるように付いてくるようにするコード
テーブルのヘッダーの項目を常に表示できるようにするコード。これを使うことで、テーブルの途中で何の項目だったのか分からなくなってしまうのを防ぐことが出来る
画面全体が切り替わるダイナミックな演出のナビゲーションのアイディア 『Full Page Intro & Navigation』
画面全体に表示されるナビゲーションへの切り替えがダイナミックな演出のナビゲーションの導入の例。CSS3での変形とアニメーションをうまく組み合わせて作られたナビゲーションです
WEBサイトの背景いっぱいに、YOUTUBEの動画を流すjQueryプラグイン 『jQuery tubular』
ホームページ等のWEBサイトの背景をYOUTUBEを使って動画にする方法。jQueryとプラグインを使うことで、簡単に導入することが可能。またYOUTUBEからの配信なので転送量を気にする必要がない
文字の部分をbackground-clip: text;を使って背景をGIF動画にして見せるテクニック
background-clip: text;をつかってテクニック。背景にGIF動画を設置することで、テキストに目を引きつけるのに効果的。
要素を綺麗にブロック・レンガ状に並べてくれるjQueryプラグイン 『Masonry』
jQueryのプラグインで、自動的に要素を綺麗に整列してくれるプラグインです。 記事一覧や画像一覧等によく使われます。すべてが同じサイズの場合はCSSだけでなんとかなるんですが、そうは行かないケースも多々有ります。そんな […]
マウスポインターの位置に合わせて動くギャラリースライドがとても印象的 『Hover-Carousel』
Hover-Carousel Yair Even Or GIFアニメにしたもの マウスポインターの位置によって画像を、スマホとかでスライドさせるような感覚で操作できる印象的なスライド とてもめずらしい動作で […]
タグ要素一つだけで作れる、リボン見出しが作れる CSSコード 『Single Element Pure CSS3 Double Fold Ribbon』
Single Element Pure CSS3 Double Fold Ribbon http://thecodeplayer.com/walkthrough/single-element-pure-css3-doub […]
ヘッダー部分がスクロールすると、ついてくるナビゲーションに変化するアイディア
A Pen by Paul Howarth 通常の画像とロゴのヘッダーに見えたのが、スクロールをトリガーにヘッダーの画像をそのまま利用したナビゲーションに変化するアイディアです。 コードはHTML、CSS […]
記事の表示をモバイル向けには、省略形で表示するアイディア 『Mobile Friendly Reading v2.0』
Mobile Friendly Reading v2.0 By Justin レスポンシブデザインでモバイル向けには、テキスト部分を、徐々に文字が薄くなっていくエフェクトを使って省略表示したアイディアです。 […]
