ウェブページ的なの作りました
HTMLとCSSの勉強がてらに作ったページをもったいなかったのでGitHub Pagesとしてアップしました。
http://solismb.github.io
デザインがダサいのは書けるコンテンツがないから(震え声
意識高い友人たちが進捗報告会しようぜと言ったのが始まりでした。プヨグヤミングが出来ないのでウェブページ制作に逃げたわけですが、始めたら結構楽しかったです。
HTMLはウェブ上の文章を記述する言語です。それに対してCSSはそれらをどのように装飾するかを指定するスタイルシートです。
最初にページのデザイン案はあったんですが、某氏のページとデザインが酷似していたので急遽変更。もとは報告会用にと思っていたので、CSS3となって新たに追加されたプロパティを紹介がてらにグラデーションのボタンとか角丸のボタン作りました。
.links .box .button:hover { background: -moz-linear-gradient(bottom, rgba(80, 240, 255, 0.6), #FFF); background: -o-linear-gradient(bottom, rgba(80, 240, 255, 0.6), #FFF); background: -webkit-gradient(linear, left bottom, left top, from(rgba(80, 240, 255, 0.6)), color-stop(0.3, rgba(80, 240, 255, 0.3) ), to(white)); }
これがカーソルが乗ると出てくる青いボタンのコードです。linear-gradient がグラデーションのプロパティです。rgbaという最後に透明度を指定出来るのもcss3の新機能だった気がします。
私はChrome使ってるんでChromeだけ途中の値まで指定して綺麗に見えるようにしてます。あと何故かwebkitだけleft bottom, left topと書かないと下から上にグラデーションしてくれなかった…なんで…
.profile .pbox .back { float: left; width: 110px; height: 50px; background-color: rgba(80, 240, 255, 0.6); margin-right: 20px; margin-left: 30px; text-align: center; line-height: 50px; border-radius: 7px 7px 7px 7px; -moz-transition: background-color 220ms, linear; -o-transition: background-color 220ms; -webkit-transition: background-color 220ms, linear; }
Aboutにあるボタンのコードです。border-radius がボックスの角を丸く出来るプロパティで、transition が時間的変化をさせるプロパティです。
この2つはウェブページ作りたい人におすすめのプロパティかなと。
css3はアニメーションも作れるけど私は面倒で触りませんでした…
あと
CSS3のtransitionプロパティでアニメーションを試してみた | THE HAM MEDIA BLOG
このページの Opacityデモ その2 が気になったのでやる気が出たら挑戦してみたいと。
かっこいいサイト作れるよう、まずはコンテンツ力のある人間になれるよう頑張ります。