Pure CSS3 Sliding Title

Share
Tweet about this on TwitterShare on Facebook0Share on Google+0Share on Reddit0Share on StumbleUpon0Share on LinkedIn0Email this to someoneShare on Tumblr0Digg this

What it Does

This professional sliding title uses only CSS3 and HTML. CSS3 animation moves the title from left to right, while CSS3 -linear-gradient properties create a partially transparent css3color gradient. The slider floats over other contents (paragraphs, headers, divs, etc.) if they have a z-index of less than 1000.

How to install It

First, insert a link to the sliding title’s stylesheet in the <head> element:

<link rel="stylesheet" type="text/css" href="sliding-title.css" />

Next, insert the HTML for the sliding title toward the top of the <body> element, and put content after:

<body>
<div class="slider-container">
    <h1>Welcome</h1>
</div>

<div class="background-or-content">
  <p>These lines of text show how the sliding title floats over</p>
  <p>any content or background in other divs, so long as</p>
  <p>the content has a z-index less than 1000.</p>
  <p>Feel free to play with the CSS to change how far into the page</p>
  <p>the slider extends, as well as its height, font-size, width, delay, and speed</p>
  <p style="margin-top:100px">To create a new color gradient visit: <a href="http://www.colorzilla.com/gradient-editor/" target="blank">http://www.colorzilla.com/gradient-editor/</a></p>
</div>
</body>

Browser Compatibility

Current Compatibility: 74%

The slider is compatible with all browsers that support either A) the CSS3 animation property and @keyframes rule, or B) the former with vendor prefixes (e.g., “-webkit-animation” and “@-webkit-keyframes”). Here is a partial list:

Firefox Chrome IE Safari Opera
5+ 4+ 10+ 4+ 12+
iOS Safari Android Blackberry
3.2+ 4+ 10+

Happy Coding, and feel free to share this post!

Share
Tweet about this on TwitterShare on Facebook0Share on Google+0Share on Reddit0Share on StumbleUpon0Share on LinkedIn0Email this to someoneShare on Tumblr0Digg this
This entry was posted in CSS3, Sean's Posts, Web Design and tagged , , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.
  • Currently Reading:

  •   
  •