CSSで三角形を実装するにはaspect-ratioとclip-pathを使用するのが簡単 -CSS Triangle Shapes
HTMLはdiv要素一つだけ（もしくはimg要素一つだけ）、あとはCSSをコピペするだけで三角形を実装できるCSS Triangle Shapesを紹介します。 CSSの三角形は、一昔前はborderで実装していましたが、最近では2つのプロパティ（aspect-ratio, clip-path）で実装します。どうやって実装するんだっけ？ というときに覚えておくと、さくっと利用できるので便利です。 CSS Triangle Shapes CSSで三角形を実装する最近の方法 CSSで三角形を作成するジェネレター CSSで三角形を実装する最近の方法 まずは、三角形をCSSで実装する方法を見てましょう。 これまでのCSSだと、divなどの矩形にborderプロパティで太いボーダーを設定し、三角形の部分だけ残して使用していました。
Adobe XDとFigmaの違い｜松下 絵梨
Adobe XDとFigma、どちらもよく使う、どっちも好きという人が増えてきましたね。 共通点も多いアプリだからこそ、「どっちがどっちだっけ」と混乱しないように、違いをざっくりまとめました。 気づいたらまた更新します！ よく使うショートカット図形ツールスタックとオートレイアウトリピートグリッドの代わりに・・・Figmaには、Adobe XDのように、リピートグリッドや、シェイプに画像をドラッグして配置する機能がありません。 下記の工程で、「リピートグリッドに画像を一気に流し込み」っぽいことをFigmaですることができます。 （リピートグリッドの便利さにはかないませんが・・・） 「リピートグリッドに画像を一気に流し込み」っぽいことをFigmaでする方法🍀 Illustratorみたいに「⌘ + Dで繰り返し」ができるのが嬉しい😊 画像の配置：shift + ⌘ + Kも早めに覚えてしま
JSでクリエイティブコーディング - テキストを分解しパーティクルにする演出 - ICS MEDIA
パーティクルとは粒子のこと。パーティクルを表現に取り入れると、印象的な演出に役立ちます。JavaScriptやWebGLを使うことで、ウェブの技術でもパーティクル表現の制作が可能です。本記事では題材にパーティクル表現の制作に役立つアイデアや着眼点を紹介します。 作例の紹介 本記事のチュートリアルの完成形はこちらになります。 別タブで再生する ソースコードを確認する この記事で学べること 2Dテキストを粒子化して動かす表現 パーリンノイズによる空気感の再現 GSAPによる大量のトゥイーン制御 WebGLの高速化（PixiJSの応用） 制作の技術 本作例を制作するにあたり、利用しているウェブの技術の概要を紹介します。 WebGL 画面表示はWebGLを利用します。ウェブのレンダリング技術において、もっとも高速な描画性能を得られるのがWebGLであるためです。WebGLは3D表現のための技術と思
これでもうPhotoshopの描画モードに迷わない！ 「乗算」「焼き込みカラー」など、各描画モードがどのように機能するか解説
Photoshopなどのデザインソフトにある「乗算」「スクリーン」「焼き込みカラー」「覆い焼きカラー」など、各描画モードがどのように機能するかを解説します。 それぞれの違いがよく分からない、どんな効果があるのか分からないという人に、これを読めば描画モードでどれを使うか迷うことはなくなります。 Blending Modes by Dan Hollick (@DanHollick) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 描画（ブレンディング）モードとは 各描画（ブレンディング）モードについて解説 はじめに 見た目が思い通りになるまで、描画モードをいろいろ試していませんか？ 描画モードの種類 この記事を読んでもあまり変わらないかもしれませんが、少なくとも「比較（明）」や「比較（暗）」を使用することはなくなるでしょう
【フォトショップ】ざらりとした光沢感！メタリックな文字エフェクトのつくり方
この記事では、フォトショップをつかった超リアルなライティング、グローエフェクトのつくり方をご紹介します。 お好みで文字やネオンカラーの変更が可能な点もポイントで、手軽に編集を行うことができます。 このチュートリアルは、Texturelabsによる英語版オリジナルチュートリアル「Grungy Chrome in Photoshop OR After Effects」をアレンジしたものとなります。 加工前ビフォー 加工後アフター キャンバスは4K対応RGBカラー16bitに まずはフォトショップを開き、新しいドキュメントを作成しましょう。カラーモードは「RGBカラー 16bit」とすることで、よりリアルな光沢感をを表現できます。今回は、3840x2160pxの4Kサイズで作成していきます。 メインメニューより「文字ツールT」を選択し、お好みのフォントを使って文字を入力します。 今回利用したフォ
Google純正の構成図作成ツールが登場したので早速使ってみた
クラウドサービスでは大量の機能が多種多様に提供されており、簡単なアプリでも複数のサービスを組み合わせて利用することも珍しくありません。そうしたバックグラウンドのサービスを設計する際に役立つのがサービス間の構造を図に落とし込んだ「アーキテクチャ図」です。これまでもサードパーティーからさまざまなアーキテクチャ図作成ツールが提供されてきましたが、2022年2月17日にGoogleが自社クラウド向けの公式アーキテクチャ図作成ツールをリリースしたので、早速使い勝手を試してみました。 Google Cloud Developer Cheat Sheet https://googlecloudcheatsheet.withgoogle.com/architecture Introducing a Google Cloud architecture diagramming tool | Google Cl
手書き風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 実装方法 基本的には実装したい要素を指定して、装飾を指定し、
canvasで大量の円がランダムに動くパーティクルを実装してみよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのぜんちゃんです。 最近はアニメーション表現を増やすために、canvasの勉強を始めました。そこで、今回はcanvasやJavaScriptの基本技術を使って、円がランダムに動くパーティクルアニメーションを実装したいと思います。 今回作るアニメーションはこちらです。 円を作成・描画する canvas要素を作成し、そのcanvas内に円を作っていきます。 まずは一つだけ作りたいと思います。 <canvas id="canvas"></canvas> // キャンバス要素を取得 const canvas = document.getElementById('canvas'); // キャンパスに描画するコンテキストを取得 const ctx = canvas.getContext('2d'); // キャンバスサイズをwindowサイズに canvas.wi
jquery.graphviz.svg - GraphvizのSVGデータを表示/機能追加するjQueryプラグイン MOONGIFT
チャートやネットワーク図などを描くのに使われるのがGraphvizです。多くの場合PNGなどの画像で出力して利用しますが、SVGへのエクスポートも可能です。Web向けであれば、画像よりも使い勝手が良いでしょう。 そんなGraphvizで出力したSVGを表示するのがjquery.graphviz.svgです。 jquery.graphviz.svgの使い方 表示しました。 ノードをクリックすると、ハイライト表示されます。 さらにズームイン/アウトができます。 jquery.graphviz.svgはGraphvizのSVGデータに対して、ハイライトとズームイン、ズームアウトを追加します。さらにデータをレスポンシブにしてくれるので、どのデバイスに対しても適切な表示が可能です。 jquery.graphviz.svgはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT L
CSSで三角形のいろいろな実装例
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 三角形や矢印をWebブラウザーで表示するためには、PNGなどのラスター画像、SVG、CSSを使う方法があります。 場面に応じた実装方法を選ぶことで、該当箇所に変更があった場合に対応しやすくなります。 この記事では、実装方法によってどのような違いが出るのか、3つのパターンで解説します。 コンテンツの区切りで斜めになっている背景手順や流れでよくある矢印before/afterでの矢印 セクショニング
【フォトショップ】リアルすぎるエンボス加工のつくり方、レイヤースタイルで簡単
この記事では、フォトショップを使った超リアルなエンボス加工のつくり方をご紹介します。 別名浮き出し加工とも言われる「エンボス加工」は、紙面に凹凸をつけたような仕上がりが特長ですが、今回はこの質感をフォトショップで表現します。 レイヤースタイルを適用するだけで完成のお手軽チュートリアルで、繊細な質感を表現できるエフェクトとなっています。 このチュートリアルは、Texturelabsによる英語版オリジナルチュートリアル「Emboss Paper Text & Logos」をアレンジしたものとなります。 加工前ビフォー 加工後アフター このチュートリアルに必要なのはフォトショップだけ。７日間の無料体験もあるので、まずははじめてみませんか？ 7日間無料体験 Photsohopを無料ではじめる フォルダに放り込むだけでエンボス加工に まずはフォトショップを開き、新しいドキュメントを作成しましょう。カ
データ可視化に貢献するチャートCSSフレームワーク・「Charts.css」
Charts.cssはデータ可視化のためのチャートCSSフレームワークです。HTMLによるデータビジュアライズの際にスタイリングをサポートするクラスを提供してくれます。 面や棒、折れ線、円やドーナツなどよく見かける一般的なチャートやこれらのマルチデータ、パーセンテージや積み上げ式、3Dなど様々なビジュアライズも対応されています。 少しクセがある印象ですが、慣れれば問題なさそうでした。HTML形式のデータに対応する場合にあると作業がかなり楽になりそうですね。 動作サンプル及び簡単に使い方のご紹介です。基本的にはtableが使われ、classを付与する事でビジュアライズされます。 <table class="charts-css"> ... </table>単なるtableをビジュアライズするにはCharts.cssを読み込んだうえで上記のようにcharts-cssというclassを付与します
)
SvgPathEditor - WebベースのSVGエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SVGを作成する場合、Illustratorなどのドローアプリケーションを使ってSVG形式でエクスポートするのではないでしょうか。SVGを直接作成、編集できるソフトウェアはあまりないように思います。 そこで使ってみたいのがSvgPathEditorです。SVGをWebブラウザ上で作成、編集できるソフトウェアです。 SvgPathEditorの使い方 メイン画面です。 マウスでドラッグして編集できます。 パスの追加や描画の種類を変更できます。 プレビューです。 コマンド一覧から、描画している範囲を可視化できます。 保存機能もあります。 SvgPathEditorを使えばSVGをWebブラウザ上で手軽に加工できます。最初はドローアプリケーションでもいいですが、その後のちょっとした編集は
)
sheet2gmap - GoogleシートとGoogleマップを簡単に連携
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Googleマップではユーザがカスタマイズしてピンを立てたり、情報を付与する機能があります。便利なのですが、使うためにはJavaScript SDKを使いこなさなければなりません。また、データをどこかに保存しておく必要もあります。そのため利用を控えてしまっていないでしょうか。 今回紹介するsheet2gmapは世界一簡単なマップツールを自認しています。Googleシートを編集するだけで、Googleマップ上にデータを即座に反映できます。 sheet2gmapの使い方 最初の表示です。 Googleシートを開きます。 データを追加します。住所が入力されていれば、位置情報は自動的に補完してくれます。 再度マップを見ると、追加したデータのマーカーが立てられています。 sheet2gmap
Adobe Flash作品から学ぶクリエイティブコーディングのテクニック - ICS MEDIA
Adobe Flash Playerが2020年末にサポート終了すると公式アナウンスがされ、ブラウザ上でFlash製のサイトや作品が見られなくなります。かつてFlashは多くのクリエイターから支持され、ダイナミックで革新的なアイデアがいくつも生み出されました。 筆者もFlashを生業としていましたが、当時は毎日のように発明される表現や実装アイデアをクリエイター同士で共有し、他人のアイデアを融合しさらに昇華させていく、そのような文化がFlashコミュニティ全体に息づいていました。 そのようにして生まれたアイデアを後世に残すべく、今回は秀逸なFlash作例を集めたギャラリーサイト「Beautifl」から、いくつかの作品の実装アイデアを解説します。Flashで作られたものですが、HTML5やWebGL、Processingなどにも応用できる内容となっています。 具体的なコードには触れませんので、
お絵かきアプリProcreateでリアルな水彩ペイントを描くベストブラシ16個まとめ
iPadやiPhone、そしてスタイラスペンさえがあれば、まるで手書きしているようなスケッチやイラストを、手軽に描くことができるお絵かきアプリ「Procreate（プロクリエイト）」。 本物の筆ブラシで描いているようなレスポンス速度、筆圧に対応して太さの変化するブラシなど、イラストに自信がないひとにも人気の機能が満載です。 以下の動画では、直感的にイラストを短時間で完成させているのがよく分かります。 この記事では、水彩絵の具でペイントしたような質感をリアルに表現できるProcreate専用ブラシ素材をまとめてご紹介します。 Procreateにデフォルトで収録されているブラシでは難しい質感も、ペンをなぞるだけで簡単に仕上げることができる有料アイテムを揃えました。 お絵かきアプリProcreateでリアルな水彩ペイントを描くベストブラシ16個まとめ ■ Procreate Watercolo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape
)
Pencil.js - インタラクティブな2Dオブジェクトライブラリ MOONGIFT
https://codepen.io/stoumann/full/abZxoOM?__cf_chl_jschl_tk__=0e6e3f3b1905b07bb78d32fa4f79bc2b5d6f6578-1607305353-0-Ac279wWqPk0lbRDIguXSlM-0SHwCDpyRUtCxon24kgmF1UIuAWqjLWfNOR53gVTtmAAK1YpFQ3sqWOEUQyyVZrmMjhxl-mx3sgZQ8tU7V6uhmUXePJny28EBHdxzs1ONfrzFn8RrexvkZLcGDKUZ_ENQeSNAfoFhHdgH14uk_8qrwjDD-sInVjmHaa_jq-CLptdj51n-qWAyi8XLoWclm9wkWoaMyDUXuOa3UeqnR0p-xFyLJWWucyErHmc4csyOLdjRJEM75zbAPKjw6fqD5pivorFdiwV_PgPvJROoqRyv_witDcd3f04_heTyHcuwWfs6skvYiXFfUKhWNnrb5xtCuiwOmAgoxZgPrk7xGaq5TYkafz2y0aCJYJPEefcqKFOsNUJvlhWIAtFOQ4V8P4E
OSSでソースコードも公開されているJavaScript製のシンプルで使いやすいフローチャート作成Webアプリ・「Drawflow」
