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プロパティで太いボーダーを設定し、三角形の部分だけ残して使用していました。
JSでクリエイティブコーディング - テキストを分解しパーティクルにする演出 - ICS MEDIA
パーティクルとは粒子のこと。パーティクルを表現に取り入れると、印象的な演出に役立ちます。JavaScriptやWebGLを使うことで、ウェブの技術でもパーティクル表現の制作が可能です。本記事では題材にパーティクル表現の制作に役立つアイデアや着眼点を紹介します。 作例の紹介 本記事のチュートリアルの完成形はこちらになります。 別タブで再生する ソースコードを確認する この記事で学べること 2Dテキストを粒子化して動かす表現 パーリンノイズによる空気感の再現 GSAPによる大量のトゥイーン制御 WebGLの高速化（PixiJSの応用） 制作の技術 本作例を制作するにあたり、利用しているウェブの技術の概要を紹介します。 WebGL 画面表示はWebGLを利用します。ウェブのレンダリング技術において、もっとも高速な描画性能を得られるのがWebGLであるためです。WebGLは3D表現のための技術と思
手書き風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
CSSで三角形のいろいろな実装例
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 三角形や矢印をWebブラウザーで表示するためには、PNGなどのラスター画像、SVG、CSSを使う方法があります。 場面に応じた実装方法を選ぶことで、該当箇所に変更があった場合に対応しやすくなります。 この記事では、実装方法によってどのような違いが出るのか、3つのパターンで解説します。 コンテンツの区切りで斜めになっている背景手順や流れでよくある矢印before/afterでの矢印 セクショニング
box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴 - ICS MEDIA
box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴 ウェブページのデザインやコーディングをしている人なら、誰でも一度は影をつけたことがあるでしょう。一方でその影にどれほどの表現や技術のバリエーションがあるか、意識したことのある人は少ないかもしれません。 影を付ける方法としてはCSSのbox-shadowが一般ですが、そのほかにもいくつもの技術・手法が存在します。ウェブの世界に限らず、年々変化するデザイントレンドにおいても影の扱いは重要なテーマです。 たとえば少し前に流行したロングシャドウや今年のトレンドとも言われるNeumorphism（ニューモーフィズム）など、ユニークな表現には影のテクニックを活用できるものがたくさんあります。 ▼ CSSで作成したロングシャドウ（画像上部）とニューモーフィズム（画像下部）の例： デモを別ウインドウで表示 デモのソース
CSS製のユニークな背景パターン集
Result ちょうど100のパターンがあります。イラストのようなパターンもありますが全てCSS製となっています この手のものは最近ではSVGが主流となっていますので需要は高くはなさそうですがCSSの応用として学習用に良い気がします css:root { --ambrosia: #FCDBBA; --apricot: #FF8652; --aubergine: #6A2352; --auburn: #A12F2F; --asparagus: #A0C259; --beetroot: #7F0421; --blue-tack: #82BFE0; --bloom: #363A57; --blush: #D67B71; --bronze: #C27940; --trans: transparent; --trans05: rgba(255,255,255,0.05); --trans1: rgb
ミニ折れ線グラフ
Result jQueryを使ったミニ折れ線グラフです。コードは長いのでCodepenでご参照ください セッティングは以下のようにすればいいだけ $(".micro-graph").graphiq({ data: coffees, fluidParent: ".little-container", height: 36.01, xLineCount: 0, lineWeight: 1.5, dotRadius: 4, yLines: false, xLines: true, dots: false, fillOpacity: 0.5, fill: false, colorUnits: "#c3ecf7" });楽でいいですね html<div class="micro-graph"></div>先ほどのセッティングで指定したclassを持った空要素を用意すればOK viaMicrograp
手書き風のチャートを実装できる非依存のJavaScriptライブラリ・「roughViz.js」
roughViz.jsは手書き風のチャートを作成できる非依存のJSライブラリです 他ライブラリを必要とせず単体で動作してくれます。チャートの種類も棒チャートやドーナツ、散布図、円チャート、折れ線などよく使われるものに対応されており、今後も増える予定があるそうです 実装方法も手軽で簡単、CSVにも対応しています 動作テスト 動作サンプルです。開発者さんが用意していたものをお借りしました。簡単に使えるので手書きじゃなくても便利そう <script src="https://unpkg.com/rough-viz@1.0.4"></script>↑ スクリプトを読み込みます。CDNあるのでまずはこれを使って試すとよさそうですね new roughViz.BarH( { element: '#vis0', title: "SNS foo bar", titleFontSize: '1.5rem',
preタグに書いたデータをダイアグラムとしてビジュアル化するスクリプト・「Pinker.js」
Pinker.jsはpreタグに書いたデータをcanvasにダイアグラムとして描いてくれるスクリプトです。 特定のルールに沿った書き方をpreタグにする事で簡易的なダイアグラムを生成できる、というもの。割と複雑なものも書けるみたいです。 以下動作サンプルです。 動作サンプル 左のpreタグのテキストを元に右のcanvasタグにダイアグラムが生成されています。 使い方Pinker.jsを読み込みます <script src='Pinker.js'></script>preにルールに沿った記法で書き、idを振ります。Layout:で位置を決め、Relate:で関係性を設定します。 <pre id="Source01">Layout: [A] [B][D][E] [C]...[F] Relate: [B]->[A],[C] [D]->[B],[E],[F] </pre>canvasを
レーダーチャートを作れる非依存のシンプルなスクリプト・「maturity-radar」
maturity-radarはレーダーチャートを作成できるスクリプトです。非依存型で単体で動作します。 RPG等でもおなじみのレーダーチャートを手軽に作成する事が出来ます。諸事情により必要に迫られて方法を考えていたところ、こちらが見つかったので備忘録。2年前から更新はされていないようですが・・ 使用例空要素を作ります <div id="foo"></div>スクリプトを読み込みます <script src="https://rawcdn.githack.com/kolektiv/maturity-radar/master/dist/radar.js"></script>あとはセッティングするだけ <script> radar.show('#foo', { size: 300, curve: false, metrics: [ { name: "HP", range: [ "50", "10
d3.js v5をベースにしたチャートライブラリ・「Britecharts」
Britechartsはd3.jsのv5をベースにしたチャートライブラリです。チャートとコンポーネントを簡単に直感的に組み合わせる事が出来るのだそうです。リユースブルであり、シンプルなAPIを特徴としているのだそう。割と手軽な印象で学習コストは低くなりそうです。 動作サンプルがありましたのでお借りしました。 動作サンプル マウスホバーするとグラフと下部のデータが連動して動く、みたいなよくあるやつです。 正直、上のような簡単なチャートだけならもっと他にも軽量で簡単に使えるライブラリもありますのでBritechartsを使う必要性はないんですが、それなりのデータ量を扱うコンテンツでしたらあとで困らないように様々なケースに対応できるライブラリを選択しておいた方がよさげですね。 ざっくり手順<script src="https://cdnjs.cloudflare.com/ajax/libs/d3
Kanon - プログラミングコードを可視化
プログラミングは構造的です。そのため、構文解析して別な言語にしたり、ツリー構造に展開したりできます。それらの構造を見ることで、綺麗な設計になっているかどうかも分かりそうです。 そんな可能性を感じさせるのがKanonです。JavaScriptのコードを解析、ビジュアル化します。 Kanonの使い方 左側にコード、右上にクラスの構造、右下にメインスクリプトの実行が可視化されています。 処理を増やしたところ。 コードが複雑になると、可視化された構造も複雑化します。 Kanonを使うことでプログラミングコードを別な視点から見られるようになります。コードは自動的に更新されるので、自分のコードを貼り付けてみて、どんな構造になっているのか見てみるのも面白そうです。 KanonはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 prg-titech/Kanon: A l
ソースコードを分析し、コードの構造や階層・依存関係を可視化する便利な無料ツール -Code Crumbs
フローチャート ※依存関係・フローチャートはJavaScriptのみです。 対応言語は、下記の通り。 JavaScript TypeScript Python PHP Java C++ 望む言語が他にあればIssueにどうぞ、とのことです。 Code Crumbsのデモ デモでは、JavaScriptのコードでその動作を確認できます。 デモページ 依存関係はDependenciesをオンに、フローチャートはFlowChartタブをクリックします。 Code Crumbsの使い方 セットアップ codecrumbをインストールします（yarn global add codecrumbs）。 codecrumbs -d project-src-dir -e project-src-dir/index.jsを実行し、プロジェクトに合わせてパラメータを変更します。-dはソースコードを含むディレクト
15+ CSS Flowcharts
Welcome to our collection of hand-picked free HTML and CSS flowchart code examples. These examples have been carefully selected from a variety of sources including CodePen, GitHub, and other resources. This collection has been updated as of July 2023 with 3 new items. CSS flowcharts are a visual representation of a process or algorithm, designed using HTML and CSS. They are used to illustrate step
CSSスニペット：CSSで横向きのフローチャート | かちびと.net
Result 横向きのフローチャートです。家系図とかにも使えそう コードは固定的で現在の環境下ではやや汎用性に欠けるかもしれません css.branch { position: relative; margin-left: 250px; } .branch:before { content: ""; width: 50px; border-top: 2px solid #eee9dc; position: absolute; left: -100px; top: 50%; margin-top: 1px; } .entry { position: relative; min-height: 60px; } .entry:before { content: ""; height: 100%; border-left: 2px solid #eee9dc; position: absolute
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape
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」
CSSと1つのdiv要素で出来る表現いろいろ