CSS | 長文の文章を縦書き表示、右寄せ、初期位置など
CSSで文章を右からの縦書き表示にする方法の紹介です。 文章を縦書き表示にする CSSの「writing-mode」を使って右から文章を縦書き表示にする動作サンプルとサンプルコードです。 See the Pen test by yochan ...
CSS | テキストを凹んだように見せるサンプル集
CSSのtext-shadow()を使ったテキストが凹んでいるように見えるCSSテキストデザイン集です。 以前の記事ではフォントサイズ、シャドーなどにremを指定していましたが、この記事ではpxで指定しています。フォントサイズに合わせて調節 ...
見出しタグのボーダーにグラデーションを使ったサンプル集
h2やh3などの見出しタグのデザイン等使えるボーダーにグラデーションを使ったCSSサンプル集です。 共通HTML <h2 class="sample1">sample1</h2> <h2 class="sample2">s ...
CSS | 背景色とテキスト色を相互に入れ替えるサンプル集
CSSのグラデーションを使って背景色とテキスト色を相互に入れ替えツートンカラーにするCSSサンプル集です。 疑似要素のcontent:attr()を使った方法もありますが、ここではlinear-gradient()やbackground-c ...
CSSでテキストを光沢やメタル調に装飾するサンプル集
CSSを使ってHTMLに表示するテキストをメタルっぽく装飾するサンプル集になります。 また、チェック柄以外にもテキストをシャドウ、立体、ストローク、ネオン、ストライプからグラデーション、メタル風、鏡面反射などにするCSSサンプルも紹介してい ...
CSSでテキストをチェック柄に装飾するサンプル集
CSSのみでテキストをチェッカー柄やギンガムチェック・タータン・チェックなどのチェック柄に装飾するサンプル集です。 各柄のカラーバリエーションも紹介しています。 また、チェック柄以外にもテキストをシャドウ、立体、ストローク、ネオン、ストライ ...
CSSでテキストを彩る装飾サンプル集
CSSを使ってテキスト文字に影、立体、光沢などを付けて装飾するサンプル集です。 シャドウ系、立体系、ストローク、ネオン、ストライプからグラデーション、メタル風、鏡面反射などカテゴリにわけて紹介していきます。 賛否はあるかもしれませんが、フォ ...