[B! css] [3ページ] tomtom35のブックマーク

制作案件に使えば注目度アップ！CSS3を使った驚きのアニメーション表現

一般的なサイト制作案件では、過度なアニメーション... / CSS3を使ったアニメーション表現 / Simple Icon Hover Effect...他...全10件一般的なサイト制作案件では、過度なアニメーションを求められることは少ないですが、上手に取り入れることで利用者の心をグッとつかむことができます。どうせ作るなら、ユーザーの印象に残り、かつクライアントの目的を達成できるサイトに仕上げたいものです。そんな、これからの制作案件にも採用できそうな、ちょっと目を引く表現方法を集めました。

tomtom35 2013/07/12

css
CSS3

リンク

csstubemap.co.uk

This domain is expired. If you are the owner and you want to renew it please contact your registrar

tomtom35 2013/05/25

css

リンク

[CSS]コピペで簡単に使える、パネルの表と裏をくるっと水平・垂直にひっくり返すスタイルシート -CSS Flip Boards

パネルをホバーすると、表と裏がくるっとアニメーションで変わるスタイルシートを紹介します。くるっとなるのは水平だけでなく、垂直にも対応しています。上：垂直くるっ、下：水平くるっ CSS Flip Boardsの実装くるっとなるのはスタイルシートのエフェクトで、スクリプトは使用されていません。 Step 1: HTML 表・裏のパネル2枚をそれぞれdiv要素にし、それらを2つのdivで内包します。垂直にはtop、水平にはleftを指定します。垂直にくるっ <div class="flip-boards"> <div class="board top"> <div class="front"><h2>パネル：表</h2></div> <div class="flipped"><h2>パネル：裏</h2></div> </div> </div> 水平にくるっ <div class="fl

tomtom35 2013/05/17

リンク

[CSS]背景を固定させて、カーテンのようにスクロールさせるテクニック | コリス

去年くらいからよく見かけるようになったスクロールすると、カーテンを持ち上げるように次々にコンテンツが表示されるテクニックをスタイルシートのみ版とスクリプト併用パワーアップ版の二つを紹介します。まずは、スタイルシートのみ版から。 Fixed image backgrounds スクロールするとヘッダは固定表示で、画像を配置した背景がカーテンを持ち上げるように次のコンテンツが表示されます。背景は写真も面白いですが、ソリッドなカラーでも面白い効果が得られますね。 Fixed image backgroundsをスクロール実装はシンプルです、ポートフォリオなどでよく見かけるテクニックです。 Demo 1のHTML HTMLの基本構造は、header要素があり、各スライドはsection要素です。section内には見出しやテキストや画像などを自由に配置できます。 <header> <a hr

tomtom35 2013/05/16

リンク

H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -

HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transf orm」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。サンプルページ » 01.切り取り線紙を切り取ったようなデザインです。サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);