CSS3 News Ticker | CSS3 Notification Like Stackexchange

In today's tutorial I am going to share a simple way to make News Ticker and Notification Bar using CSS3, NO JAVASCRIPT.


Previously it was very difficult to code it in javascript and make it work with other plugins, but today I decided to make it possible in CSS3 and voila, I succeeded

So lets start with basic html code:

[html]
<div id="bar">
<input type="checkbox" id="close" />
<label for="close" id="header"><span>Click Here!</span></label>

<div id="fluid-bar">
<div id="wrap">
<div id="news_ticker">
<p style="float: left; color: rgb(255, 255, 255); margin: 5px 0pt 0pt 10px;">Latest news</p>
<ul>
<li><a href="#">Samsung Galaxy S2</a></li>
<li><a href="#">LG Optimus Black</a></li>
<li><a href="#">Samsung Note</a></li>
<li><a href="#">Sony Xperia S</a></li>
</ul>
<p style="float: left; color: #000000; margin: 5px 0pt 0pt 10px;">|</p>
<p style="float: left; color: rgb(255, 255, 255); margin: 5px 0pt 0pt 10px;">Notification message</p>
</div>
</div>
</div>
</div>
[/html]

 
News ticker logic is simple, we make the UL tag height fixed and will change the position of LI to move top all the time.

Notification bar logic is tricky, here we will be using checkbox, if checked then toggle the bar.

CSS for Notification Bar:

 
[css]
#fluid-bar {
background-color: #F26D5E;
height: 35px;

-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
overflow: hidden;
}

#close {
position: absolute;
right: 5px;
display: none;
}

#close:checked ~ #header:after {
content: "X";
color: #F26D5E;
}

#close:checked ~ #fluid-bar {
height: 0px;
}
[/css]

And the css for notification bar:

 
[css]
@-moz-keyframes ticker {
0% {
top: 0;
}
25% {
top: -20px;
}
50% {
top: -40px;
}
75% {
top: -60px;
}
100% {
top: 0;
}

}

ul {
background: none repeat scroll 0 0 #FFFFFF;

-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
height: 20px;
margin: 5px;
float: left;
overflow: hidden;
width: 150px;
}

li {
list-style: none;
}

li a {
color: #35A2D4;
font-family: tahoma;

-webkit-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-moz-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-ms-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
position: relative;
}
[/css]

You can check the demo and download the files. Share it if you found it helpful.

HTML5 & CSS3 Toggle slideup and slidedown | NO JAVASCRIPT

While reading more about HTML5 & CSS3 I just found an amazing css3 button styling. This time I wanted to do something which I was doing from past 2 years using JQuery. In this tutorial I am going to teach you how to make a toggle slideDown and slideUp function using CSS3 and HTML5.



To achieve this we will have to know the pseudo element :Target.

Target element takes the href value and finds the element with its ID(value).

In this tutorial I am going to take the CSS3 styling from Tympanus and add my CSS3 function of toggle.

So here is the HTML structure

[html]
<div class="container">
<section>
<div id="container_buttons">
<h1>
HTML5 & CSS3 Toggle slideup and slidedown using NO JAVASCRIPT.
</h1>

<div style="clear:both"></div>
<ul>
<li class="toggle">
<a href="#One">A clock made in CSS3 | NO Javascript</a>
<p id="One">
Lets start learning CSS3 before its too late, I just saw a website which amazed me with its animation effects. First I thought that the site is using some JQuery libraries but when I actually went into the code, I found it is CSS3. So I started learning it, and today I made my first <a href="http://webstutorial.com/css3-clock/css3">Read more...</a>
</p>
</li>
<li class="toggle">
<a href="#Two">Learn CakePHP From Novice to Professional : Part 2</a>
<p id="Two">
Model-View-Controller Cake enforces an MVC structure for your web applications. Basically, it effectively separates typical operations into specific areas: MODELS : for all your database interaction VIEWS : for all your output and displays CONTROLLERS : for all your commands/scripts for input and program flow The typical PHP application mixes each of these three functions <a href="http://webstutorial.com/learn-cakephp-novice-professional-part-2/framework">Read more...</a>
</p>
</li>
<li class="toggle">
<a href="#Three">Learn CakePHP From Novice to Professional : Part 1</a>
<p id="Three">
This guide is for beginners to CakePHP. Whether or not you have much experience with the PHP scripting language, working in Cake will require some new methods you may or may not have tried before. If you don't know what a "has-and-belongs-to-many" relationship is, don't know how to build your own class object, or don't <a href="http://webstutorial.com/learn-cakephp-novice-professional-part-1/framework">Read more...</a>
</p>
</li>

<li class="toggle">
<a href="#Four">Google Maps Server Side Geocoding Using PHP and Infobox Fully AJAX</a>
<p id="Four">
Recently I got a new project of real estate where I had to display about 1000 of projects on the google map. I was having the address of 1000 projects, so I started with my php and js code. When I coded and started testing, I found that on the map only 20-30 markers were <a href="http://webstutorial.com/google-server-side-geocoding-php-infobox/website-tweaks/google">Read more...</a>
</p>
</li>

<li class="toggle">
<a href="#Five">Learn Codeigniter | Codeigniter Tutorial | Codeigniter Lessons | Part 1 | Webs Tutorial</a>
<p id="Five">
What is CodeIgniter? CodeIgniter is an open source PHP framework. This framework is used to build web applications and websites. CodeIgniter is best for developers who are into front-end development. It's easy to learn and it's fully flexibe. To learn CI (CodeIgniter), you should know PHP, MYSQL, OOPs and MVC. If you are new to <a href="http://webstutorial.com/codeigniter-tutorials-codeigniter-lessons-part-1/programming/php">Read more...</a>
</p>
</li>
</ul>

<em style="float: right;margin:10px 0;">Credits: <a href="webstutorial.com">WebsTutorial</a> & <a href="http://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/" rel="nofollow" target="_blank">Tympanus</a></em>

</div>
</section>
</div>
[/html]

Here we are making a simple unordered list structure, each list consits an anchor tag and a paragraph tag. Anchor will have a href pointing to ID of a paragraph tag.

And the final CSS to toggle the paragraph tag is

[css]
li p {
display: none;
padding: 10px 20px;
}

li p:target{
display:block;
}
[/css]

A clock made in CSS3 | NO Javascript

Lets start learning CSS3 before its too late, I just saw a website which amazed me with its animation effects. First I thought that the site is using some JQuery libraries but when I actually went into the code, I found it is CSS3. So I started learning it, and today I made my first CSS3 clock. This clock has 3 hands: seconds, minutes and an hour. All hands by default start moving from 12.



In this tutorial we going to use some of the CSS3 major elements.

• Animation


• Transform


• Keyframes

All three elements need to be cross browser coded.

• For firefox -moz-


• For Chrome -webkit-

So here is the css code for seconds hand.

[css]
.seconds{
width:200px;
height:200px;
border-left:2px solid #2187e7;
display:block;
-moz-animation:rotate 60s infinite linear;
-webkit-animation:rotate 60s infinite linear;
border-radius:50%;
}
[/css]

The animation takes following properties:

animation:name duration timing-function delay iteration-count direction;

Here we are going to use name, duration, direction and iteration-count elements.

Our name is rotate, 60 seconds for one animation, direction will be linear and infinite loop animation.

Following is the keyframe code,

[css]
@-moz-keyframes rotate
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(360deg);}
}
[/css]

We set points in this keyframe, the start point and the end point. In from point we will use transform element to rotate it from 0 degree and in to we set it till 360 degree. So in every animation it will rotate from 0 degree to 360 degree.

Similarly we code for the minute and the hour hand.

Entire Code:

[html]
<style>
body{background:#000000;}
#wrapper {
left: 40%;
padding: 10px;
position: absolute;
top: 20%;
width: 300px;
}
.seconds{
width:200px;
height:200px;
border-left:2px solid #2187e7;
display:block;
-moz-animation:rotate 60s infinite linear;
-webkit-animation:rotate 60s infinite linear;
border-radius:50%;
}

.minutes{
-moz-animation:rotate 3600s infinite linear;
-webkit-animation:rotate 3600s infinite linear;
width:100px;
height:100px;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
display:block;
border-radius:50%;
position: absolute;
left: 61px;
top: 60px;
box-shadow: 0 0 35px #fff;
}

.hour{
-moz-animation:rotate 43200s infinite linear;
-webkit-animation:rotate 43200s infinite linear;
width:50px;
height:50px;
border-left:2px solid #fff;
border-right:2px solid #fff;
display:block;
border-radius:50%;
position: absolute;
left: 85px;
top: 87px;
box-shadow: 0 0 35px #fff;
}

@-moz-keyframes rotate
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(360deg);}
}

@-webkit-keyframes rotate
{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}

.seconds span{
border-left: 1px solid #FFFFFF;
display: block;
height: 100px;
left: 100px;
position: relative;
top: 0;
width: 100px;
}

.minutes span{
border-left: 1px solid #FFFFFF;
display: block;
height: 50px;
left: 50px;
position: relative;
top: 0;
width: 50px;
}

.hour span{
border-left: 1px solid #FFFFFF;
display: block;
height: 25px;
left: 25px;
position: relative;
top: 0;
width: 25px;
}

</style>
<div id="wrapper">
<div class="seconds">
<span></span>
</div>
<div class="minutes">
<span></span>
</div>
<div class="hour">
<span></span>
</div>
</div>
[/html]