30 Seconds of CSS より、使うものを自分用にメモ
参照元:https://atomiks.github.io/30-seconds-of-css/
テキスト選択色の変更
html
<p class="custom-text-selection">Select some of this text.</p>
css
::selection {
background: aquamarine;
color: black;
}
.custom-text-selection::selection {
background: deeppink;
color: white;
}
テキストを選択反転させない
チェックボックスとかラジオを選択してる最中に、ラベルのテキストが選択されてうっとうしいときが多々ある。地味にストレス。
html
<p>You can select me.</p>
<p class="unselectable">You can't select me!</p>
css
.unselectable {
user-select: none;
}
- サポートしないブラウザもある
- 選択状態にならないだけで、コンテンツのコピーを防ぐものではない。
hover時に下線(underline)をアニメーション
html
<p class="hover-underline-animation">Hover this text to see the effect!</p>
css
.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}