囲みや背景のCSSの第3弾です。マウスホバー効果のあるものや、背景に画像を使用したものなどを用意しました。なお、見出し用に作成したCSSでも枠として使えるものがたくさんあります。

-blue

-navy

-green

-orange

-purple

-red

 見出しや枠で色を変えるために作成したCSSですが、単独で使うこともできます。セクションや各パーツのCSSで「-blue」などと指定すると背景として色をつけることも可能です。

  1. [class*=”-blue”] {
  2. color: #090c9d;
  3. text-shadow: 3px 3px 4px rgba(0, 190, 254, 0.4) ;
  4.   background: rgba(172, 181, 255, 0.3);
  5. border-color: #2c62ff;}
  6. [class*=”-navy”] {
  7. color: #171844;
  8. text-shadow: 3px 3px 4px rgba(0, 190, 254, 0.4) ;
  9. background: rgba(170, 234, 255, 0.3);
  10. border-color: #084B8A;}
  11. [class*=”-green”] {
  12. color: #0B610B;
  13. text-shadow: 3px 3px 4px rgba(27, 123, 13, 0.4) ;
  14. background: rgba(159, 255, 155, 0.3);
  15. border-color: #04B45F;}
  16. [class*=”-orange”] {
  17. color: #FF8000;
  18. text-shadow: 3px 3px 4px rgba(245, 254, 0, 0.4) ;
  19. background: rgba(233, 255, 155, 0.3);
  20. border-color: #FAAC58;}
  21. [class*=”-purple”] {
  22. color: #B40486;
  23. text-shadow: 3px 3px 4px rgba(226, 67, 67, 0.4) ;
  24. background: rgba(255, 203, 203, 0.3);
  25. border-color: #DA81F5;}
  26. [class*=”-red”] {
  27. color: #FE2E2E;
  28. text-shadow: 3px 3px 4px rgba(254, 0, 0, 0.4) ;
  29. background: rgba(255, 150, 150, 0.35);
  30. border-color: #F7819F; }
  31. [class*=”-black”] {
  32. color: #1C1C1C;
  33. text-shadow: 3px 3px 4px rgba(61, 61, 57, 0.4) ;
  34. background: rgba(227, 227, 227, 0.4);
  35. border-color: #848484; }

 マウスカーソルが上に来たら背景や字体を変えたい場合は、hoverを使います。後ろに-onをつけると効果が出るようにCSSを書きました。

-blue-on

-navy-on

-green-on

-orange-on

-purple-on

-red-on

 今回は、背景が少し濃くなり、文字を斜体にしてさらに薄くなるようにしてみました。

  1. [class*=”-on”]:hover {background-color: rgba(172, 181, 255, 0.5);font-style: oblique; }
  2. [class*=”-navy-on”]:hover {background-color: rgba(170, 234, 255, 0.5); }
  3. [class*=”-green-on”]:hover {background-color: rgba(159, 255, 155, 0.5); }
  4. [class*=”-orange-on”]:hover {background-color: rgba(233, 255, 155, 0.5); }
  5. [class*=”-purple-on”]:hover {background-color: rgba(255, 203, 203, 0.5); }
  6. [class*=”-red-on”]:hover {background-color: rgba(255, 150, 150, 0.5); }
  7. [class*=”-black-on”]:hover {background-color: rgba(227, 227, 227, 0.5); }

btn でボタンのようなホバー効果付きの枠が表示できます

賢威で配置をアレンジするCSS

位置関係のCSS al-l (左寄せ) al-c (中央寄せ) al-r (右寄せ)

背景画像のCSSも重ねてみました。 bg01

背景画像もCSSの入力で簡単に使えます。

bg02

背景画像もCSSの入力で簡単に使えます。

bg03

背景画像もCSSの入力で簡単に使えます。

bg04

背景画像もCSSの入力で簡単に使えます。

bg05

背景画像もCSSの入力で簡単に使えます。

bg06

背景画像もCSSの入力で簡単に使えます。

bg07

背景画像もCSSの入力で簡単に使えます。

bg08

背景画像もCSSの入力で簡単に使えます。

bg09

背景画像もCSSの入力で簡単に使えます。

bg10

背景画像もCSSの入力で簡単に使えます。

bg11

背景画像もCSSの入力で簡単に使えます。

bg12

背景画像もCSSの入力で簡単に使えます。

bg13

背景画像もCSSの入力で簡単に使えます。

bg14

背景画像もCSSの入力で簡単に使えます。

bg15

背景画像もCSSの入力で簡単に使えます。

bg16

背景画像もCSSの入力で簡単に使えます。

bg17

背景画像もCSSの入力で簡単に使えます。

bg18

背景画像もCSSの入力で簡単に使えます。

bg19