WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

CSS3

立体的なテキスト

デモ http://efu.sakura.ne.jp/web/text/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>テキスト</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy"> </link></link></meta></head></html>

スポットライト

http://efu.sakura.ne.jp/web/mask/以前書いた記事 mmmmofu.hatenablog.combackground-clip: textにした文字「●」をpaddingで動かしてスポットライト風にする。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>スポットライト</title> <link rel="stylesheet" href="style.css"> </link></meta></head></html>

要素を傾けて斜めにする

デモ http://efu.sakura.ne.jp/web/skew/ <html lang="en"> <head> <meta charset="UTF-8"> <title>傾き</title> <style> h1 { text-align: center; line-height: 500px; font-weight: bold; letter-spacing: 0.05em; font-size: 50px; font-family: "游ゴシック",YuGothic,"Helvetica","ヒラギノ角ゴ ProN W3", "Hiragino…</meta></head></html>

CSSセレクター

全ての要素に適用 * 子要素子要素にのみ適用 > 隣接している要素にのみ適用 + 後にある要素にのみ適用 ~ 最初の文字に適用 :first-letter 最初の行に適用 :first-line n番目の要素に適用 :nth-of-type(n) 最後からn番目の要素に適用 :nth-last-of-type(n) 過…

transition

transition-property CSS Transitionsより引用 Property Name Type background-color color background-image only gradients background-position percentage, length border-bottom-color color border-bottom-width length border-color color border-lef…

CSS3でメニューアイコンのアニメーション

デモ http://efu.sakura.ne.jp/web/menu/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>menu</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/script.js"></script> </head> <body> </body></html>

1枚の画像で雲を左から右へ無限に流れるアニメーション

<html lang="ja"> <head> <meta charset="UTF-8"> <title>雲が左から右に無限に流れるアニメーション</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/script.js"></script> </head> <body> <div class="bg_cloud" id="bg"></div></body></html>

徐々に早くなる回転アニメーション

CSS3で徐々に早くなる回転アニメーションを作成する。 デモはこちら http://efu.sakura.ne.jp/web/rotation/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>徐々に回転が早くなるアニメーション</title> <style> .gear { width: 200px; -webkit-animation: spin 4.3s cubic-bezier(1,0,.87,.62) infinite; animation:</meta></head></html>…

ボタンを押したらプリントアウト/プリントアウトする時のCSSを変更

ボタンを押したらプリントアウトの画面が立ち上がる。その際に余計なものを消し、プリントアウトしたいものだけ表示させる。 デモはこちら http://efu.sakura.ne.jp/web/print/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>print</title> <link rel="stylesheet" href="css/style.css"> <style> @media print{ header, footer, .print_btn, .sidebar { display: …</link></meta></head></html>

CSSで長体/平体を表現

transform: scale()で文字の縦横方向の大きさを伸ばしたり 小さくしたりすることで長体や平体を再現。 デモはこちら http://efu.sakura.ne.jp/web/font/ 長体 .text { -webkit-transform: scale(1, 2.1); -ms-transform: scale(0.6, 1); -o-transform: scale…

CSS3のtrantionでキャプションを表示

http://efu.sakura.ne.jp/web/0825/ <html> <head> <meta charset="utf-8"> <title></title> <style> a { text-decoration: none; color: #FFF; } .box { width: 300px; height: 300px; margin: 150px auto 0; background: #06C; position: relative; overflow: hidden; } h3 { padding-bottom: 20px; colo…</meta></head></html>

CSS3アニメーションで雲を動かす

雲を横に動かすアニメーションhttp://efu.sakura.ne.jp/web/cloud/ <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS3アニメーションで雲を動かす</title> <style> body,html { width: 100%; height: 100%; background: skyblue; overflow: hidden; } #kumo { width: 100px; height: 30px; background: url(img/clou</meta></head></html>…

CSS3アニメーションで桜が舞う

デモはこちら http://efu.sakura.ne.jp/web/sakura/ <html lang="ja"> <head> <meta charset="utf-8"> <title>桜が舞う</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div class="inner"> <div class="sakura1"></div> <div class="sakura2"></div> <div class="sakura3">…</div></div></div></body></html>

バナーをCSS3でアニメーション

回転しながらバナーが変わるアニメーションを作成。 他に文字がフェードで切り替わる、 ボタンの背景が光るアニメーションをつける。 デモはこちら http://efu.sakura.ne.jp/web/banner02/ <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="news"> <ul class="anime-ticker"> <li>【母の日】プレゼントオーダー承っています…</li></ul></div></body></html>

色が変わっていくバナー/三角形の色が変わる

Photoshopでバナーを作り、文字部分(色を付けたい部分)を透明にし、 他を背景と同じ色(今回の場合白)にする。 作成したバナーをHTMLに貼り付け CSS3のanimationでbackgroundを変化させていく デモはこちら http://efu.sakura.ne.jp/web/banner/ <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS3</title></meta></head></html>…