1. border-radius
div{
border-radius: 10px;
}2. box-shadow
div{
box-shadow: 5px 5px 5px #aaa;
}3. text-shadow
div{
text-shadow: 1px 1px 0 #000;
}4. ::selection
div *::selection{
background-color: #c00;
}5.:nth-child(odd)
:nth-child(even)
| odd | tr:nth-child(odd){ background-color: #fff; } |
| even | tr:nth-child(even){ background-color: #eee; } |
| odd | tr:nth-child(odd){ background-color: #fff; } |
| even | tr:nth-child(even){ background-color: #eee; } |
6. linear-gradient
div{
background:linear-gradient(left, #fff 0%, #888 100%);
background-color: #ddd;
}7. ホバーアニメーション
ホバーアニメーション
div a{
div a:hover{
div a{
background-color: #333;
transition: background-color 500ms ease;
}div a:hover{
background-color: #c00;
}8. placeholder属性
<input type="text" name="hoge" value="" placeholder="ここに入力">
9. webFont
@font-face {
font-family: 'Bad Script';
src: url(BadScript-Regular.woff);
}div{
font-family: 'Bad Script';
}