間接セレクタとtarget擬似クラスを利用したカルーセル トランジションはスライドイン
A Pen by nakashima akira on CodePen.
nakashima akira nksm
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| - var itemCount = 20; | |
| .container | |
| section | |
| header | |
| h1 親要素に特に何も指定しないブロック | |
| - for (var i = 0; i < itemCount ; i++) { | |
| .item | |
| - } | |
| footer |
間接セレクタとtarget擬似クラスを利用したカルーセル トランジションはフェードイン
A Pen by nakashima akira on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .spinner.is-small | |
| - for (var i = 0; i < 4; i++) | |
| .spinner__item(class='spinner__item--#{i}') | |
| .spinner.is-large | |
| - for (var i = 0; i < 6; i++) | |
| .spinner__item(class='spinner__item--#{i}') |
カウンターを2種類用意し、混在させるサンプル
A Pen by nakashima akira on CodePen.
nksm
/ content プロパティの counter を利用してみる.markdown
Created
June 2, 2015 01:40
content プロパティの counter を利用してみる
content プロパティの counter を利用したサンプル。
A Pen by nakashima akira on CodePen.
nksm
/ flex-direction-と-text-overflow.markdown
Created
February 23, 2015 13:20
flex-direction と text-overflow
flex-direction: column; を指定すると、text-overflow が効かないケースがある
A Pen by nakashima akira on CodePen.
retina display で 1px の角丸ボックスを実現する習作 & 四辺のボーダーを同じ画像で実装する
A Pen by nakashima akira on CodePen.
nksm
/ button タグで flexbox を利用する.markdown
Last active
September 26, 2015 06:32
button タグで flexbox を利用する
NewerOlder