コピペでOK！セクション間のおしゃれな仕切りをカスタマイズして実装できる便利なWebサイト3つ
2021年9月14日 CSS, SVG, Webサイト制作 上下に並んだセクションの間に、斜めのラインや模様を取り入れると一気に印象が変わります。複雑な図形もSVGを使って実装できますが、一からコーディングするとなるとなかなか手間がかかります。そこで予めいろんな模様が用意されているWebサイトを使って手軽に挿入してみましょう！ ↑私が10年以上利用している会計ソフト！ SVG Shape Dividers Generator Tool SVG Shape Dividers Generator Tool 画面右側にカーソルをあわせるとパネルが表示され、模様が選択できます。左側のパネルから表示位置や色、模様の大きさなどが調整可能。「Animate」をオンにすると、キーフレームアニメーションで動くコードが生成されますよ。「COPY CODE」をクリックでCSSコードをコピーできます。 個性的な模
変幻自在なグラフィック表現！CSS, SVG, Canvasでマスクを使いこなせ - ICS MEDIA
近年、ウェブ技術の発展により、画像の一部だけを表示する「マスク表現」がよく見られるようになりました。一言でマスクと言っても、アニメーションやインタラクションとの組み合わせによりさまざまな表現が可能です。 また、どの技術を用いるかという選択も重要になります。マスク表現はCSS, SVG, Canvas APIといった技術で実現できますが、それぞれが異なる得意分野をもちます。 本記事の前半では、マスク表現を実現する技術について解説を行います。後半では実践的なマスク表現をいくつか紹介しながら、それぞれの実装方法を紹介します。いままで技術的に難しいと諦めていた表現が、マスクによって実現するヒントになれば幸いです。 ▼マスク表現の例（背景画像の一部を表示している） - Erika Moreira Portfolio マスクとは 本記事で紹介するマスク表現とは、画像の一部を切り抜く手法です。マスキング
JS と CSS でカスタマイズできてモバイルでも使いやすい SVG の日本地図データを公開しました！
JS と CSS でカスタマイズできてモバイルでも使いやすい SVG の日本地図データを公開しました！ ウェブ制作の仕事をしていた時に数回あるのですが、ナビゲーションに日本地図を使いたいって言われて、泣きながらクリッカブルマップを作った経験とかありません？ 今夜も数百回、数千回ものクリックを繰り返して、せっせと日本地図の UI を作るウェブ制作者のみなさんのために SVG フォーマットでつくった日本地図を公開します。 https://github.com/geolonia/japanese-prefectures うちの API の中に組み込もうと思って作ったのですが、いい感じの API を思いつけなかったので、皆さん自力で JS なり CSS なりをご用意ください。笑 特徴 各レイヤーは都道府県ごとにグループ化してあります。 都道府県名、八地方区分名を class 属性の値としてセットし
SVGでCSSアニメーション｜sumi｜note
はじめにカラフルな線が印象的なアイコンができたので、ラインを描いていくようなアニメーション（ドローアニメーションというのかな？）にしていきます。 最初に見かけた方法はvivusというSVGアニメーションのJavascriptライブラリ。 簡単に手書き風？アニメーションができそうです。 でもvivusはやめました。Javascript重いのでCSSだけでいけるならそのほうが良いですよね・・。ということで調べつつやってみました。 SVGを表示する/mozart.svg（モーツァルトの顔部分） <svg id="icon" xmlns="http://www.w3.org/2000/svg"> . . . </svg> /mozart-text.svg（Wolfgang Amadeus Mozartの部分） <svg id="icon" xmlns="http://www.w3.org/2000
CSS・SVGとVue.jsでのアニメーション作成入門 - ライブラリに頼らない表現力を身に付けよう - ICS MEDIA
※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。 専用ライブラリを使わずにアニメーションを作ろう 各ライブラリは特別な魔法を使っているわけではありません。 原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。 また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書く とは言え、これらのアニメーションを土台の技術
CSSとSVGでチェックボックスを装飾しよう！
2022年4月27日 CSS, SVG CSSでフォーム内の部品を装飾するのは、昔から難儀でした。特によく使うチェックボックスは色をつけることすら難しく、様々なCSSの小技やJavaScriptプラグインを使って実装してきました。今回はチェックマークにSVGを使い、なるべくシンプルな書き方でチェックボックスを装飾してみようと思います。 ↑私が10年以上利用している会計ソフト！ チェックボックスを装飾する手順 1. HTMLマークアップ まずはHTMLを書いていきます。label タグでチェックボックスを囲うと、for 属性や id 属性の指定をしなくても label タグ内のテキストがクリック範囲となるので便利です。テキストは span タグで囲みました。この span 部分にCSSでチェックボックスを表示させる指定をしていきます。 HTML <form> <label> <input t
SVG×CSSで作る！パララックスアニメーション - Hatsuka
SVG Advent Calendar 2016、２日目担当のまついです。 昨年もSVGの記事を書いたのですが、設定のあたりで力尽きてしまったので、リベンジ。 今回は簡単なサンプルを作ってみました。 See the Pen Merry Christmas! by matsui (@matsui) on CodePen. アドベントカレンダーということで、クリスマス仕様にしてみました。 時間の都合上、トナカイの足がすり足になってますが、スルーしてください。 今回、サンプルを作るにあたって、アニメーションさせたいけど、特に良いアイデアが思いつかなかったので、こちらのソースをパク…にインスピレーションを得て作成しました。 JSは使わず、CSSをごにょごにょして、背景がパララックスで動くようにしてます。 サンプルでは、横幅を100%に設定したため、ループしないようになってますが、横幅固定でイラスト
Gulpを使ったSVGスプライトのアイコンシステムとワークフローの作り方
SVGスプライトって、なんか複雑なイメージがありませんか？ 僕はそうでした。なんか、面倒くさそう。。。どこから始めて良いかわからない。。。といった感じでずっと手をつけられずにいました。 でも、今回やってみて思ったんですが、一度ワークフローを確立してしまえばアイコン管理がかなり便利になります。CSSスプライトの時よりも管理が楽になりますし、表示サイズや今後の高解像度対応を気にしなくて良くなるのも嬉しいですね。 SVGスプライトについての英語のリソースはあるのですが、説明が多く、とっつきにくいものも多い印象なので、ここではできるだけシンプルに必要なことだけをまとめてみたいと思います。 では、SVGスプライト・アイコンシステムのGulpを使ったワークフローの構築、始めましょう！ 目次 達成したいこと デモページ SVGスプライトの仕組み ブラウザサポート 用意するもの 導入ステップ 最後に 達成
いまさら聞けないRetina対応のための「ピクセル」の話
ピクセル密度とピクセル比の関係 ピクセル密度は、数が多ければ多いほどスクリーン上で鮮明な描画ができるわけですが、上述したピクセル比とは直接関連しないものです（と考えています）。たとえば、Galaxy S IVのようにピクセル密度は441ppi、ピクセル比は2という端末もあれば、HTC Oneのように、ピクセル密度は468ppiだが、ピクセル比は3という端末もあります。 ※両方とも実機で検証したわけではないので、Wikipediaの情報が正しければの話ですが。 ※ピクセル比とは違うものですが、それと似た単位であるdppx (dots per pixel unit)では、CSSで定義された1インチが96pxになるため、1dppx = 96dpiになります。 ピクセル比に似た値「dp」とwindow.devicePixelRatio Androidの密度非依存ピクセル「dp」 Density-i
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSやSVGで実装するローディングアニメーション - NxWorld