Sassmatic - CSS3を使ってダイナミックに画像へフィルタ適用
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 画像の加工処理をやろうとすると、サーバサイドでもJavaScriptでも面倒といった印象がありますよね。特にユーザに選ばせたり、その場でダイナミックにフィルタを適用するなんてのは相当大変です。 そこで使ってみたいのがSassmaticです。SCSSを使ってCSS3だけでフィルタリングを実現するライブラリです。 Sassmaticの使い方 使い方は簡単で、例えば以下のようにHTMLがあったとします。 <div> <img src="img/example.jpg"/> </div> そしてSCSSは以下のように定義します。 @import "compass"; @import "sassmatic.scss"; div { @extend %filter-sanfran; } img
[CSS]さまざまなスタイルのツールチップが簡単に実装できるSassでつくられた -Simptip
classを変更するだけで、ツールチップを表示する方向、カラーを変更したり、フェードやスライドのアニメーションで表示したりなど、さまざまなスタイルのツールチップを実装できるSassでつくられたスタイルシートを紹介します。 実装にはSassの知識は必要なく、簡単に利用できます。 左から、角丸、半アロー、スライド、フェードの4種類 これらのスタイルはclassを変更するだけで、簡単に使い分けができます。他にもさまざまなスタイルが用意されています。 Simptipの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="simptip-mini.css" /> </head> Step 2: HTML ツールチップのスタイルはclassで、中身はdata
[Compass] 超訳 Configuration Reference
CSSのメタ言語、Sassベースで作られた便利なフレームワーク、それがCompass。 Compassの設定ファイルはRubyファイルです。 これはRubyを知っていれば色々なことが出来るということなんですが、逆にRubyを知らないと取っつきにくさがあると思います。 それで損をしてしまうのはあまりに勿体無いので、オレオレリファレンスを書いてみました！ ※この記事は完全な和訳ではありません。 基本的な書き方 コメント Windowsユーザー向けの注意 設定項目 動作に影響するもの URL関連 Sprite画像の自動生成用 コマンドラインでのオーバーライド コマンドライン経由で渡される設定の検査 Compass 用プラグインの読み込み コンフィグ関数 add_import_path asset_host asset_cache_buster watch コールバック on_sprite_sav
![[Compass] 超訳 Configuration Reference](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://abcyahhh.com/
