Retina friendly progressively enhanced banner for iliveinomaha.com
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE
README.md
bower.json
example.html
iliveinomaha.css
package.json

README.md

iliveinomaha-banner

Retina friendly progressively enhanced banner for iliveinomaha.com

The banner listed on iliveinomaha.com is a blurry image on HDPi/retina screens. We can do better!

Idea and original source code from @mattdsteele introduced in his blog post A Fresh Coat of Paint.

Demo

Install

NPM

npm install iliveinomaha --save

Or Bower

bower install iliveinomaha

Or manually download the CSS file above.

Features

  • Starts in markup with a normal text link.
  • When CSS transforms are supported, positions as a banner in the top left or right corner.
  • Does not require JavaScript.

Markup

Make sure to include the iliveinomaha.css stylesheet.

Top Right Corner

<div class="iliveinomaha">
    <a href="http://www.iliveinomaha.com">I live in Omaha.</a>
</div>

Top Left Corner

<div class="iliveinomaha left">
    <a href="http://www.iliveinomaha.com">I live in Omaha.</a>
</div>

Browser Support

A-Grade Experience

A blue banner positioned in the top corner. Includes any browser that supports media queries.

  • Internet Explorer 9 and above
  • Chrome (31)
  • Safari (7)
  • Firefox (25)
  • Opera (12)
  • iOS (6)

C-Grade Experience

A blue link inline on the page.

  • Internet Explorer 8 or below
  • Opera (9.1)