text-decorationのデザインサンプル集

CSS テキストデザイン サンプル集,CSS

CSSでtext-decorationでの下線などのスタイルを変更する方法の紹介です。 デフォルトの下線(underline)はリンクテキストに使われる事が多く、その他のテキストには利用しにくい状況ではありますが、text-decorati ...

css-iframeのスクロールバーを非表示にする

2021-02-05CSS,CSS 制御

iframeのスクロールバーを非表示にする方法の紹介です。 See the Pen CSS | Hide the iframe scrollbar by yochans (@yochans) on CodePen. iframeのスクロール ...

css-テキストエリアのサイズ変更を不可にする

2021-02-05CSS,CSS 制御,CSS フォーム

CSSでテキストエリアのサイズ変更を不可にするサンプルコードです。 See the Pen CSS | Disable resizing of textarea by yochans (@yochans) on CodePen. テキストエ ...

CSSデザイン-虹

2021-05-19CSS,CSS デザイン サンプル集

CSSのborderを利用して作成した虹(レインボー)のデザインです。 See the Pen CSS | Rainbow circle by yochans (@yochans) on CodePen. HTMLには「container」 ...

cursorプロパティで指定可能な値一覧

CSS マウスカーソル,CSS

cursorプロパティで指定可能な値一覧と指定時の動作サンプルです。 See the Pen JavaScript | List of cursor properties by yochans (@yochans) on CodePen. ...

マウスカーソルを指(手)にする方法

2021-02-08CSS マウスカーソル,CSS

CSSで特定のHTML要素上でマウスカーソルを指(手)にするサンプルコードです。 divやp要素などaタグ以外のHTML要素に対して、CSSやJavaScriptなどでボタン的な機能を実装する場合、マウスカーソルを指(手)にする事はユーザー ...

長文の文章を縦書き表示にする方法

CSS テキストデザイン サンプル集,CSS

CSSで文章を右からの縦書き表示にする方法の紹介です。 文章を縦書き表示にする CSSの「writing-mode」を使って右から文章を縦書き表示にする動作サンプルとサンプルコードです。 See the Pen test by yochan ...

範囲外から落下してくるCSSアニメーションサンプル

CSS,CSS アニメーション サンプル集

ブラウザの表示領域の上部・範囲外・画面外から指定した要素が落下してくるCSSアニメーションのサンプルコードです。 昔のWEBサイトでマリオやクモが落下してくるWEBサイトやブログがありましたが、そんなイメージです。 上から落下してくるCSS ...

要素を拡大・縮小させるCSSアニメーションサンプル

CSS,CSS アニメーション サンプル集

CSSでテキストや要素を拡大や縮小させるCSSアニメーションのサンプルコードです。 マウスホバーでの拡大・縮小、マウスクリックでの拡大・縮小、animationプロパティでの拡大・縮小などそれぞれの方法のCSSアニメーションの実装パターンを ...

positionでabsoluteの中にabsoluteという入れ子構造

CSS ポジション,CSS

CSSのpositionプロパティで「absolute」を使う場合はそのままウィンドウ左上隅を基準として使うことはあまりなく、親、祖先の要素に「relative」を指定してその左上角を基準にしているケースが多いはずです。 では、absolu ...

absoluteで要素を縦横中央揃えをする方

CSS ポジション,CSS

CSSのpositionプロパティでabsoluteを指定して、要素を縦横中央揃えをする方法を紹介しています。 「position:absolute;」で、縦または横の中央揃えをする方法で良く使われる方法は二通りあり、marginを使った方 ...

overflow-wrapとword-breakの全パターン比較

CSS,CSS テキストデザイン

overflow-wrapとword-breakの全パターン比較 CSSで自動折り返し処理を行うoverflow-wrapとword-breakの全パターンを日本語、英文での比較を紹介しています。 以下に比較用ページを用意しました。可変幅な ...

映画の字幕っぽいCSSアニメーションサンプル

2020-10-03CSS,CSS アニメーション サンプル集

CSSのアニメーションを利用して映画の字幕表示のようにテキストを表示するCSSアニメーションサンプルの紹介です。 字幕っぽく下段中央に文章から一行ずつ順番に割とパッと、でもふわっと表示して消えるようにしています。 ※右下のRerunボタンで ...

円形グラデーションの基本的な使い方

CSS グラデーション,CSS

CSSで円形グラデーションの作成にはradial-gradient()やrepeating-radial-gradient()を利用することが可能です。 この記事ではradial-gradient()、repeating-radial-gr ...

テキストの字間と行間を変更する方法

2021-02-09CSS,CSS テキストデザイン

CSSで指定したフォントサイズが大きくなると、どうしてもデフォルトのままでは表示される字間と行間で納得いく形にならなくなってきます。 そんな時に「letter-spacing」で字間、「line-height」で行間を調節・変更する方法を紹 ...

テキストに合わせて画像を切り抜く方法

CSS,CSS テキストデザイン

CSSだけで画像をテキストに合わせて切り抜く方法の紹介です。 この記事では、テキストの文字色を透過して「background-clip」で「text」を指定する方法と「mix-blend-mode」で「screen」を指定して画像を切り抜く ...

テキストを凹んだように見せる装飾サンプル集テキストを凹んだように見せる装飾サンプル集

2020-10-01CSS テキストデザイン サンプル集,CSS

CSSのtext-shadow()を使ったテキストが凹んでいるように見えるCSSテキストデザイン集です。 以前の記事ではフォントサイズ、シャドーなどにremを指定していましたが、この記事ではpxで指定しています。フォントサイズに合わせて調節 ...

アニメーションをコマ送りで再生する方法

CSS,CSS アニメーション 基本

CSSのanimationプロパティを使って、アニメーションをコマ送りで再生する実装方法を紹介しています。 CSSアニメーションでコマ送りを表現する記述例 コマ送りを表現するには「animation-timing-function」にて「s ...

アニメーションを最後の状態で停止させる方法

CSS,CSS アニメーション 基本

CSSアニメーションでanimation-fill-modeプロパティの「forwards」を使ってアニメーション完了時に元に戻さず最後の状態でアニメーションを停止させる方法の紹介、動作サンプルになります。 animation-fill-m ...

カウントダウンアニメーション

2020-10-01CSS,CSS アニメーション サンプル集

CSSだけでカウントダウンアニメーションを作成する方法の紹介です。 簡単なカウントダウンのCSSアニメーションサンプル 簡単なカウントダウンのCSSアニメーションの動作サンプルとコードです。 フォントを変更すれば、見栄えも良くなるかもしれま ...

filterのblur()で画像や文字をぼかすサンプル集

CSS,CSS フィルター

CSSのfilterプロパティのblur()を使って画像や要素をぼかすCSSサンプルパターン集です。 filterプロパティは、CSS要素だけでなく画像やSVG、その透過部分を反映してフィルター効果を付けることができる人気のプロパティです。 ...

filterで複数の効果を反映させる方法

CSS,CSS フィルター

CSSのfilterは、ひとつのfilterプロパティに複数の効果を記述して複数のフィルター効果を反映させることが可能です。 例えば以下のように複数のフィルター効果を反映させる記述が可能です。 セピアとぼかし filter: sepia(1 ...

filterにtransformを反映させる方法

CSS,CSS フィルター

CSSのfilterプロパティをマウスホバー時に、適用または解除、変更したいケースがあります。 filterプロパティにtransitionでアニメーション時間を設定するには、transitionにfilterまたはallを指定することで反 ...

画像や要素をセピア調にする

2020-10-01CSS,CSS フィルター

CSSのfilterプロパティのsepia()を使って画像や要素をセピア調に表示するCSSサンプルを紹介します。 filterプロパティは、CSS要素だけでなく画像やSVG、その透過部分を反映してフィルター効果を付けることができる人気のプロ ...

filterプロパティは子要素、疑似要素で解除はできない

CSS,CSS フィルター

CSSのfilterプロパティは、CSS要素だけでなく画像やSVG、その透過部分を反映してフィルター効果を付けることができる優れものです。 用途の多いフィルターとして「drop-shadow」があります。 filter: drop-shad ...