以前投稿したCSSのボタンを紹介する記事がうまく動かなくなったので、投稿しなおします。
中身は前と変わってません。
動きとしてはホバーすると色が変わり、押すとへこむというものです。
下にDEMOがあります。リンクしてないので、押しまくって楽しんでください。
以下はコードです。
みなさん、お疲れ様です。
今日は珍しくデザイン寄りのお話を。といっても途中からコーディングの話もしますけど。
今回取り組んだのはCSSスプライトです。
CSSスプライトというのは、複数のアイコンなどの画像を一つの画像にまとめて、画像の読み込み回数を減らそうという手法です。制作にあたって以下のサイトを参考にさせていただきました。
CSSスプライトについてあれこれ。（Lobin.jpさん）
まずは画像作成。
今回はPhotoshopを使いました。Illustratorでもできると思うのですが、配置するのがPhotoshopのほうが楽だったので。
図のように一つひとつの画像を同じサイズにして並べていきます。今回は16px角にしています。
このとききちんと画像を並べておくと、コーディングの時に便利です。
では、できた画像をコーディングでサイトに組み込んでみます。
少し省略していますが、最低限必要な記述は上記。before・afterで入れるとか、文字と置き換えるとか、そのときに応じて入れ方は工夫する必要がありそうです。
widthとheightは画像サイズにします。そして、background-sizeを(画像の数×100%)にします。そしてbackground-positionの値を(-100% * (表示したい画像の順番ー1))にします。一番上なら0番目ってことです。
上のサンプルは2個×4個の画像が並んでいるので、background-sizeは200% 400%となるわけです。で、0番目なので上向きの三角が表示されるというわけですね。
CSS書くときは背景画像の読み込みとか、サイズを一括で指定しておいて、それぞれに画像位置だけ指定してあげるとCSSも短くなって良いですね。
画像はここからどうぞ。
ダウンロード
みなさん、お疲れ様です。
今回はSVGアニメーションに挑戦しました。→DEMO
存在自体は知ってたのですが、使いどころがわからずほったらかしになっていました。
で、なんとなく上のDEMOを作っていたら、知人が「サイトの初めに出したら面白そう」と言ってくれたので、それをヒントに実装しました。もしよければ後でポートフォリオサイトのほうに行ってみてください。ページ上部のロゴからリンクしてます。
では、使い方です。
今回はこちらのサイトを参考にさせていただきました。サイトが詳しいのでここでは簡単に説明させていただきます。
http://ascii.jp/elem/000/000/901/901319/
①まず、Illustratorでイラストを描きます。アンカーポイントは少ないほうがよさそうです。
②イラストをsvg形式で保存します。このときレイヤーの名前は半角英数にしておきましょう。
③svgの画像をDreamweaverなどのテキストエディタで開きます。すると以下のようなコードが出ます（見えないと思いますが、雰囲気だけ）。
④このコードの<svg>～</svg>をコピーしてHTMLの埋め込みたいところにペーストします。このときブロック要素で囲んでおいて、その要素の幅で画像の大きさを操作します。
⑤CSSでアニメーションの動きを決めます。 stroke・・・線の色 fill・・・塗りつぶしの色 stroke-width・・・線の幅 stroke-dasharray・・・破線の間隔 stroke-dashoffset・・・破線の開始位置 仕組みとしては破線の間隔を見えなくなるくらい長くして、破線の開始位置をすごく大きいところから小さくしていくことで、描画するような動きになるということだそうです。
一応以上で完成です。まだやり始めでわかってないこともたくさんあるので、またいろいろ試してみて載せたいと思います。
