HTML5+CSS3
8回目 CSSで位置を移動させてみる
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) ; } }
7回目 CSS見出しをグラデーションで♪
2014-11-26
こちら、ベンダープレフィックスの記載必要
それでもIE9では利用できないようです
未対応ブラウザのために 単色の背景も設定すること。
・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; }
6回目 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); }
5回目 ①+② 応用 / ページ読み込みで動く
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);} }