手書き風UIを実装できるJavaScriptライブラリー
2022年2月15日 JavaScript, Webサイト制作 手書きのものってどこか温かみがあって親近感がわきますよね。今回はそんな手書き風のUIを実装できるJavaScriptライブラリーを紹介します！ ↑私が10年以上利用している会計ソフト！ Rough Notation Webサイト｜GitHub テキストの一部を強調したり、注釈を入れたいところに手書き風マーカーを追加できます。まさに今書いてます！というようなアニメーションも面白いですね。 導入方法 JavaScriptファイルで import { annotate } from 'https://unpkg.com/rough-notation?module'; または npm でインストールします。 npm install --save rough-notation 実装方法 基本的には実装したい要素を指定して、装飾を指定し、
CSS Section Separator Generator
CSS section divider descriptionWith this CSS Section Separator Generator, you can choose between 6 different dividers. Each of them can be customized by using the controls in the preview field. The tool includes a skewed divider, a semi-circle divider, a wave divider, a spikes divider, a triangle divider and a curved divider. Most of these dividers are pure CSS and using the ::before and ::after p
アートブラシで描いたような手書き風文字をイラストレーターで表現するチュートリアル | バニデザノート
アートブラシや筆ペンで描く今風のカリグラフィーをイラレでずっと描きたいと思っていまして。イラレの線幅ツール（CC3以降？）である程度表現することが出来そうなので、手順を書いてみます。 ※たぶん中〜上級者向け。ある程度イラレがわかる人じゃないとついてこれないかもです。
SVGでアウトラインをカスタマイズしてみよう
2014年7月30日 SVG これまで、二回ほどSVGに関する記事を書きましたが、SVGの面白さは伝わっていますかね…！？今回はSVGのアウトライン（線）の装飾に注目！オブジェクトを徐々に描いていくラインエフェクトにも挑戦します！SVGの基本的な情報や書き方は過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」をご覧ください！ ↑私が10年以上利用している会計ソフト！ SVG線種プロパティの基礎 基本的な書き方ですが、SVGのコード内に直接記述する方法と、CSSで指定する方法があります。例えば stroke プロパティを使う場合： <svg viewBox="0 0 200 200"> <line x1="10" y1="10" x2="190" y2="190" stroke="#000"/> </svg> のように、 stroke="#000" と直接記述しても
960pxのグリッドを1クリックで用意してくれるPhotoshopのアクション
960pxのグリッドに4, 6, 8, 10, 12カラムとそれに伴ったガイドを1クリックで用意してくれるPhotoshopのアクションを紹介します。 960 Grid Actions for Photoshop アクションはPhotoshopのドキュメントを新規作成するもので、グリッド・カラム・ガイド以外にもレイヤーにヘッダやフッタなどのフォルダも準備されます。 フォルダも準備されます アクションを一から作成するのは面倒なので、これをそのまま使用してもよいし、自分用にカスタマイズしてもいいかもしれません。 ダウンロードしたアクションファイルは当方のPhotoshop CS4日本語版でエラーが出てしまったので、それを修正する方法を紹介します。 ※再配布のライセンスがなかったので説明のみで。 日本語環境と英語環境で作成される名前が異なるため、エラーが表示されます。 エラーの内容はレイヤー「G
手描き風タッチのバリエーションが増やせるPhotoshopのブラシツール -Fast Pencil Brushes
Photoshopのブラシツールに、手描き風のソフトタッチ、ハードタッチ、ワイヤーフレーム用などのバリエーションが増やせるプリセットをMichaelHoweから紹介します。 Photoshop Fast Pencil Brushes 追記： ペンツールではなく、ブラシツールでした。それに伴い一部記述を「ペンツール」から「ブラシツール」に変更しました。 ペンツールへの登録方法は何かの役にたつかもしれないので、そのままにしておきます。 ペンツールの紹介は初めてなので、まずは使用方法から。 Photoshopのペンツールの登録方法 ダウンロードしたファイル（拡張子.tpl）は、「Presets」内の「Tools」に格納します。 例：C:\Program Files\Adobe\Adobe Photoshop CS4\Presets\Tools Photoshopを起動し、ペンツール[P]を選択し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]SVGのアイデアが広がる！かわいいパターンのテクスチャがSVGで作成できるスクリプト -Textures.js![[JS]SVGのアイデアが広がる！かわいいパターンのテクスチャがSVGで作成できるスクリプト -Textures.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/22479d89713c68e7c04be9754415c079ec9f7950/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015032308.png)
IDEA * IDEA
IDEA * IDEA
