Skip to content

zachleat/iliveinomaha-banner

gh-pages
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

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)

About

Retina friendly progressively enhanced banner for iliveinomaha.com

Resources

License

Stars

Watchers

Forks

Packages

No packages published