CSS | 長文の文章を縦書き表示、右寄せ、初期位置など
CSSで文章を右からの縦書き表示にする方法の紹介です。 文章を縦書き表示にする CSSの「writing-mode」を使って右から文章を縦書き表示にする動作サンプルとサンプルコードです。 See the Pen test by yochan ...
範囲外から落下してくるCSSアニメーションサンプル
ブラウザの表示領域の上部・範囲外・画面外から指定した要素が落下してくるCSSアニメーションのサンプルコードです。 昔のWEBサイトでマリオやクモが落下してくるWEBサイトやブログがありましたが、そんなイメージです。 上から落下してくるCSS ...
要素を拡大・縮小させるCSSアニメーションサンプル
CSSでテキストや要素を拡大や縮小させるCSSアニメーションのサンプルコードです。 マウスホバーでの拡大・縮小、マウスクリックでの拡大・縮小、animationプロパティでの拡大・縮小などそれぞれの方法のCSSアニメーションの実装パターンを ...
CSS | positionでabsoluteの中にabsoluteという入れ子構造
CSSのpositionプロパティで「absolute」を使う場合はそのままウィンドウ左上隅を基準として使うことはあまりなく、親、祖先の要素に「relative」を指定してその左上角を基準にしているケースが多いはずです。 では、absolu ...
CSS | position:absoluteで要素を縦横中央揃えをする方法
CSSのpositionプロパティでabsoluteを指定して、要素を縦横中央揃えをする方法を紹介しています。 「position:absolute;」で、縦または横の中央揃えをする方法で良く使われる方法は二通りあり、marginを使った方 ...
CSS | 日本語での折返しでベストな指定は?
overflow-wrapとword-breakの全パターン比較 CSSで自動折り返し処理を行うoverflow-wrapとword-breakの全パターンを日本語、英文での比較を紹介しています。 以下に比較用ページを用意しました。可変幅な ...
映画の字幕っぽいCSSアニメーションサンプル
CSSのアニメーションを利用して映画の字幕表示のようにテキストを表示するCSSアニメーションサンプルの紹介です。 字幕っぽく下段中央に文章から一行ずつ順番に割とパッと、でもふわっと表示して消えるようにしています。 ※右下のRerunボタンで ...
CSS | 円形グラデーションの基本的な使い方
CSSで円形グラデーションの作成にはradial-gradient()やrepeating-radial-gradient()を利用することが可能です。 この記事ではradial-gradient()、repeating-radial-gr ...
CSS | letter-spacingとline-heightでテキストの字間と行間を変更する方法
CSSで指定したフォントサイズが大きくなると、どうしてもデフォルトのままでは表示される字間と行間で納得いく形にならなくなってきます。 そんな時に「letter-spacing」で字間、「line-height」で行間を調節・変更する方法を紹 ...
CSS | テキストに合わせて画像を切り抜く方法
CSSだけで画像をテキストに合わせて切り抜く方法の紹介です。 この記事では、テキストの文字色を透過して「background-clip」で「text」を指定する方法と「mix-blend-mode」で「screen」を指定して画像を切り抜く ...
CSS | テキストを凹んだように見せるサンプル集
CSSのtext-shadow()を使ったテキストが凹んでいるように見えるCSSテキストデザイン集です。 以前の記事ではフォントサイズ、シャドーなどにremを指定していましたが、この記事ではpxで指定しています。フォントサイズに合わせて調節 ...
CSS | アニメーションをコマ送りで再生する方法
CSSのanimationプロパティを使って、アニメーションをコマ送りで再生する実装方法を紹介しています。 CSSアニメーションでコマ送りを表現する記述例 コマ送りを表現するには「animation-timing-function」にて「s ...
CSS | アニメーションを最後の状態で停止させる方法
CSSアニメーションでanimation-fill-modeプロパティの「forwards」を使ってアニメーション完了時に元に戻さず最後の状態でアニメーションを停止させる方法の紹介、動作サンプルになります。 animation-fill-m ...
映画の上映開始っぽいカウントダウンのCSSアニメーションサンプル
CSSだけでカウントダウンアニメーションを作成する方法の紹介です。 簡単なカウントダウンのCSSアニメーションサンプル 簡単なカウントダウンのCSSアニメーションの動作サンプルとコードです。 フォントを変更すれば、見栄えも良くなるかもしれま ...
CSS | filterのblur()で画像や文字をぼかすサンプル集
CSSのfilterプロパティのblur()を使って画像や要素をぼかすCSSサンプルパターン集です。 filterプロパティは、CSS要素だけでなく画像やSVG、その透過部分を反映してフィルター効果を付けることができる人気のプロパティです。 ...
CSS | filterで複数の効果を反映させる方法
CSSのfilterは、ひとつのfilterプロパティに複数の効果を記述して複数のフィルター効果を反映させることが可能です。 例えば以下のように複数のフィルター効果を反映させる記述が可能です。 セピアとぼかし filter: sepia(1 ...
CSS | filterにtransformを反映させる方法
CSSのfilterプロパティをマウスホバー時に、適用または解除、変更したいケースがあります。 filterプロパティにtransitionでアニメーション時間を設定するには、transitionにfilterまたはallを指定することで反 ...
CSS | filterで画像や要素をセピア調に表示するサンプル集
CSSのfilterプロパティのsepia()を使って画像や要素をセピア調に表示するCSSサンプルを紹介します。 filterプロパティは、CSS要素だけでなく画像やSVG、その透過部分を反映してフィルター効果を付けることができる人気のプロ ...
CSS | filterプロパティは子要素、疑似要素で解除はできない
CSSのfilterプロパティは、CSS要素だけでなく画像やSVG、その透過部分を反映してフィルター効果を付けることができる優れものです。 用途の多いフィルターとして「drop-shadow」があります。 filter: drop-shad ...
CSS | 色々な図形を描画するCSSサンプルコード集
CSSを使って色々な図形を描画するサンプルコード集になります。 CSSで図形の中にテキストなどを含める場合の注意点 CSSの図形要素内にテキストなどを含める場合は、基本的にそれらがpadding込みで要素のサイズを上回ると図形自体のサイズし ...
CSS | box-reflectでテキストや画像などを反射表示させる方法
CSSのFilterにあるbox-reflectを使って、テキストや画像などを反射表示させる方法の紹介です。 box-reflectの基本 box-reflectはCSSベンダープレフィックスで機能するCSSのひとつです。2020年6月現在 ...
CSS | 吹き出しのCSSデザイン一覧
CSSで作った吹き出しデザインの色々なパターンの一覧です。 CSSの吹き出しデザイン ノーマル シンプルなCSS吹き出しパターンです。下の方にカラーバリエーション用のCSSも置いてあります。 See the Pen CSS balloon ...
CSS | 簡単なドット絵を作成する方法
CSSだけで簡単なドット絵(Pixel Art)を作成する方法の紹介です。 3×3のCSSドット絵サンプル CSSで作る3×3のシンプルなドット絵サンプルです。 See the Pen Pixel Art 3x3 by yochans (@ ...
CSS | 要素のサイズでテキストを丸めて末尾に3点リーダーを付与する方法
CSSだけで要素のサイズに合わせてテキストを丸めて(省略して)末尾に3点リーダーを付与する方法の紹介です。 テキストを丸める処理は、head内のdescriptionに使う事も多くPHPの出力で行うケースもありますが、コンテンツ要素内であれ ...
CSS | スワイプで横スクロールするスライドメニューを実装する方法
CSSだけで実装するスワイプ(フリック)で横スクロールするスライドメニューの実装サンプルです。 スワイプで横スクロールするメニューの動作サンプル スワイプで横スクロールするメニューを実装した動作サンプルです。 See the Pen MEN ...