サイト構築 -CSS
[CSS]コピペで簡単に使える、パネルの表と裏をくるっと水平・垂直にひっくり返すスタイルシート -CSS Flip Boards
Post on:2013年5月17日
パネルをホバーすると、表と裏がくるっとアニメーションで変わるスタイルシートを紹介します。 くるっとなるのは水平だけでなく、垂直にも対応しています。 CSS Flip Boards
[CSS]背景を固定させて、カーテンのようにスクロールさせるテクニック
Post on:2013年5月16日
去年くらいからよく見かけるようになったスクロールすると、カーテンを持ち上げるように次々にコンテンツが表示されるテクニックをスタイルシートのみ版とスクリプト併用パワーアップ版の二つを紹介します。 まずは、スタイルシートのみ
IE8以上ならもうスクリプト無しでOKのモーダルウインドウを表示するスタイルシート -CSS Modal
Post on:2013年5月14日
テキストや画像などのリンクをクリックすると、画像をはじめあらゆるHTMLの要素が配置可能なモーダルウインドウを表示するスタイルシートを紹介します。 CSS Modal CSS Modal -GitHub
[CSS]ショートカットの表記をApple Keyboard風に美しく実装するスタイルシート
Post on:2013年5月10日
ブログなどでショートカットを単にテキストで記述するのではなく、ちょっと洒落た感じに、Apple Keyboard風に実装するスタイルシートを紹介します。 これは、Apple Keyboardの写真
[CSS]動きがカワイイ！扇形にふわりと広がるツールチップ -Circular Tooltip
Post on:2013年5月8日
マウスのホバーやクリックで、ふわりとアニメーションで扇形にツールチップが表示されるスタイルシートのデモを紹介します。 デモは、2種類あります。
[CSS]デザインは美しく、かわいいアニメーションを備えたナビゲーションを実装するデモ
Post on:2013年4月23日
シンプルなリストを使って、アイテムがホバー時に吹き出し状にポップアップするかわいらしいアニメーションを備えたナビゲーションを実装するスタイルシートのデモを紹介します。
[CSS]border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック
Post on:2013年4月19日
角丸を指定できるborder-radiusで、ボーダーを落書き風にすることもできます。 色によっては、蛍光ペンや絵筆みたいにもできますね。
[CSS]デスクトップ・スマフォ・タブレット向けの美しいUIエレメントを簡単に実装できるスタイルシート -TopCoat
Post on:2013年4月18日
クリーンなHTMLを使い、レスポンシブを念頭においたUIエレメントを簡単に実装できるオープンソースのライブラリを紹介します。 TopCoat TopCoat -GitHub
[CSS]メール用のちょっとかわいいアニメーションを実装するスタイルシートのデモ
Post on:2013年4月17日
ホバーで封筒を開き、便箋を出し入れし、また封筒を閉じるアニメーションをスタイルシートで実装するデモを紹介します。 画像もスクリプトも一切無しです。 Animated letter ※デモはChrome, Safariがベ
[CSS]パネルをCSS3アニメーションでスライドや回転や拡大させたりするチュートリアル
Post on:2013年4月11日
画像とテキストを配置した2枚のパネルを切り替える時に、CSS3アニメーションでふわりと入れ替えたり、しゃっとスライドしたり、くるっと回転したり、拡大させたりするチュートリアルを紹介します。 CSS animated pr
sponsors
