CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a
君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
リアルな眼球を描く。HTMLとCSSだけで。 - Qiita
CSSの底力を見せてやる 「いいか…デザイナー…」 「これはCSSと私一人の問題だ…」 「CSSなんかに凝ったってSEOが捗るわけではないと知ったフウな事をいう者もいるだろう」 「SVGでいいじゃんという者もいる」 「だが」 「自分のCSSをドブに捨てられて その事を無理矢理忘れてSVGをただ貼るなんて人生は あたしはまっぴらごめんだし、 あたしはその覚悟をしてきた！！！」 …というわけではありませんが、なるべくリアルな眼球をHTMLとCSSでマークアップしていきます。 svgやcanvasは使わないしjsなんかもちろん使いません。 でも素で書くのは大変なのでpugとstylusでやっていこうと思います。 結果だけ知りたい人はこちら > eye2 pure css, without svg&canvas ベースとなる眼球を作成しよう
書いて覚えるSVG: 基礎編
この記事のターゲットとなる方 この記事は、「HTMLを書いたことがある方」や「Illustratorを使用したことがある方」向けにSVGの書き方の初歩を解説しています。 記事を読むだけでなく、PCで「CodePen」というオンラインのテキストエディターを開き、SVGを書いていくことでより深く理解できるようにしています。 ぜひ記事を読みながら一緒に書いてみてください。 SVGは他の画像形式と何が違うの？ この記事をご覧の皆様は「SVG」をどのようなものだと思っているでしょうか？ たとえば、JPEGやPNGと同じような「Web用の画像形式の一種」だと思っていらっしゃる方もいるかもしれません。 しかし、SVGはJPEGやPNGと明確に違うところがあります。 SVGファイルの中身はテキストデータであり、HTMLやCSSのようにテキストエディターを使って編集したり、新規制作したりすることができます。
SVGでアウトラインをカスタマイズしてみよう
SVGでアウトラインをカスタマイズしてみようこれまで、二回ほどSVGに関する記事を書きましたが、SVGの面白さは伝わっていますかね…！？今回はSVGのアウトライン（線）の装飾に注目！オブジェクトを徐々に描いていくラインエフェクトにも挑戦します！ SVG の基本的な情報や書き方は過去記事「アイコンフォントから SVG へ！より手軽にベクター画像を表示しよう」をご覧ください！ SVG 線種プロパティの基礎基本的な書き方ですが、SVG のコード内に直接記述する方法と、CSS で指定する方法があります。例えば stroke プロパティを使う場合： <svg viewBox="0 0 200 200"> <line x1="10" y1="10" x2="190" y2="190" stroke="#000" /> </svg> のように、 stroke="#000" と直接記述しても OK ですし
斬新なのに効果的！最近流行している「非平行ヘッダー」の作り方
ホームページの冒頭で、視線を引きつけて大きく印象づけるためにヒーローと呼ばれる画像とキャッチコピーを添えた見せ方をする部分があります。 通常、ヒーロー部分に限らず、多くの区切り目部分を平行に区切っていきますが、あえて四角形のように直線的に区切らずに、曲線や斜めの線などを使って区切っていくデザインが徐々に増え始めています。 今回は、最近よく見かける非平行ヘッダーの実装の仕方を、チュートリアル形式でご紹介します。 長方形で囲むヒーローヘッダーは比較的作りやすいのですが、非直線のヘッダーはどのようにして作られるのでしょうか。 作成手順を見てみましょう。 非平行ヘッダーとは？ 非平行ヘッダー(Non-paralleled header) （非長方形ヘッダー(Non-rectangular header)とも言います）とは、その名の通り2つの平行線で囲まれていないヒーローヘッダーのことをいいます。
待ち時間をもっと楽しく！コピペできるCSSローディングアニメーション38個まとめ
開いているウェブページが読み込み中であることを、分かりやすく伝えるローディングアニメーション。これまではGIFなどで作成されることもしばしばでしたが、CSSの進化によって自由でカスタマイズ性の高いローディングアニメーションがたくさん登場しています。 今回はコピペで利用できるCSSローディングアニメーションを、コミュニティサイト Codepen よりピックアップしご紹介します。 よりオリジナル性の高いデザインを作成することができ、待ち時間が楽しみになるようなエフェクトを中心に揃えています。どうしてもファイルサイズが大きくなってしまうページなどに活用してみてはいかがでしょう。 詳細は以下から。 待ち時間が楽しくなる、CSSコピペで実装できるローディングアニメーションまとめ #22 – Loader with Pure CSS 動きに合わせて、背景のグラデーションカラーが美しく変化するローディン
Anime.js | JavaScript Animation Engine
All-in-one animation engine. A fast and versatile JavaScript library to animate the web.
滑らかで美しい表現ができる！SVGアニメーションを使ってみよう
更新日: 2020年09月27日公開日: 2015年10月08日滑らかで美しい表現ができる！SVGアニメーションを使ってみよう Airbnb の模写（写経）で登場してくる SVG 形式の画像。Webデザイナー志望の方や単価をあげたいWebデザイナーの方にとっては、「SVG」必須ですよね。 今回は SVG 画像だからできる SVG アニメーション・・・・・・・についてご紹介させて頂きます。 参考: CSS-TRICKS SVG アニメーションは、SVG画像をベースに CSS や JavaScript で動きや装飾を加える表現手法の一つになります。 メリットとしては、軽量でスケーラブルな SVG 画像に好みのアニメーションを加えられるという点。普段 Web を見ている限りではどれがSVGアニメーションで、どれがSVGアニメでないのか区別はつきにくいですが、SEOや美しさ、滑らかさを求めるとSV
JavaScriptでCSSを操作する方法 | スターフィールド株式会社
のように記述すれば操作ができます。 ただ、案件によってはjQueryのが利用できなかったり、 対象の要素がSVGなどでブラウザによって認識されないなど、 jQueryを使わずにJavaScriptでCSSを操作する必要があります。 そこで、JavaScriptでのCSSの操作方法をまとめてみました。 var target = document.getElementById("example"); //対象要素をIDで指定 var target2 = document.getElementsByTagName("div"); //対象要素をタグで指定 var target3 = document.getElementsByClassName("example"); //対象要素をクラスで指定(IE9以上) target.style.color = "red"; //colorを設定 targ
bootstrapのglyphiconみたいなのを自分で作る方法
bootstrapのglyphiconやfont awesome、その他cssフレームワークについているフォントのアイコンを作る方法について。 前置き glyphiconのようなアイコンというのはフォントで作られている。フォントを使う利点というのは、サイズ変更や色の変更を自由に行えるということである。フォントなので当然複数の色は使えず単色になるが、補助的に使うものの場合、それで十分ということも多い。 フォントは当然クライアントのローカルにあるわけではないので自分で作成することになる。これを可能にするのが、指定したURLからフォントファイルをダウンロードさせてページ内で利用させる、CSS3のWebフォントという仕組みだ。
SVGアニメーションの現状 | POSTD
SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL（Syn
SVGを使いこなすための便利ツールいろいろ
SVGを使いこなすための便利ツールいろいろSVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術。高解像度ディスプレイでもくっきりはっきり表示できるので、近年海外サイトを中心に見かける機会が増えてきました。SVGについてはWebクリエイターボックスでも何度か取り上げてきたので、耳にしたことのある方も多いかと思います。今回はそんなSVGを使いこなすための便利なオンラインツールやJavaScriptなどを紹介します。 SVG ってなんぞや？という方は、過去記事「アイコンフォントから SVG へ！より手軽にベクター画像を表示しよう」をご覧ください！ ラスター画像を SVG に変換Vector MagicVector Magicは JPEG、GIF、PNG 形式の画像をベクター画像に変換し、EPS、SVG、PDF 形式でダウンロ
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ページを開く
CSSだけでここまで出来る！？タイトルや見出しにオススメなぬるぬる動く最新のCSSテキストエフェクト19選 | WebDesignFacts
http://2ndidea.com/svg/svg-path-drawing-animation-even-ie/
http://azarashic.net/svg-animation-1/