Five Fantastic
HTML5 Snippets
Here’s a shortlist of five cool effects that you can
incorporate into your website and make it even livelier. No images and
JavaScript are necessary, as all of them are accomplished using only a
combination of HTML5 and CSS3.
1.
CSS3 Loading Animation
A very basic loading animation.
CSS code:
|
<style type='text/css'>
@-webkit-keyframes rotate {
from {
-webkit-transform:
rotate(0deg);
}
to {
-webkit-transform:
rotate(360deg);
}
}
#loading {
border: 1px solid #000;
border-right: 0;
border-bottom: 0;
-webkit-border-radius:
100px;
height: 100px;
width: 100px;
margin: 100px;
-webkit-transition: all
0.5s ease-in;
-webkit-animation-name:
rotate;
-webkit-animation-duration:
1.0s;
-webkit-animation-iteration-count:
infinite;
-webkit-animation-timing-function: linear;
}
</style>
|
HTML code:
|
<body>
<div id="loading"></div>
</body>
|
2.
Twitter-inspired Glowing Input Box
The input box glows when you click on it. However, it only works
on the latest browser versions (Firefox 4+, IE9, etc.).
CSS code:
|
<style>
input{
font-size:18px;
font-family: helvetica;
}
input {
outline:none;
transition: all 0.25s
ease-in-out;
-webkit-transition: all
0.25s ease-in-out;
-moz-transition: all 0.25s
ease-in-out;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border:1px solid
rgba(0,0,0, 0.2);
color:gray;
background-color:#eee;
padding: 3px;
}
input:focus {
box-shadow: 0 0 15px green;
-webkit-box-shadow: 0 0
15px green;
-moz-box-shadow: 0 0 15px
green;
border:1px solid green;
background-color:white;
}
body{
background-color: #FFF;
color:gray;
font-family:Arial;
}
</style>
|
HTML code:
|
<div class="input-glow">
Username <input
type="text" class="input-glow" name="username"
placeholder="username">
</div>
|
3.
Blur/Unblur Text Effect On Hover
This uses CSS3 transitions and text shadow with transparent
color that creates a blurred text effect.
CSS code:
|
<style>
.hover_blur{
font-size:35px;
font-family: helvetica;
transition: all 0.25s
ease-in-out;
-moz-transition: all 0.25s
ease-in-out;
-webkit-transition: all
0.25s ease-in-out;
color:black;
}
.hover_blur:hover{
color:transparent;
text-shadow: black 0 0
100px;
}
.hover_unblur{
font-size:35px;
font-family: helvetica;
transition: all 0.25s
ease-in-out;
-moz-transition: all 0.25s
ease-in-out;
-webkit-transition: all
0.25s ease-in-out;
text-shadow: black 0 0
30px;
color:transparent;
}
.hover_unblur:hover{
color:black;
text-shadow: black 0 0 0px;
}
body{
background-color: #FFF;
color:gray;
font-family:Arial;
}
</style>
|
HTML code:
|
<h1 class="hover_blur">Hover To Blur</h1>
<h1 class="hover_unblur">Hover To Unblur</h1>
|
4.
Fluid Horizontal Navigation (CSS3
Flexbox)
This is a simple yet fluid horizontal navigation menu that
uses the CSS3 Flexible Box model.
CSS code:
|
<style type="text/css">
.container{
display:block;
float:left;
min-width:500px;
resize:both;
overflow:auto;
height:300px;
border:1px solid black;
background:rgba(0,0,0,.1);
}
nav{
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
box-orient:horizontal;
border:2px solid #333;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;
width: 95%;
margin:20px auto;
background:white;
}
nav a{
display:block;
color:#333;
padding:10px;
-webkit-box-flex:1;
-moz-box-flex:1;
box-flex:1;
text-align:center;
text-decoration:none;
-webkit-transition:all .4s
linear;
-moz-transition:all .4s linear;
-o-transition:all .4s linear;
transition:all .4s linear;
}
a:hover {
background-color:
rgba(0,0,0,.2);
}
a:active {
background-color: #333;
-webkit-box-shadow: inset 0
2px 8px hsla( 0, 0%, 0%, 0.6 );
-moz-box-shadow: inset 0
2px 8px hsla( 0, 0%, 0%, 0.6 );
-o-box-shadow: inset 0
2px 8px hsla( 0, 0%, 0%, 0.6 );
box-shadow: inset 0
2px 8px hsla( 0, 0%, 0%, 0.6 );
color:white;
}
p{
margin:20px;
}
</style>
|
HTML code:
|
<div class="container">
<nav>
<a
href="#">Home</a>
<a
href="#">About</a>
<a
href="#">Contact</a>
<a
href="#">Rock & Roll</a>
<a
href="#">Waffles</a>
</nav>
<p>Resize the Window</p>
</div>
|
5.
Animated Button
An animated button originally created by Dan Cederholm. The
animation of the button from unpressed to pressed state is so smooth, it’s way
better than your typical image swap effect!
CSS code:
|
<style type="text/css">
body {
padding: 2em 5em;
font-family:
"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 250%;
background: #eee;
}
a:link, a:visited {
text-decoration: none;
color: #fff;
border: none;
}
a img {
border: none;
}
div.mod {
margin: 0 0 30px 0;
padding: 80px;
text-align: center;
background: #fff;
-webkit-border-radius:
10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 3px
rgba(0, 0, 0, .1);
-moz-box-shadow: 0 0 3px
rgba(0, 0, 0, .1);
box-shadow: 0 0 3px rgba(0,
0, 0, .1);
}
p.notes {
margin: 0 0 10px 0;
font-size: 13px;
line-height: 1.4;
color: #999;
text-align: center;
}
p.notes a {
font-weight: bold;
color: #777;
border-bottom: 1px solid
#ccc;
-webkit-transition: color .2s
ease;
-moz-transition: color .2s
ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
p.notes a:hover {
color: #555;
}
p.notes span {
margin: 0 4px;
color: #ccc;
}
#stamp {
display: block;
margin: 20px 0;
border: none;
-webkit-transition: opacity
.2s ease;
-moz-transition: opacity .2s
ease;
-o-transition: opacity .2s
ease;
transition: opacity .2s ease;
}
#stamp:hover {
opacity: .7;
}
/* button styles */
.btn {
display: inline-block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow:
0 8px 0 #1a74a1, 0 15px 20px rgba(0, 0, 0, .35);
-moz-box-shadow:
0 8px 0 #1a74a1, 0 15px 20px rgba(0, 0, 0, .35);
box-shadow:
0 8px 0 #1a74a1, 0 15px 20px rgba(0, 0, 0, .35);
-webkit-transition:
-webkit-box-shadow .2s ease-in-out;
-moz-transition:
-moz-box-shadow .2s ease-in-out;
-o-transition: -o-box-shadow
.2s ease-in-out;
transition: box-shadow .2s
ease-in-out;
}
.btn span {
display: inline-block;
padding: 10px 20px;
font-family:
"cooper-black-std-1", "cooper-black-std-2", Helvetica,
Arial, sans-serif;
line-height: 1;
text-shadow: 0 -1px 1px
rgba(19, 65, 88, .8);
background: #3194c6;
background:
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#3194c6), to(#5bacd6));
background:
-moz-linear-gradient(#3194c6, #5bacd6);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: inset 0
-1px 1px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0
-1px 1px rgba(255, 255, 255, .15);
box-shadow: inset 0 -1px
1px rgba(255, 255, 255, .15);
-webkit-transition:
-webkit-transform .2s ease-in-out;
-moz-transition:
-moz-transform .2s ease-in-out;
-o-transition: -o-transform
.2s ease-in-out;
transition: transform .2s
ease-in-out;
}
.btn:active {
-webkit-box-shadow:
0 8px 0 #1a74a1, 0 12px 10px rgba(0, 0, 0, .3);
-moz-box-shadow:
0 8px 0 #1a74a1, 0 12px 10px rgba(0, 0, 0, .3);
box-shadow:
0 8px 0 #1a74a1, 0 12px 10px rgba(0, 0, 0, .3);
-webkit-transition: -webkit-transform 0s
ease-in-out;
-moz-transition:
-moz-transform 0s ease-in-out;
-o-transition: -o-transform
0s ease-in-out;
transition: transform 0s
ease-in-out;
}
.btn:active span {
-webkit-transform:
translate(0, 4px);
-moz-transform:
translate(0, 4px);
-o-transform: translate(0,
4px);
transform: translate(0,
4px);
-webkit-transition:
-webkit-transform 0s ease-in-out;
-moz-transition:
-moz-transform 0s ease-in-out;
-o-transition: -o-transform
0s ease-in-out;
transition: transform 0s
ease-in-out;
}
</style>
|
HTML code:
|
<div class="mod">
<a href="#"
class="btn"><span>Press this!</span></a>
</div>
|
For more of the awesome CSS tutorials you can check out this cool great CSS Tutorial site for the masses
No comments:
Post a Comment