リアルな眼球を描く。HTMLとCSSだけで。 - Qiita
CSSの底力を見せてやる 「いいか…デザイナー…」 「これはCSSと私一人の問題だ…」 「CSSなんかに凝ったってSEOが捗るわけではないと知ったフウな事をいう者もいるだろう」 「SVGでいいじゃんという者もいる」 「だが」 「自分のCSSをドブに捨てられて その事を無理矢理忘れてSVGをただ貼るなんて人生は あたしはまっぴらごめんだし、 あたしはその覚悟をしてきた！！！」 …というわけではありませんが、なるべくリアルな眼球をHTMLとCSSでマークアップしていきます。 svgやcanvasは使わないしjsなんかもちろん使いません。 でも素で書くのは大変なのでpugとstylusでやっていこうと思います。 結果だけ知りたい人はこちら > eye2 pure css, without svg&canvas ベースとなる眼球を作成しよう
SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
