CSS

CSS

スクロールしても右下固定でページトップに戻るボタンを表示させる

PCでもスマホでも使えるけれど、特にスマホで便利さを感じる。 ページをスクロールしながら見ていても、 いつでもすぐページトップに戻ることができるボタン。 単純にFont Awesomeのアイコンを右下の位置に固定で表示させてみる。 ※Fon...
CSS

CSS疑似要素 :before で見出しの前にアイコンを付ける(Font Awesome 5)

以前、書いた記事は、FontAwesome4を使用する内容だったけれど、バージョンアップしたFontAwesome5を使用する場合は、CDNのリンク先が変わるだけでなく、font-family・font-weightの指定など随分変わっているようなので新しい記事にしてみる。
CSS

CSS疑似要素 :before で見出しの前にアイコンを付ける(Font Awesome 4)

タイトルとして目立たせたり、箇条書きで項目として並べるため 見出しの前にアイコン画像を置いたり背景として敷いたりすることがある。 疑似要素:before + アイコンのWEBフォントFontAwesomeを使えば 大きさや位置、色まで簡単に調整できて便利♪
CSS

CSS疑似要素 :before, :after で作る見出しデザイン ギザギザ

ストライプの背景を作る時は、線グラデーション linear-gradient をX方向・Y方向に繰り返す repeating-linear-gradient を使った。 見出しの下につけるギザギザを作る時は、線グラデーション linear-gradient で作った2つの背景を重ねてX方向にだけ繰り返す。
CSS

CSS疑似要素 :before, :after で作る見出しデザイン カフェのテント風 もくもく

疑似要素を使って見出しにカフェのテント風の飾りをつける。(ヘッダーでも使える。) 30pxの正円の画像を作って、15pxの高さの疑似要素tent1の背景にして使って、くっつけてる。
CSS

CSS疑似要素 :before, :after で作る見出しデザイン リボン

吹き出しの見出しを作る時は、文字の入った枠の下に同色の小さな三角を敷いた。 リボンの見出しを作る時は、文字の入った枠の上に白い三角をのせて、その部分が切り取られているように見せる。
CSS

CSS疑似要素 :before, :after で作る見出しデザイン 吹き出し

疑似要素 :before, :after  最初はとても難しく考えていたけれど、簡単に色んなものをくっつけられて便利♪ 見出しの文字を入れた枠に 色、サイズ、位置など指定して三角をくっつければ吹き出しの見出しができる。
CSS

CSSで指定する見出しデザイン radial-gradient ドット(水玉)の背景

ドット(水玉)の背景を作る時は円グラデーションのradial-gradientを使う。 background-size: 20px 20px;→敷き詰める背景1マス分のサイズ。 background-image: radial-gradient(#ffbfbf 20%, transparent 0), radial-gradient(#ffbfbf 20%, transparent 0);
CSS

CSSで指定する見出しデザイン repeating-linear-gradient ストライプの背景

ストライプの背景を作る時は 線グラデーションを繰り返すrepeating-linear-gradientを使う。 background:repeating-linear-gradient(45deg, #ffe1e1, #ffe1e1 5px, #ffffff 5px, #ffffff 10px); (向き=角度,1つ目のグラデ―ションの開始カラーと開始位置,終了カラーと終了位置,2つ目の開始カラーと開始位置,終了カラーと終了位置)
CSS

CSSで指定する見出しデザイン linear-gradient グラデーションの背景

背景の線グラデーションの基本の書き方は background:linear-gradient(向き, 開始カラーと開始位置%, 終了カラーと終了位置%); ※グラデーションの開始位置が0%、終了位置が100%の時は、それぞれ省略できる。
タイトルとURLをコピーしました