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

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

CSS ポジション,CSS

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

CSS ポジション,CSS

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

CSS,CSS テキスト デザイン 基本

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

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

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

CSS グラデーション,CSS

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

CSS,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アニメーションの動作サンプルとコードです。 フォントを変更すれば、見栄えも良くなるかもしれま ...

CSS,CSS フィルター

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

CSS,CSS フィルター

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

CSS,CSS フィルター

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

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

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

CSS,CSS フィルター

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

2020-07-12CSS,CSS デザイン

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

CSS,CSS デザイン

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

CSS,CSS デザイン

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

2020-10-01CSS,CSS デザイン

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

2020-09-23CSS,CSS テキスト デザイン 基本

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

CSS,CSS デザイン

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

CSS,CSS デザイン

CSSのpositionプロパティのstickyを使って、途中にある要素をスクロール後に上部固定表示にする方法の紹介です。 positionプロパティでstickyを指定した要素はtopプロパティで指定した位置までスクロールすると縦軸固定表 ...

CSS,CSS フレックスボックス

CSSのdisplay:flexを使って子要素を縦横中央揃えにする方法の紹介です。 display:flexで子要素を縦横中央揃えをする方法 See the Pen CSS Vertical and horizontal center (d ...