filter: drop-shadow()（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 04日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 04 日目 今日は普通に便利な filter: drop-shadow() です。 box-shadow や text-shadow のように影を落とすことができる CSS の機能ですが、画像の場合透過部分を落としてよしなにやってくれるところが魅力です。 filter – CSS: カスケーディングスタイルシート | MDN デモ：https://codepen.io/ginpei/pen/zYdmMVE 基本的な使い方 box-shadow はプロパティでしたが、drop-shadow() は filter プロパティの値として使える <filter-function> です。
画像編集ソフト「Pixlr X」なら初心者でもサクッと編集できる！【レビュー】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ メディアディレクターのかけるです！ 僕は普段LIGブログに掲載するプロモーション記事の制作に携わっています。 メディア編集者のあるあるだと思うのですが、サクっと画像を編集したい！ と思ったことはありませんか？ 僕自身も記事に入れる写真やバナーを選定していく中で、「写真もっとこうだったらなぁ」「画像のこの部分いらないなぁ」とか悩みながらも、わざわざ有料アプリを導入したり、デザイナーに依頼するほどの大きな修正でも無かったり……。 できればサクッと自分で修正できたら……！ なんて思うこともあるのではないでしょうか。 そこで今回は、僕が普段の業務で利用している無料の画像編集ソフトをご紹介します。Web編集に関わるお仕事をされている方、サクッと画像を編集したい方、ぜひ参考にしてみてください。 これで無料！？ 超高機能な「Pixlr X」 今回ご紹介するのは、オンライン上でサクッと画像編
あなたのWeb制作をサポートしてくれるWebツール13選 | BUILD Journal
あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
CSS記述が速くなる、コピペできるチートシート用コードスニペットまとめ
CSSはシンプルな表記でスタイリングが特長ですが、ときには複雑なコードによってどう書いたらよいか、迷ってしまうことがあります。 今回は、CSSでの制作をスピードアップさせる、コピペできるチートシート的コードスニペットをまとめてご紹介します。 リアルタイムによるプレビュー、確認が可能で、生成されたCSSコードをコピーするだけで利用できる、知っておくと差がつく利用機会の多いCSSプロパティが揃います。 CSS記述が速くなる、コピペできるシートシート用コードスニペットまとめ 1. CSSマウスカーソル・プロパティ さまざまなマウスカーソル用プロパティを並べたコードスニペット。各ボックスにマウスホバーすることで、ブラウザーでどのように見えるか確認できます。 See the Pen CSS Cursor Property by Kalimah Apps (@khr2003) on CodePen.
【Googleスプレッドシート】「色」でフィルターをかけたいし並び替えもしたい→できた！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。経営企画室のゆりえです。会社全体のさまざまな数字を管理しています。 これまでのLIGブログでは、エクセルやGoogleスプレッドシートの活用法に関する記事を書きました。 📝ゆりえが書いた記事一覧 Googleスプレッドシート：色で並び替え＆フィルター 少し前なのでご存じの方もいると思いますが、2020年3月から実装されました。前々からあったらいいなと思っていた機能です。簡単な機能のご紹介と、使ってみて思ったことを書かせていただきます。 G Suite アップデートブログ ココから機能を使う セルにフィルタを適用し、フィルタメニューを開くと、「色で並べ替え」と「色でフィルタ」の2つが追加されています！ やったー！ ここから、機能を使うことができます。 ▼まずはフィルタを適用 ▼フィルタメニューを開く 「色で並べ替え」は表示する順番を指定した色によって並び替える機能、「色でフィル
細かい設定も可能な、画像にさまざまなカラーフィルターをかけられるCSSライブラリ・「filters.css」
filters.cssは細かい設定も可能な、画像にさまざまなカラーフィルターをかけられるCSSライブラリです。 昔ご紹介したInstagram.cssなどのように、任意の画像にclassを付与するだけでカラーフィルターをかけられる、というもの。 こちらは細かい設定も可能で、より使いやすく設計されている印象です。 サンプル 動作テストです。フィルターがかかっているのが確認出来ましたでしょうか。 <link href="https://unpkg.com/filters.css" rel="stylesheet">↑ CDNが用意されているので手軽に試せますね。 <img class="hover-blur-2" src="foo.jpg" />↑ 例えば上記ならマウスホバー時にfilter: blur(2px);をかける事が出来ます。 他にもgrayscaleやcontrast、satura
君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
Filterizr - CSS3を使ったデータのフィルタリング、ソートライブラリ MOONGIFT
Web上で情報を並べて表示する機会はとても多いです。そんな時、常に発生するのが並び替えや絞り込みのニーズです。データを消したり、並び替えて表示したりするのは意外と大変です。 そこで使ってみたいのがFilterizrです。データのソート、フィルタリングに特化したライブラリです。 Filterizrの使い方 利用例です。カテゴリごとにデータが絞り込まれて表示されています。 カテゴリを変更するとデータが変わったり、並び順を変更できます。 ツリーデータにも使えます。 Filterizrはアニメーション部分にCSS3を用いているのでスムーズにアニメーションされます。jQueryとの連携もできるので、手軽に使えそうです。情報の絞り込み表示などで役立つことでしょう。 FilterizrはTypeScript製のオープンソース・ソフトウェア（MIT License）です。 Filterizr | Crea
photoEditor - Web上で簡易的な画像編集
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ユーザに画像をアップロードしてもらう機能はよくありますが、そのままでは使いづらいことが良くあります。例えばサイズが大きすぎたり、回転してしまっていたりといった具合です。 そんな時に簡易編集機能を提供できるのがphotoEditorです。 photoEditorの使い方 写真を開いたところ。この状態では、まだサーバに送信していません。 左右反転。 グレースケール変換。 アスキーアート化。 シャープ処理を行ったところ。 photoEditorは簡易的な画像編集機能を備えています。カスタマイズして切り抜けるようにしたりしても良いでしょう。加工が終わったら自由なサイズでCanvasから取り出してサーバに送信すれば良さそうです。 photoEditorはJavaScript製のオープンソース
CSSでここまでできるのか！知っておくと便利なCSSのプロパティや疑似要素のまとめ
CSSの進化は早いですね。 一昔前までは、JavaScriptを使用しなければできなったこと、かなり複雑なコードを書かなければできなかったことが、CSSだけで簡単にできるようになっています。 知っておくと便利なCSSのプロパティや疑似要素をまとめて紹介します。 CSS can do that? by Ananya Neogi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. box-decoration-break 改行する際の表示形式を定義 2. attr() -簡単ツールチップ 3. backface-visibility -フリップするカードも簡単 4. conic-gradient -円グラフを簡単に実装できる 5. filter -画像に多彩なフィルタを適用 6. mix-blend-mode -画像やテキストにも
glfx.js - JavaScriptで画像を加工 MOONGIFT
画像を加工する場合、画像編集ソフトウェアが使われます。そして加工したファイルを保存し、Web上にアップロードするでしょう。しかしこの場合、再度編集する際に備えて元ファイルは保存しておかなければなりません。また、同じ加工を何十枚もの画像に施すのも大変です。 そこで使ってみたいのがglfx.jsです。JavaScriptを使ってWebブラウザ上で画像を加工するソフトウェアです。 glfx.jsの使い方 元画像です。 マウスがあるところに渦巻きが描かれます。 ノイズ。 周囲を暗くします。 ぼかし。ぼかしの位置も変更できます。 マウスの当たっている場所を少し拡大します。 ドット変換。 昔の写真のように粗いドット。 glfx.jsを使うと元の画像は変えないままにフィルタリングをかけられます。画像全体だけでなく、マウスがある場所だけに施すことも可能です。フィルタリングの種類も多様で、様々な加工が施せる
個人でWebアプリを開発する時に便利な高機能JavaScriptライブラリ6選！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webアプリやサービス作りなどで便利に使える高機能なJavaScriptライブラリを厳選してご紹介してみようと思います。 ライブラリ単体でそのままWebアプリとしてリリースできそうなレベルのものから、ちょっとした機能を追加できるものまでピックアップしてみたのでご興味がある方はぜひ参考にしてみてください！ なお、JavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。 オーディオファイルを柔軟に制御できるライブラリ！ 【 howler.js 】 MP3 / WAV / AAC / OGG…など多彩なコーデックに対応しているうえ、オーディオスプライトによる制御も可能なライブラリが「howler.js」です。 音楽プレイヤーはもちろん、オーディオ制作アプリやゲー
reduce()はArrayにて最強……おぼえておけ。（配列とかおれおれAdvent Calendar2018 – 23日目） | Ginpen.com
配列とかおれおれAdvent Calendar2018 – 23日目 配列界最強のメソッドです。（？） 万能選手ですがどうか使わないでください。 使い方はちょっとわかりづらいんだけど、こんな↓感じです。 const arr = [11, 22, 33]; const obj = arr.reduce((acc, value, index) => { acc[`number${index}`] = value; return acc; }, {}); console.log(obj); // { number0: 11, number1: 22, number2: 33 } 与えたコールバック関数の次に第2引数がある点に注目。 インターフェイスと使い方 Array.prototype.reduce() | MDN result = arr.reduce(callback[, initialV
Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
JavaScriptのArrayを知る。大きな目標への小さな一歩 〜Array.prototype.filter編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
本日はArray.prototype.filter()メソッドについて見ていきます。名前からも想像はつきやすいかと思います。要は「フィルタリングするんでしょ？」ってことですよね。本当にそうなのか、その目で確かめてください。 ※ここからの説明は個人的に調べて解釈したざっくりとした説明になります。詳しく知りたい方はこちらへどうぞ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter Array.prototype.filter()メソッドとは フィルタリングして新しい配列を作成するメソッドです。 引数にはコールバック関数を渡します。 コールバック関数は配列の各要素に対して実行され、trueを返した要素のみが新しい配列に残る、ということになります。コールバック関数の第１
lessコマンドで特定の文字列をフィルタリングする方法
lessコマンドで特定の文字列をフィルタリングする方法を紹介します。 １．問題点 あるシステムで出力されるログを、"less +F"で動的に出力しているのですが、閲覧不要なログが大量に出力され、本当に見たい内容のログが見れません。 下記のようにすると、ログが動的に出力されなくなります。 % grep -v 除外文字列 | less +F ということで、lessコマンドで特定の文字列をフィルタリングする方法を紹介します。 ２．lessコマンドで特定の文字列をフィルタリングする lessコマンドで特定の文字列をフィルタリングするには、まずlessコマンドでログを表示します。 このとき、"+F"オプションは付与せずに表示させてください。 次に"&"を押下。これで下記のように"&/"が表示されます。 さらに"!"を押下すると"Non-match &/"という表示になります。 除外したい文字を設定。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像を扱うプロジェクトに役立つ！CSSフィルタのさまざまなエフェクトをコピペで利用できる無料ツール -FilterSS
CSS Filters Generator - Modify images with CSS/SVG only - JustCode.today
任意の画像にCSSとSVGによるフィルターをプレビューを見ながら作成できる・「CSS Filters Generator」
SVGのフィルターを、結果を見ながら学べる・「SVG Filters」
