[B! css3] naca4416のブックマーク

[CSS]アイテム数が不明でもカラム数に合わせてぴったりに配置するスタイルシート

下記のような3カラムのグリッドに複数のアイテムを配置する時、アイテムの数が3の倍数だったらぴったり収まりますが、アイテムが7, 8個の場合は最後に余白を生じます。もちろん余白のままでも良い場合はありますが、ぴったり収めたいという時に役立つスタイルシートのテクニックを紹介します。 Tetris & The Power Of CSS 基本となるHTMLは、リストでアイテムを配置します。 HTML アイテム数は、適当に変更して構いません。 <ul class="flex-container"> <li class="flex-it em">1</li> <li class="flex-it em">2</li> <li class="flex-it em">3</li> <li class="flex-it em">4</li> <li class="flex-it em">5</li> <li cla

naca4416 2013/11/12

リンク

IDEA * IDEA

ドットインストール代表のライフハックブログ

naca4416 2013/08/05

リンク

[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

naca4416 2013/05/17

リンク

【css】いろんな形をスタイルシートで at softelメモ

.square { width:100px; height:100px; border:1px solid #000; background:yellow; } .parallelogram { width:100px; height:100px; border:1px solid #000; background:yellow; transf orm: skew(20deg); -o-transf orm: skew(20deg); -moz-transf orm: skew(20deg); -webkit-transf orm: skew(20deg); } .parallelogramRight { width:100px; height:100px; border:1px solid #000; background:yellow; transf orm: skew(-20deg); -o-

naca4416 2013/05/10

リンク

HTML5 × CSS3 × jQueryを真面目に勉強 – #9 CSS3アニメーション（Transition） | DevelopersIO

この順序で指定するのが必須というわけではありませんが、durationとdelayの順序だけは決まっており、逆にすることが出来ません。記述例) transition /* * @transition-duration * @transition-property * @transition-timing-function * @transition-delay */ transition: .3s background ease .5s; 当記事執筆時点（2012年11月）では、このプロパティに対してベンダープレフィックスをつけて指定することになります。ベンダープレフィックスをつけてみた - transition -webkit-transition: .3s background ease .5s; -moz-transition: .3s background ease .5s;

naca4416 2012/11/17

jQuery
css3

リンク

画像アイコンはもう古い！CSSでスタイル自由自在のアイコンWebフォント

Font Awesome, the iconic... / Foundation Icons Fonts -... / Typicons他...全5件

naca4416 2012/06/28

リンク

[CSS]CSS3を使うとこんなこともできる！紙を折ったり反らしたするかっこいいエフェクト

サムネイル画像をホバーし、下に隠れたテキストを表示する際に紙を折ったり反らしたりするかっこいいエフェクトを実装するチュートリアルを紹介します。 3D Thumbnail Hover Effects [ad#ad-2] デモはCSS 3D transf ormsを使用しているので、Firefox, Chrome, Safari, Operaでご覧ください。