フォーカスでシュワーっと消えていく、プレースホルダ
input要素の欄にフォーカス(入力できる状態)にすると input要素にあるプレースホルダが、ぼやけてシュワーーっと消えていくアニメーションが特徴的 jQueryを使って、フォーカスが当たると、 blurというクラスをつけて、文字をぼかしています
テキストをスロットのようにグルグルと回転させて表示するコード(プラグイン)
スロットのロールに文字を入れて それを回転させて、指定した文字が表示冴えれるようにしたものです 初期設定があるので、その部分を変更することで簡単に目的の文字や、他の表示される文字を決めることが出来ます
background-blend-mode: overlay; を使って、画像、グラデーションを重ねて表示させる方法
background blend mode を使って、背景をオーバーレイ処理する方法。まだ対応しているブラウザは限られていますが、今後が楽しみなプロパティ
紙のような、質感を出す 影を使った 浮き上がったり、めくれたりするのを表現したボタンのデザイン
紙のようなボタンを作成するコード、うまく影を使い立体感を演出し。マウスオーバーで動きを加えたボタン。 リアルな質感が素敵
カードを重ねているかのように表示させるタイポグラフィを手軽に作ることが出来るコード
一つの文字が一つのカードとなっていて、それが重なりあって表示されるタイポグラフィ。リンク先のコードで文字の部分だけ変えれば手軽に美しいタイポグラフィが出来上がる
CSSだけで作られてスライドインしてくるアニメーションがあるシンプルなドロップダウンメニューが作れるコード
スライドインしてくるエフェクトがついた、多層型のドロップダウンメニューを作るコード。ドロップダウンメニューを作るときの参考のコードにも
美しいてかわいい系な完成度の高いローディング画面のコード
美しいデザインのローディング画面、LOADINGの文字がふわっと、ふわっと、風で揺らぐ感じのアニメーション。また背景もすごくセンスが有る
CSSのtext-shadowで作られた立体感がある影を コピペで作れるコード
CSSのtext-shadowを使って、少し高級感のある立体的な文字になるような影を演出するコード。コードもコピペで使えてシンプル
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のヘッダーが見えなくならないようにスクロールに合わせて常に表示されるように付いてくるようにするコード
テーブルのヘッダーの項目を常に表示できるようにするコード。これを使うことで、テーブルの途中で何の項目だったのか分からなくなってしまうのを防ぐことが出来る
