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/28
ホバーした時に文字が増えたり減ったりするやつ(語彙力)(伝われ)をつくる
こんにちは、中の人です。 今回は、ホバーした時に文字列が変化するやつ(?)伸び縮みするやつ(?)の実装例をご紹介します。 AWWWARDSさんのサイトを見ていた時にヘッダーのロゴが面白い動きをしていたので、忘れないうちに備忘録を残したいと思いました。 ちなみに、こんな感じで動くやつです。 早速ですが、実装例になります。 下準備 まずはhover前のテキストを作っていきます。 「l」を擬似要素で表示するために「CodePoooooooo」と「l」に分けています。 「CodePoooooooo」に固定値widthを指定して文字が増える部分を"overflow: hidde;"で隠しています。 また、「CodePool」という文字列を定義するためにaria-label属性を使用します。 ■HTML CodePoooooooo ■CSS .header-logo { overflow: hidden; position: relative; transition: all .5s ease; width: 120px; } .header-logo a { display: block; overflow: hidden; transition: all .5s ease; width: 114px; } .header-logo a:after { content: 'l'; position: absolute; top: 0; right: 0; width: 6px; } CodePoooooooo hoverした時の動きを加える 擬似要素で表示している「l」を右に移動させると同時に「CodePoooooooo」のwidthを変化させて隠れていた文字を表示させます。 ■HTML CodePoooooooo ■CSS .header-logo { overflow: hidden; position: relative; transition: all .5s ease; width: 120px; } .header-logo:hover { width: 215px; } .header-logo a { display: block; overflow: hidden; transition: all .5s ease; width: 114px; } .header-logo:hover a { width: 210px; } .header-logo a:after { content: 'l'; display: block; position: absolute; top: 0; right: 0; width: 6px; } CodePoooooooo
2020/04/24
簡単！よくあるカードデザインの作り方
こんにちは、中の人です。 今回は、メディアサイトなどでよく見るカードデザインの実装例をご紹介していきたいと思います。 もくじIndex 下準備 並べてみる ざっくりと解説 下準備 まずはカード単体の実装をしていきます。 ■HTML テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ■CSS .card { box-shadow: 10px 10px 10px rgba(0, 0, 0, .1); position: relative; transition: background .5s ease, box-shadow .5s ease; } .card:hover { background: #f5f5f5; box-shadow: none; } .card-link { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .card-thumbnail { object-fit: cover; height: 150px; width: 100%; } .card-text { padding: 10px; } テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 並べてみる テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ■HTML テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ■CSS .card-section { display: flex; } .card { box-shadow: 10px 10px 10px rgba(0, 0, 0, .1); position: relative; transition: background .5s ease, box-shadow .5s ease; } .card:hover { background: #f5f5f5; box-shadow: none; } .card:not(:last-child) { margin-right: 20px; } .card-link { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .card-thumbnail { object-fit: cover; height: 150px; width: 100%; } .card-text { padding: 10px; } @media screen and (max-width: 767px) { .card-section { display: block; } .card:not(:last-child) { margin: 0; margin-bottom: 20px; } } ざっくりと解説 今回のポイントは概ねこちらになります。 カードにリンクを持たせるために空のaタグを使用("position: absolute;"を使用してカード全体を覆うようにする) ":not(:last-child)"で最後のカード要素意外にmarginを持たせる メディアクエリを用いてPC/SPで表示を分ける(PCは"display: flex;"で横並び、SPは"display: block;"で縦並び) ざっくりとで申し訳ないのですが、だいたいこんな感じだと思います。 私事ですが、記事のネタ探しに困っております。 以上、「よくあるカードデザインの作り方」でした。
2020/04/21
Flexboxでヘッダーナビを作ってみる
こんにちは、中の人です。 今回はFlexboxを用いて、簡単にヘッダーナビを実装する方法をご紹介します。 早速ですが、サンプルになります。 実装サンプル Sample logo menu01 menu02 menu03 ■HTML Sample logo menu01 menu02 menu03 ■CSS .header { align-items: center; background: #f5f5f5; display: flex; padding: 20px; } .header-logo { margin-right: auto; } .nav-menu { align-items: center; display: flex; } .menu-item:not(:last-child) { margin-right: 20px; } 解説 今回のポイントは、ざっくりと2点。 こちらになります。 並列させたい要素の親要素に"display: flex;"を指定する ロゴに"margin-right: auto;"を指定して右側の要素を押し出す flexboxは汎用性が高く、いろいろなレイアウトに応用が効きそうでうね。
2020/04/20
下線テキストにホバーアニメーションを実装する方法
こんにちは、中の人です。 今回は、テキストの下線にホバーアニメーションを実装する方法をご紹介します。 もくじIndex 下準備 サンプル1 – 「transform: scale();」でサイズを可変してみる サンプル2 – 「transform-origin」でhover前とhover後の動きに差を付けてみる サンプル3 – 「transform: translate();」と「opacity」でフワッと表示させる 解説 下準備 まずは、擬似要素を用いてaタグに下線を表示させます。 この時、borderプロパティではなくbackgroundプロパティで表示させます。 ■HTML テキストリンク ■CSS .example-0 { line-height: 2.5em; position: relative; } .example-0:after { content: ''; background: rgba(0, 0, 0, .5); position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; } テキストリンク アニメーションを実装する サンプル1 - 「transform: scale();」でサイズを可変してみる ■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; transform: scaleX(0); transition: transform .5s ease; height: 1px; width: 100%; } .example-1:hover:after { transform: scaleX(1); } テキストリンク サンプル2 - 「transform-origin」でhover前とhover後の動きに差を付けてみる ■HTML テキストリンク ■CSS .example-2 { line-height: 2.5em; position: relative; } .example-2:after { content: ''; background: rgba(0, 0, 0, .5); position: absolute; bottom: 0; left: 0; transform: scaleX(0); transform-origin: right; transition: transform .5s ease; height: 1px; width: 100%; } .example-2:hover:after { transform: scaleX(1); transform-origin: left; } テキストリンク サンプル3 - 「transform: translate();」と「opacity」でフワッと表示させる ■HTML テキストリンク ■CSS .example-3 { line-height: 2.5em; position: relative; } .example-3:after { content: ''; background: rgba(0, 0, 0, .5); position: absolute; bottom: 0; left: 0; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; height: 1px; width: 100%; } .example-3:hover:after { opacity: 1; transform: translateY(0); } テキストリンク 解説 今回は、擬似要素をtransformプロパティでサイズや位置を可変させる方法をご紹介しました。 もちろん、過去の記事でご紹介したborderプロパティで下線を表示させる方法にも適用できます。 テキストリンクの下線を擬似要素を用いて表示させる方法
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種類の実装方法をご紹介しました。用途や場面に応じて色々と使い分けができそうですね。
