webpackでcssとimageをバンドルする - Qiita
webpackはJavascriptとcssやimageを一緒にまとめることができるのが、GruntやGulpといった他のタスクランナーのように設定が煩雑にならない強み、と公式サイトで見た。 実際、それがどれほど便利なのかを試してみた。 以下は、es6+babel+webpackの環境を想定しています。 cssのバンドル css-loaderをインストール。Scssを使いたいのでsass-loaderもインストールします。 // es5 'use strict'; var webpack = require('webpack'); var path = require('path'); var env = process.env.NODE_ENV; var config = { module: { loaders: [ { test: /\.js$/, loaders: ['babel-l
CSSで画像を白黒にして、カーソルをあわせるとゆっくり色がつくようにする。 | RifRif.net
Tweet こんにちは、りくとです。 今回は、CSSで画像を白黒にして、カーソルをあわせるとぼんやりともとの色がつく、というのをやってみようと思います。 ちなみに、これには「filter」というのを使いますがCan I use…で見るとwebkit(GoogleChromeとか)でないといけないようですので、その他のブラウザではうまく動作しませんのでご注意を。あと、IEでも出来るみたいです。執筆現在手元にIEがないので確認はしていません。 それでは早速。 まずは画像の色を白黒に -webkit-filter: grayscale(100%); /* webkit用 */ filter: gray; /* IE用 */ これだけです。これで、画像は白黒になります。ですから、まあすべてのimgに対してなら単純に img { -webkit-filter: grayscale(100%); f
画像置換に -9999px はつかわない
画像置換という言葉を知っているでしょうか？テキストを「text-indent:-9999px」と指定して、画面の外に飛ばしてしまい背景画像をその代わりに表示する技術です。 画像置換の歴史 画像置換は長いこと使われているCSSのテクニックに１つでしょう。では、このテクニック自体はどのようにして、生まれてきたのでしょうか？ 意外にも、このテクニックは元はC.Z.Robertson氏が1999年に考案し、それを「Todd Fahner」氏やTwitterのDouglas Bowman氏がチュートリアルで説明し、一般的に広めたものです。この時点ではテキストを非表示にするために「display:none」を利用しており、音声リーダーでは読み上げされないなどの問題がありました。 その後、このアクセシビリティ上の問題を解決するために「-9999px」というテクニックを生み出したのです。 現在の画像置換
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
