●トップ > HTML5+CSS3

HTML5+CSS3

８回目　ＣＳＳで位置を移動させてみる

2014-11-26

位置を移動
位置移動でござる
位置移動でござる 
--[ html ]-----------------------
<section>
<h1 class="ugokasu1">位置移動でござる</h1>
</section>

--[ CSS ]------------------------
.ugokasu1{
	  animation: ugokuzo 8s;
	  animation-iteration-count: 5;
	  -webkit-animation: ugokuzo 8s; /* Safari & Chrome */
	  -webkit-animation-iteration-count: 5;
	  background: #ff3366;
	  border-radius: 10px;
 	  color: #ffffff;
	  font-size: 14px;
 	  margin-bottom: 30px;
 	  padding: 10px;
 	  width: 200px;
}

	@keyframes ugokuzo {
	  0%   { transform:  translate(0px, 0px);    }
	  50%  { transform:  translate(300px, 0px);   }
	  100%   { transform:  translate(0px, 0px);    }
	}
	@-webkit-keyframes ugokuzo {
	  0%   { -webkit-transform:  translate(0px, 0px) ;   }
	  50%  { -webkit-transform:  translate(300px, 0px);   }
	  100%   { -webkit-transform:  translate(0px, 0px) ;   }
	}

７回目　CSS見出しをグラデーションで♪

2014-11-26

こちら、ベンダープレフィックスの記載必要

それでもＩＥ９では利用できないようです
未対応ブラウザのために　単色の背景も設定すること。

・linear-gradient 線形グラデーション
・radial-gradient　円形グラデーション←あまり使えそうにないのでお試し省略

ピンクでグラデーション

ピンクでグラデーション

--[ html ]-----------------------
<section>
<h1 class="gurade1">ピンクでグラデーション</h1>
</section>

--[ CSS ]------------------------
.gurade1{
background:#fd9eb2;
background: -webkit-linear-gradient(
#eb7e95 0%,
#fd9eb2 100%
);
background:linear-gradient(
#eb7e95 0%,
#fd9eb2 100%
);
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
}

--[ CSS 失敗]------------------------
.gurade1{
background:#fd9eb2;
background: -webkit-linear-gradient(
0deg,　　
↑どうやらPCとスマホとでは読み込みが違うらしい。書かないとデフォルトで上(0%)から下(100%)へグラデがかかる
#eb7e95 0%,
#fd9eb2 100%
);
background:linear-gradient(
0deg,
↑どうやらPCとスマホとでは読み込みが違うらしい。書かないとデフォルトで上(0%)から下(100%)へグラデがかかる
#eb7e95 0%,
#fd9eb2 100%
);
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
}

６回目　CSS見出し

2014-11-26

角丸

角丸でござる

--[ html ]-----------------------
<section>
<h1 class="midasi1">角丸でござる</h1>
</section>

--[ CSS ]------------------------
.midasi1{
    background: #ff3366;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
}
角丸とテキストに影

角丸とテキストに影でござる

--[ html ]-----------------------
<section>
<h1 class="midasi2">角丸とテキストに影でござる</h1>
</section>

--[ CSS ]------------------------
.midasi2{
    background: #ff3366;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
    box-shadow: 20px 20px 10px 0px black;
    text-shadow: 1px 1px 3px #000;
}
見出しを斜めに

見出しを斜めにでござる

--[ html ]-----------------------
<section>
<h1 class="midasi3">見出しを斜めにでござる</h1>
</section>

--[ CSS ]------------------------
.midasi3{
    background: #ff3366;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}

５回目　①＋② 応用 / ページ読み込みで動く

2014-11-17

波とイルカ

--[ html ]-----------------------

 <div id="hani">
    <span class="animation-nami"></span>
    <span class="iruka2"></span>
    </div>

--[ CSS ]------------------------
｛animation:キーフレーム名　再生時間　補間方法　ディレイ　繰り返し　方向｝
＠keyframes キーフレーム名｛～｝

#hani{
    height: 100px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#hani span {position:absolute;}

.animation-nami{
width:100%; 
height:30px; 
z-index:10; 
left:0; 
bottom:0; 
background-image:url(images/nami.png);
}

.animation-nami {
-webkit-backface-visibility: hidden;
-webkit-animation: ugokunami 15s linear infinite 0s;
-moz-animation: ugokunami 15s linear infinite 0s;
-o-animation: ugokunami 15s linear infinite 0s;
-ms-animation: ugokunami 15s linear infinite 0s;
animation: ugokunami 15s linear infinite 0s;
}

@keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}

.iruka2{ 
        background-image:url(images/iruka1.png) ;
	width:160px;
	height:160px;
        z-index:5;
        bottom:-110px;
 	-webkit-animation:irukamawaru2 6s linear infinite normal;
	animation:irukamawaru2 6s linear infinite normal;
}

@keyframes irukamawaru2{
	0%	{}
	100%	{transform: rotate(360deg);}
}

« Older Entries

PAGE TOP