属性セレクタ
複数の条件で絞り込む
^= 前方一致
$= 後方一致
a[href^='http'][href$='co.jp/'][target='_blank']{
font-size: 2rem;
}
パンくずリスト
:nth-child(n+2) 最初のli要素以外を選択
li:nth-child(n+2)::before{
content:'>';
margin: 0 10px;
}
文章の1文字目だけ大きくする
float: left;で２文字目以降を上寄せにし、
line-heightとpaddingで隙間を調整
.lead::first-letter{
font-weight: bold;
font-size: 48px;
line-height: 14px;
padding: 20px 10px 0 0;
float: left;
}
複数背景画像
#box{
width: 640px;
height: 360px;
background:
url("http://placeimg.com/320/180/people") no-repeat top center,
url("http://placeimg.com/320/180/animal") no-repeat left bottom,
url("http://placehold.jp/640x360.png") no-repeat center;
background-size: auto 30%, auto 20%, cover;
}
background-clip
背景画像とborderやpaddingの兼ね合いも考慮する
#box{
border: solid 30px rgba(200,100,0,0.5);
background-clip: border-box;
background-origin: border-box;
}
「続きを読む」の ...
.item1{
width: 500px;
white-space: nowrap; // 改行させない
overflow: hidden;
text-overflow: ellipsis; // ...
}
背景画像はそのまま、テキストの不透明度だけ下げたい
opacityを使うと、背景画像の不透明度まで下がってしまう。
color: rgba(255,0,0,0.5);のようにする
グラデーション
多いので省略
参考
- 国旗
http://www.standardista.com/CSS3gradients/flags.html
- 壁紙
http://lea.verou.me/css3patterns/
Flexboxの各アイテムの扱い
.wrapper{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
}
.box:nth-child(1) {
align-self: flex-end;
}
.box:nth-child(2) {
order: 1;
}
IE9にも対応させたいと言われたら、polyfill必須。
とはいえflexibility.jsが使えないことがあったので、IE10以降でないとデバッグ大変になるかも。。
IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！
参考
http://css3.my-learn.net/example/flex_3column2.php
http://css3.my-learn.net/example/flex_navi.php
http://css3.my-learn.net/example/flex_grid.php
:target擬似クラス
[CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点
animation-play-state
アニメーションの再生runningと一時停止paused
animation-fill-mode
アニメーションが終了したときのスタイルを適応する
デフォルトだとアニメーション終了時に、初期のスタイルに戻ってしまう
animation-fill-mode: forwards;
複数アニメーション指定
#box{
animation:
width_change 2s forwards,
color_change 1s forwards;
}
3D表現
perspectiveプロパティは親要素に指定
perspective関数は3Dにしたい要素（子要素）に指定
#parent1{
perspective: 300px;
.child{
transform: rotateY(45deg);
}
}
#parent2{
.child1{
transform: perspective(300px) rotateY(45deg);
}
.child2{
transform: perspective(300px) rotateY(60deg);
}
.child3{
transform: perspective(300px) rotateY(75deg);
}
}
孫要素にも親要素の3D空間を継承させたい場合は、
子要素にtransform-style: preserve-3d;を指定
#parent3{
perspective: 300px;
.child{
transform: rotateY(15deg);
}
.child1,
.child2,
.child3,
.child4{
transform-style: preserve-3d;
}
}
カードめくりとか、キューブなどの基本表現は以下のサイトに載っている。
http://desandro.github.io/3dtransforms/
https://webkit.org/blog-files/3d-transforms/morphing-cubes.html
単位が違う要素同士の計算をしたい
calc()関数を使用する
#box {
font-size: calc(2rem + 2px);
width: calc(100% - 100px);
}
borderやpaddingでwidthを増やしたくない
box-sizing: border-box;と指定すればborderやpaddingを内包してくれる
（＝widthが変わらずキープできる！）
カーニングのモダンな設定
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング
文字詰めできるCSSのfont-feature-settingsプロパティについて検証してみました