Yousuke.U

CSSのtext-shadowプロパティを使ってテキストが背景から少し浮かび上がっているように見せるシンプルなサンプルを紹介しています。 テキストを浮かせる text-shadowプロパティを利用した単純な方法でテキスト […]…

CSSのみでテキストをマウスホバーで違うテキストに差し替える（置き換える）簡単な方法を紹介しています。 マウスホバーでテキストを差し替える 要素内にあるテキストをマウスホバー時に別のテキストに置き換える方法とそのサンプル […]…

CSSのグラデーション機能、repeating-linear-gradient()プロパティを使って簡単なストライプ柄の作り方を紹介しています。 ストライプ柄やグラデーション、水玉くらいですとCSSで簡単に作成・編集でき […]…

CSSで画像をそのサイズに関係なく親要素内の縦横中央に配置する簡単な指定方法です。 紹介しているのはdisplay: flexとalign-items、justify-contentを使う方法、position: abs […]

CSSで画像に（疑似）透過グラデーションをかける方法を紹介しています。 ※透過グラデーションと表記していますが、背景色と同色に透過色のグラデーションを画像の上からかけているだけで画像そのものを透過表示しているわけではあり […]…

マウスホバー時のスタイル適用が指定できる擬似クラス「:hover」でホバー時の対象に子要素や親要素を指定する方法とサンプルコードを紹介しています。 :hoverで子要素を指定する :hoverで子要素を指定する実装サンプ […]…

CSSで画像に一昔前の写真のような枠、縁取りをつける方法を紹介しています。 写真のような枠、縁取りをつける方法 写真のような枠、縁取りをつけた表示サンプルとHTML/CSSのサンプルコードです。 See the Pen […]…

CSSを使ってウスホバー時にテキストでふわっと表示させる簡単な方法を紹介しています。 マウスホバーでテキストをふわっと表示 See the Pen CSS | Gradation Text by yochans (@yo […]

CSSの疑似要素とbox-shadowを使って画像と背景の境界となる画像の縁（ふち）周りをぼかやかす方法を紹介しています。 画像の縁をぼかす方法 疑似要素の::before または ::afterとbox-shadowを […]…