CSS
css
2020/05/08
ホバーしたテキストが上に押し出されるやつ(語彙力)(伝われ)
こんにちは、中の人です。 今回は実務でよく使われがちな、ホバーしたテキストが上の方に押し出されるようなエフェクトを実装していきます。 さっそくですが実装例 ■HTML Example Example ■CSS .sample-text { overflow: hidden; height: 2em; } .sample-text span { display: block; line-height: 2em; transform: translateY(0); transition: transform .1s cubic-bezier(.7, 0, 0, 1); } .sample-text:hover span { transform: translateY(-100%); } Example Example ポイントとしては、 親要素に固定値heightと"overflow: hidden;"を指定 子要素を2つに分け、hover時にそれぞれがY軸方向に動くように指定 といったところでしょうか。 一手間加えるだけで簡単にええ感じになります。 またtransitionにベジェ曲線を指定し、緩急を付けるのも割とミソかもしれません。 こんなパターンもあるよ ■HTML Example Example ■CSS .sample-text { overflow: hidden; height: 2em; } .sample-text span { display: block; line-height: 2em; transform: translateY(0); } .sample-text:hover span { transform: translateY(-100%); transition: transform .1s cubic-bezier(.7, 0, 0, 1); } Example Example hover時のみtransitionを指定してあげることでhover後はアニメーションが無くなり、上に押し出されるだけのエフェクトにすることもできます。 transformの値を変更して、お好みの押し出し方向にして使ってみてください。
2020/04/19
テキストリンクの下線を擬似要素を用いて表示させる方法
こんにちは、中の人です。初めての記事投稿になります。 今回は、CSSの擬似要素を用いてテキストリンクに下線を表示させる方法をご紹介します。 擬似要素を上手く活用することでデザインの幅がグッと広がります。 早速ですが、例としてこのような実装方法があります。 シンプルな下線の例 直線 ■HTML テキストリンク ■CSS .example-1 { line-height: 2.5em; position: relative; } .example-1:after { content: ''; background: rgba(0, 0, 0, .5); position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; } テキストリンク 点線 ■HTML テキストリンク ■CSS .example-2 { line-height: 2.5em; position: relative; } .example-2:after { border-bottom: 1px dotted rgba(0, 0, 0, .5); content: ''; position: absolute; bottom: 0; left: 0; width: 100%; } テキストリンク 解説 その1の例では擬似要素に対してheightで線幅、widthで線の長さを指定していました。 この場合、CSSでアニメーションを指定しやすいということがメリットになります。 その2の例ではborder-bottomを指定して擬似要素そのものに下線を付ける実装をしています。 アニメーションを指定しない要素の場合はborderプロパティで指定した方がスマートに書けますね。 また、border-bottomに'dotted'を指定して点線を表示していますが、'dashed'や'double'を指定することで線のスタイルを変更することもできます。 今回は2種類の実装方法をご紹介しました。用途や場面に応じて色々と使い分けができそうですね。
