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

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

HTML5,CSS3のお勉強 その11 ー animation ー

2017-05-29 17:57:57 | study
前回のcssプロパティ transition はマウスオーバーの時に変化するアニメーションでしたが、今回は自動で変化するアニメーションの作成です


animationとtransitionでは大きな違いがあります。大きな違いは下の２つですが、animationでは変化の仕方に細かい設定ができます。

項目animationtransition
開始のきっかけ自動マウスオーバー
繰返し可能できない

animationのプロパティはたくさん設定が可能らしいが、ここでは以下の6点に絞って実行した


  • animation-name animationの名前、@keyframesで使用
  • animation-duration 1回の実行にかける時間
  • animation-timing-function 実行中の変更速度
  • animation-iteration-count 繰り返しの数(infiniteは無限)
  • animation-direction (alternateは方向を反転させる)
  • animation-delay 実行の際のスタート待ち時間

See the Pen OmYdRr by tsuyoshi chiba (@yokopook24) on CodePen.



上の埋め込み画像の説明：
「HTMLボタン」をクリックするとHTMLソースコード画面に変わります。
「CSSボタン」をクリックするとCSSソースコード画面に変わります。
「Resultボタン」をクリックするとプレビュー画面に変わります。




HTML5,CSS3のお勉強 その10 ーtransitionー

2017-05-25 12:07:35 | study
boxが瞬時に変化するCSSとboxが滑らかに変化するtransitionプロパティを使ってみます。css3で追加されたアニメーションです。同じ画面でソースコードによる表示の変化をみるために今回は「codepen」を初めて使ってみました。codepenとはウェブ開発に必要なHTML, JS, CSSの三要素を実際の表示を見ながら開発できるコードエディターで、ブラウザー内でコードをすぐに試してみることができます。
「codepen」の詳細はググってみればたくさん出てきます。



See the Pen gWEwVJ by tsuyoshi chiba (@yokopook24) on CodePen.


上の埋め込み画像の説明：
「HTMLボタン」をクリックするとHTMLソースコード画面に変わります。
「CSSボタン」をクリックするとCSSソースコード画面に変わります。
「Resultボタン」をクリックするとプレビュー画面に変わります。この画面でboxをマウスオーバーすると上の「box」は瞬時に変化します。そして下の「box」は滑らかに変化します






CSS3のお勉強 その9　－ hr 水平線 ー

2017-05-21 11:44:12 | study
前回の記事でも使っているが、ブログ記事などでコンテンツの区切りによく使用されるプロパティ”hr”はcssを使えばいろいろな装飾ができることがわかったので、早速試した
下記の赤ラインから赤ラインの間が作成したHTMLファイルで、スタイル部分は<head></head>内に組み込んでいます。



  <!DOCTYPE html>
<html>
<html lang="ja">

<head>
  
  <title>水平線の装飾</title>
  <style type="text/css">
  p {
    margin: 5px 60px; 
}
    .bar1 {
  display: block;
  width: 70%;
  height: 5px;
  background-color: #ffaaaa;
  border: 0;  /*デフォルトデザインでは線がある場合があるので、消しておく。*/
  margin-bottom: 2rem;
}
  .bar2 {
  display:block;
  width: 70%;
  height: 10px;
  border: 0;
  border: 1px solid #cacaca;
  -webkit-border-radius: 10px;
  background: #005500; /* Old browsers */
  background: -moz-linear-gradient(left,  #005500 0%, #52b152 20%, #83c783 51%, #008a00 76%, #005500 96%, #005700 100%, #005500 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#005500), color-stop(20%,#52b152), color-stop(51%,#83c783), color-stop(76%,#008a00), color-stop(96%,#005500), color-stop(100%,#005700), color-stop(100%,#005500)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #005500 0%,#52b152 20%,#83c783 51%,#008a00 76%,#005500 96%,#005700 100%,#005500 100%); /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to right,  #005500 0%,#52b152 20%,#83c783 51%,#008a00 76%,#005500 96%,#005700 100%,#005500 100%); /* W3C */
margin-bottom: 2rem;
}
  .bar3 {
  display: block;
  border: 0;
  width: 70%;
  height: 19px;
  background: url("img/leaf_line.png") no-repeat top center;
  -webkit-background-size: 512px 28px;
  margin-bottom: 2rem;
}
  .bar4 {
  display: block;
  width: 70%;
  height: 3px;
  border: 0;
  background-color: #aaaaaa;
} 
  </style>
</head>

<body>
<div style="margin: 5px 60px;">hr(水平線)へのいろいろな装飾はhtml文でもできるが、css文でやるのが本筋なので勉強した</div>
<p>装飾1　水平線を赤色にする</p>
  <hr class="bar1">
<p>装飾2　水平線に背景グラデーションをかける</p>
<hr class="bar2">
<p>装飾3　水平線の背景に画像を使う</p>
<hr class="bar3">
<p>装飾なし</p>
  <hr class="bar4">

</body>

</html>


＊Webでの表示




HTML5,CSS3のお勉強 その8 ー円形グラデーションー

2017-05-17 11:28:17 | study
CSS3のお勉強　その8 ー radial-gradient ー
今回は前回の応用で円形グラデーションのお勉強です

円形グラデーションは円形で変化するグラデーションです
下記の赤ラインから赤ラインの間が作成したHTMLファイルで、スタイル部分は<head></head>内に組み込んでいます。



<!DOCTYPE html>
<html>
<html lang="ja">

<head>
  
  <title></title>
  <style type="text/css">
    table {
      width: 80%;
      height: 200px;
      border: none;
      border-collapse: collapse;
      margin: 2em auto;
    }

    td {
      width: 24.0%;
      height: 200px;
      padding: 1.0rem;
      box-sizing: border-box;
    }

    .space {
      width: 4%;
    }

    .gradient1 {
      font-size: 12px;
      vertical-align: bottom;
      color: white;
      background-image: radial-gradient(skyblue, blue);
    }

    .gradient2 {
      font-size: 12px;
      vertical-align: bottom;
      color: white;
      background-image: radial-gradient(at 50px 50px, skyblue, blue);
    }

    .gradient3 {
      font-size: 12px;
      vertical-align: bottom;
      color: white;
      background-image: radial-gradient(circle 100px at 50px 50px, skyblue, blue);
    }

    .gradient4 {
      font-size: 12px;
      vertical-align: bottom;
      color: white;
      background-image: repeating-radial-gradient(skyblue, blue 20px);
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <td class="gradient1">領域の中心点から円形でグラデーションする</td>
      <td class="space"></td>
      <td class="gradient2">円形グラデーションの中心の位置を任意の場所へ移動する</td>
      <td class="space"></td>
      <td class="gradient3">円形グラデーションの中心を正円にする</td>
    </tr>
  </table><br>
  <table>
    <tr>
      <td class="gradient4">正円グラデーションを繰り返す</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>

</html>


　＊ Webでの表示 ＊






HTML5,CSS3のお勉強 ー その7 ー線形グラデーション

2017-05-11 07:59:51 | study
CSS3のお勉強　その7 ー linear-gradient,radial-gradient ー
線形グラデーションと円形グラデーションのお勉強です

線形グラデーションのデフォルトは上から下へ変化するグラデーションです
下記の赤ラインから赤ラインの間が作成したHTMLファイルで、スタイル部分は<head></head>内に組み込んでいます。


<!DOCTYPE html>
<html>
<html lang="ja">
<head>
  
  <title>css3のお勉強6ーlinear-gradient－</title>
  <style type="text/css">
    .linear {
      width: 200px;
      height: 200px;
      margin: 5px;
      color: white;
      font-size: 12px;
      padding: 20px 10px;
      box-sizing: border-box;
      float: left;
      background-image: linear-gradient(skyblue, blue);
    }

    .linear2 {
      width: 200px;
      height: 200px;
      margin: 5px;
      color: white;
      font-size: 12px;
      padding: 20px 10px;
      box-sizing: border-box;color: white;
      font-size: 12px;
      padding: 20px 10px;
      box-sizing: border-box;
      float: left;
      background-image: linear-gradient(to top left, skyblue, blue);
    }
  </style>
</head>

<body>
  <div class="linear">上から下へグラデーション</div>
  <div class="linear2">左上へグラデーション</div>
</body>

</html>


＊Webでの表示＊