初歩の電子工作とデジカメの日記

電子工作備忘録とデジカメで撮影した写真のブログです。

css3のお勉強　その4

2017-04-27 10:51:02 | study
CSS3のお勉強　その4 ー box-shadow, text-shadow　ー
文字通りボックスやテキストに影を付けるCSSです。当然画像にも影をつけて画像が浮き出る感じにできます
下記の赤ラインから赤ラインの間が作成したHTMLファイルで、スタイル部分は<head>内に組み込んでいます。
<!DOCTYPE html>
<html>
<html lang="ja">

<head>
  
  <title>CSS3のお勉強　その4</title>
  <style type="text/css">
    .test01 {
      width: 150px;
      height: 150px;
      margin: 30px;
      padding: 10px;
      box-sizing: border-box;
      background-color: #999900;
      border: 2px solid #CCFFCC;
      float: left;
    }

    .test02 {
      width: 150px;
      height: 150px;
      margin: 30px;
      padding: 10px;
      box-sizing: border-box;
      background-color: #999900;
      border: 2px solid #CCFFCC;
      box-shadow: 5px 10px rgba(5, 5, 5, 0.7);
      float: left;
    }

    .test03 {
      width: 150px;
      height: 150px;
      margin: 30px;
      padding: 10px;
      box-sizing: border-box;
      background-color: #999900;
      border: 2px solid #CCFFCC;
      box-shadow: 5px 10px 5px rgba(5, 5, 5, 0.7);
      float: left;
    }

    .test04 {
      width: 150px;
      height: 150px;
      margin: 30px;
      padding: 10px;
      box-sizing: border-box;
      background-color: #999900;
      border: 2px solid #CCFFCC;
      box-shadow: 5px 10px 5px 5px rgba(5, 5, 5, 0.7);
      float: left;
    }

    .sample {
      width: 200px;
      height: 200px;
      margin: 30px;
      border: 2px solid #CCFFCC;
      box-shadow: 5px 10px 5px rgba(5, 5, 5, 0.7);
      float: left;
    }
  </style>
</head>

<body>
  

    <div class="test01">テスト1 <br>>box-shadowなし </div>
     <div class="test02">テスト2 <br>box-shadow:5px 10px rgba(5,5,5,0.7);
     </div>
     <div class="test03">テスト3 <br>box-shadow:5px 10px 5px rgba(5,5,5,0.7);
     </div>
   </div>
   <div>
     <div class="test04">テスト4 <br>box-shadow:5px 10px 5px 5px rgba(5,5,5, 0.7);
     </div>
     <div class="sample"> <img src="img/mt_fuji_s.jpg">
       <p style="margin-top: 20px;">この画像のbox-shadowスタイルは テスト3と同じ </p>
     </div>
</body>

</html>

＊ Webでの表示 ＊





最新の画像［もっと見る］

コメントを投稿