「あれ？どうやって指定するんだっけ？」と記憶があやふやになりがちなCSSをメモ。
アニメーションで使用するCSS
| 操作 | 設定値など |
| スムーススクロール |
scroll-behavior: smooth;
|
| 移動 |
transform: translate(x,y);translateX,translateY,translate3d
|
| 回転 |
transform: rotateX(-35deg);rotateY(y), rotate(x,y), rotate3d(x,y,z)
|
| 拡大・縮小 |
transform:scale(1.2);scaleX,scaleY
|
| 歪み |
transform:skew(x,y);
|
| ホバー時の動き |
transition: all 0.5s 1s ease-in;transition: background-color 1s;
|
| ボワッとアニメ |
filter: blur(10px);animation: blur-anim 1.5s cubic-bezier(0.4, 0, 1, 1) forwards;@keyframes blur-anim {100% { filter: blur(0); }}
|
// transformは複数設定が可能。
transform: rotate(-90deg) translatex(-8px);文字装飾
| 操作 | 設定値など |
| マーカー表示 |
background-image: linear-gradient(0deg,var(–color-main) 30%,transparent 40%); }
|
| 縦書き |
writing-mode: vertical-rl;-ms-writing-mode: tb-rl;
|
| 大文字変換 |
text-transform: uppercase;
|
| データテキスト使用 |
content: attr(data-txt);content: attr(data-number);
|
| Winのフォントシャギー調整 |
transform: rotate(.03deg);
|
| 折り返さない |
word-break: keep-all;
|
画像関連
| 操作 | 設定値など |
| 画像トリミング |
object-fit: cover;
|
| 三角形 |
border-style: solid;border-color: transparent transparent transparent var(–color-grey);border-width: 25px 0 25px 1em;
|
| リボン表示 |
.bg-ribbin::before, .bg-ribbin::after {content: ”;position: absolute;width: 0;height: 0;bottom: -25px;border-style: solid;}.bg-ribbin::before {right: -25px;top: 0;border-width: 25px 25px 0 0;border-color: var(–color-main) transparent transparent transparent;}.bg-ribbin::after {right: -25px;bottom: 0;border-width: 0 25px 25px 0;border-color: transparent transparent var(–color-main) transparent;}
|
| 背景グラデーション |
background: linear-gradient(to bottom, #fff 0, #215ebb 35%);
|
| 背景複数設定 |
background: url(../img/img01.png) no-repeat top right / contain, linear-gradient(to right, #feb1b2, #ffd2ae);
|
擬似クラス
| 操作 | 設定値など |
| :nth-child(even) | 偶数 :nth-child(2n)も同じ |
| :nth-child(odd) | 奇数 :nth-child(2n+1)も同じ |
| :nth-child(3) | 3番目 |
| :nth-child(n+4) | 4番目以降 |
| :nth-child(-n+3) | 3番目まで |
| :nth-child(n+4):nth-child(-n+7) | 4番目〜7番目まで |
| :nth-child(3n) | 3の倍数 |
| :not:(nth-child(2)) | 2番目以外 |
| :last-child | 最後のみ |
typeで指定するなら
nth-of-type
タイプ指定
#contact [type="text"], #contact [type="email"] {
width: 300px;
}ベンダープレフィックス
@media screen and (min-width: 541px) {
}