CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSSを使って色々な図形を描画するサンプルコード集になります。 CSSで図形の中にテキストなどを含める場合の注意点 CSSの図形要素内にテキストなどを含める場合は、基本的にそれらがpadding込みで要素のサイズを上回ると図形自体のサイズし ...

CSSのFilterにあるbox-reflectを使って、テキストや画像などを反射表示させる方法の紹介です。 box-reflectの基本 box-reflectはCSSベンダープレフィックスで機能するCSSのひとつです。2020年6月現在 ...

CSSで作った吹き出しデザインの色々なパターンの一覧です。 CSSの吹き出しデザイン ノーマル シンプルなCSS吹き出しパターンです。下の方にカラーバリエーション用のCSSも置いてあります。 See the Pen CSS balloon ...

CSSだけで簡単なドット絵（Pixel Art）を作成する方法の紹介です。 3×3のCSSドット絵サンプル CSSで作る3×3のシンプルなドット絵サンプルです。 See the Pen Pixel Art 3x3 by yochans (@ ...

CSSだけで要素のサイズに合わせてテキストを丸めて（省略して）末尾に3点リーダーを付与する方法の紹介です。 テキストを丸める処理は、head内のdescriptionに使う事も多くPHPの出力で行うケースもありますが、コンテンツ要素内であれ ...

CSSだけで実装するスワイプ（フリック）で横スクロールするスライドメニューの実装サンプルです。 スワイプで横スクロールするメニューの動作サンプル スワイプで横スクロールするメニューを実装した動作サンプルです。 See the Pen MEN ...