In this article we will learn more about CSS3 and some HTML5 related stuffs. By the end of the article you should be able to learn and understand the concepts and make use it in your day to day activities.
This article is created with an effort in bringing interactive experience to the reader. Please feel free to run the demo for better experience. In order for you to feel a real time experience with the concepts explained in this article, Try it out option is provided (All code samples are developed using codepen.io editor) demonstrating the samples in a way you will interact with the sample code and learn. Feel free to open up, edit and see how the code works.
Let us focus on the below mentioned topics.
If you are a beginner, it's highly recommended to read through the following articles to understand more about the HTML and CSS.
Prior to HTML5 video tags, if you wish to embed a video in an HTML document, most people used Adobe Flash to show a video regardless of browsers and operating system. But it required a flash plug-in which is a dependency. Other handful third party plug-ins include RealPlayer, Quicktime. With HTML5, an open standard was created to support for audio and video tag and can be easily included. More than that the new standard removed the proprietary third party dependency.
HTML5 supports new tags for including audio and video tags in HTML document. It can be done easily like we include images in a document. A new <video> tag was introduced to show up videos in a HTML document.
If the HTML5 video tag is supported by the browser, it will show up the media player and you can play, pause a video. Say if your browser does not support HTML5, you will see a label indicating “Your browser does not support video element”.
We need a fallback mechanism to play a video if the browser does not support video elements. We can have the default fallback mechanism as Flash. Here's the code snippet shows the usage of video element with a fallback.
Also there are cases where the browser supports video element but it may not support the video format. In such cases, it's always good to add multiple formats of same video so either one of the supporting formats can be used as a fall back mechanism in case the browser does not support one of them.
Below is an example which demonstrates the fallback mechanism which also includes Flash an an option.
Now let us see the video element properties.
Now coming to the use of codecs in browsers, There are lots of video format but the most common ones are H.264 (MPEG 4 Advanced Video Coding(ACV)), Ogg Theora and VP8. Support for the codecs wasn't that simple because the browsers vendors could not agree upon a specific codec.
H.264 is the most popular one but it's patented however it's free for non commercial use. When it comes to commercial, currently it's supported by IE 9, Safari 3.1, and Chrome. The Ogg Theora comes with a royalty fee and is supported by Firefox 3.5, Chrome 4, Opera 10.5. The VP8 or WebM was acquired by Google released as opensource and is being supported by Firefox 4.0, Chrome 6.0, Opera 10.6.
In the below example you can see a video tag with multiple sources (Most popular codec formats)
Here's a live example of a HTML5 video. You can notice the controls to play, pause etc are shown by default that's because of the usage of “controls” in video tag.
You can just navigate to the track source (src) to see format of the track file. Here's how it looks like. Isn't it meaningful and readable? The track file has cue which is nothing but a time interval; the start and end time which is separated by an arrow mark.
Note – The text within the cues can span through multiple lines and can also have include HTML.
HTML5 Audio Tag
Now it's learn about HTML5 audio tag. We use <audio> element in HTML5 to represent a sound content in HTML document. All we need to do is set the source with the URL of the audio.
The HTML5 audio has a similar properties as that of a video tag.
Quote: The HTML5 Audio properties are based on
[3]
- controls – Shows up the audio controls that can be used to play/stop/pause the audio.
- autoplay – The autoplay property lets the audio to be played automatically when the page gets loaded.
- loop – When used repeats the music.
- src – The source (URL) of the audio file.
- preload – The preload can be set with one of the below values.
- ?none - which means do not buffer the audio file automatically.
- auto - buffers the audio file before it gets played.
- metadata – buffers only the audio metadata.
Currently the recent browsers which are based on WebKit such as Chrome, Safari supports *.mp3 files. The audio format *.ogg is an open standard and is supported by most of the browsers except Microsoft IE.
Here's an example demonstrates the usage of audio tag
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>HTML5 audio</title>
</head>
<body>
<audio controls="controls">
<source src="example.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</body>
</html>
Here's a real world example of the usage of audio tag. You can notice here we are using flash *.swf as a default fall back mechanism.
<audio id="AudioWithControls" controls="">
<source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3" type="audio/mpeg">
<source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg" type="audio/ogg">
<object class="playerpreview" type="application/x-shockwave-flash" data="http://www.html5rocks.com/en/tutorials/audio/quick/player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="http://www.html5rocks.com/en/tutorials/audio/quick/player_mp3_mini.swf">
<param name="bgcolor" value="#085c68">
<param name="FlashVars" value="mp3=http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3">
<embed href="http://www.html5rocks.com/en/tutorials/audio/quick/player_mp3_mini.swf" bgcolor="#085c68" width="200" height="20" name="movie" align="" type="application/x-shockwave-flash" flashvars="mp3=http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3">
</object>
</audio>
Now let us see how to add tracks to our audio. Below is the example you can see the source language is English. You could have multiple tracks in multiple languages.
<!-- Audio playback with captions -->
<audio src="test.ogg">
<track kind="captions" src="test.en.vtt" srclang="en" label="English">
</audio>
CSS3 Outline
Let us learn about CSS3 outlines. The text-outline has a thinkness, blur and color values out of which blur is optional. An outline is defined as below.
outline: { [ outline-width ] [ outline-style ] [ outline-color ] | inherit }
an outline is usually drawn outside of the border. Unlike border, the outline color and width cannot be set to individual edges around the element border. Also adding outlines will not cause any disturbance in the flow of the document and won't cause any overflow.
Example of an outline. In the below example an outline of 3px solid with orange color is drawn when the user focus an anchor (<a>) tag.
#outlineExample a:focus {
outline: 3px solid orange;
}
If you wish to explicitly set the outline , here's how one can do.
# outlineExample a:focus {
outline-color: orange;
outline-width: 5 px;
outline-style: solid;
}
Here's an example on how to apply outline
<!DOCTYPE html>
<html>
<style>
body{
font-size: 24px;
background: orange;
}
#outlineExample {
outline-color: orange;
outline-width: 5px;
outline-style: solid;
}
</style>
<body>
<h1>Outline Example</h1>
<a id="outlineExample" href="http://codeproject.com">Welcome to CodeProject</a>
</body>
</html>
Note – The surrounding outline might look like border but it's not. Below is the modified style with border.
#outlineExample {
outline-color: orange;
outline-width: 5px;
outline-style: solid;
border-width: 5px;
border-color: red;
border-style:solid;
}
CSS3 Text shadows
Let us learn about text shadows by setting the appropriate value to text-shadow property. We will see how to create one with an example.
Here's how we can use. The below one creates a shadow with -2px horizontal offset , 2px vertical offset , blurs by 3px and applies orange red color.
h1
{
text-shadow: -2px 2px 3px #FF4040 ;
}
Here's a neon style were you can see below how it creates a glowing heading text.
#neon
{
text-align: center;
margin: 200px auto;
font-family: "Museo";
font-size: 150px;
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,
0 0 40px #FF6103, 0 0 70px #FF6103, 0 0 80px #FF6103,
0 0 100px #FF6103, 0 0 150px #FF6103;
}
When it comes to browser support, unfortunately IE 6, 7 and 8 don't have support for text-shadow.
CSS3 Word Wrapping
Let us now try to understand and set the word-wrap property to set the word wrapping say for a <p> paragraph tag. The word wrapping allows long words which are unbreakable to be broken down in to multiple lines.
Below is the word wrap syntax
word-wrap: normal|break-word|initial|inherit;
Here's an example of word wrapping. Note we have some text with in the paragraph (<p>) but the paragraph is set with width as 400px and applied with various other styles but we are more interested in word wrapping. You can notice the words does not overflow but it breaks down that's because of this style word-wrap:break-word;
<!DOCTYPE html>
<html>
<head>
<style>
body{
background: orange;
}
p.wordwrap
{
width:400px;
font-size: 24px;
color: white;
border:1px solid red;
word-wrap:break-word;
}
</style>
</head>
<body>
<h2> Word Wrapping Example </h2>
<p class="wordwrap"> Each week's two winning article authors will take home a CodeProject Prize Pack that includes: a free 5-year Pro Account subscription to CodeProject Workspaces, a CodeProject t-shirt, and two vinyl, die cut Bob stickers.</p>
</body>
</html>
CSS3 Text Transformation
One can use text transformation value like uppercase and lowercase to transform a text to upper or lower case characters. Also you can use capitalize to make the first letter of each word in CAPS.
Here's the syntax for applying text transformation.
text-transform: uppercase | lowercase | capitalize | none | inherit
Example
<html>
<head>
h2 { text-transform: capitalize }
p.lowercase { text-transform: lowercase }
p.none { text-transform: none }
p.uppercase { text-transform: uppercase }
</head>
<body>
<h2>article 5: getting fancy with hTML5 & cSS3</h2>
<ul>
<li><p class="uppercase">CSS3 Transitions</p></li>
<li><p class="lowercase">CSS3 Animations</p></li>
<li><p class="none">CSS3 Text Effects (Outline, Shadow, Wrap, etc.) </p></li>
</ul>
</body>
</html>
Summary of CSS3 Text
We have seen how to apply CSS in changing the appearance of a text. The CSS allows us to do all sorts of things like changing the word wrapping, creating shadows, do text transformation, create outlines, border around the text.
In addition the above things, the CSS also provides other capabilities like controlling changing text direction, apply text decorations, indentation and alignment of texts, spacing between words and letters, align text and apply line breaking and much more.
The CSS3 Transformation allows us to transform an element to an extent such as scaling, rotating, translating and skewing.
Below is the official W3 Syntax for transformation
transform: method(value);
However, the browser vendors came up with their own version of transformation. In order to make the transformations compatible, we have to use the vendor prefix based transformation.
-webkit-transform: method(value);
-ms-transform: method(value);
-o-transform: method(value);
-moz-transform: method(value);
Now let us look into some of the transformation function available.
Translate – The translate function moves the element from it's current position (x, y) to new position as specified to the translate function. You may ecall the co-ordinate system that we studied in school.
Here's an example where we apply translation to a div which moves the element by x-axis by 50px and y-axis by -100px.
transform: translate(50px, -100px)
Rotate – The rotate function is used to rotate an element with an angle specified. We can specify the rotation amount by degrees or radians with a positive or negative value. The positive value is used to rotate an element clockwise and the negative value for counter clock wise.
Here's an example which rotates an element clockwise by 30deg.
transform: rotate(30deg)
Scale – The scale function is used to adjust the element by a specific factor. The scale function takes one or two parameters. If you are specifying one value, the element gets scaled equally both horizontally and vertically axes. When you are specifying two values, the elements horizontal and vertical axes gets scaled separately.
Here's an example which scales an element 3 by horizontal axes and 3 by vertical axes.
transform: scale(3, 3)
Let us learn with an example to understand how to perform scaling. The below sample scales the div containing image by 3 times.
Skew – The skew function is used to stretch an element. It takes two parameters one to stretch with an angle in x axes and the other in y axes.
Here's an example for skewing. We skew the div containing bob image by 30deg stretch by x and y axis.
Dealing with the vendor prefix styles in CSS3
As you might have noticed one thing, we need to apply CSS3 styles specific to the browser vendor. What we usually do is duplicate styles with vendor prefix so this lets the specific style to be applied based on the browser you are viewing the document.
Now we will deal with avoiding the vendor prefixes while applying CSS3D styles. In order for the styles to work without vendor prefix , we will be making use of a small javascript library named prefixfree.js. It's a light weight 2KB JS framework you can download and include in your HTML document.
With prefix free we need to have to worry about the vendor prefix but instead we will let the prefix free framework to handle or apply vendor specific properties at runtime. The prefix free
works behind the scenes by adding the current browser’s prefix to any CSS code, only when it’s needed.
Here's the sample example , deals with the below style. You can notice here we have used transform and animation. We will make use of prefix free to add vendor specific styles while we are viewing in browser.
.download {
margin-left:100px;
position: absolute;
top: 1em;
left: -1.5em;
width: 6em;
height: 6em;
padding: 1em 0;
background: #80A060;
background-image: linear-gradient(90deg, transparent, rgba(10,0,0,.3)),linear-gradient(transparent, transparent);
color: white;
line-height: 1;
font-size: 140%;
text-align: center;
text-decoration: initial;
text-shadow: .08em .08em .2em rgba(0,0,0,.6);
border-radius: 50%;
box-shadow: .1em .2em .4em -.2em black;
box-sizing: border-box;
transform: rotate(25deg);
animation: rotate;
cursor: zoom-in;
}
.download:hover{
border-radius:70px;
transform: rotate(720deg);
background-color:orange;
}
Here's how we use the styles in HTML document body.
<body>
<a href="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js" class="download" title="Click to download" download="prefixfree.min.js">Download prefixfree only <strong>2KB</strong>gzipped</a>
</body>
If you are saving and viewing this document in Google Chrome, you will notice the download style will be altered with vendor prefix tag as below
-webkit-transform:rotate(25deg);
-webkit-animation:rotate;
CSS 3D
Now it's the time to learn CSS 3D. The 3D transformation will make use of a similar functions as that of 2D. Below is the list of functions that we need to know in order to play with CSS 3D.
Before diving in let us understand the basics of 3D. With 2D you are aware of the X and Y , that's the horizontal and vertical dimensions. With 3D in addition to the X and Y we have the Z axes.
- rotateX(angle) – The rotateX function takes a single parameter i.e an angle to rotate an element along the x axes.
- rotateY(angle) – The rotateY function takes a single parameter i.e an angle to rotate an element along the y axes.
- rotateZ(angle) – The rotateZ function takes a single parameter i.e an angle to rotate an element along the z axes.
- translateZ(tz) – The translateZ function specifies the translation by a given amount in z direction.
- scaleZ(sz) – The scalez function is used tp scale an element in z direction.
Here's an example for scaling and rotation of an element.
Below are the styles that we will be making use of. You can notice the element is applied with a default 90deg transformation along the Y axes.
@import url(http:
body {
margin-top: 50px;
overflow: hidden;
font-family: Source Sans Pro;
perspective: 400px;
background: orange;
}
#element {
box-sizing: border-box;
position: absolute;
left: 250px;
width: 100px;
height: 100px;
background: gray;
border: 3px solid #444444;
margin: 0 auto;
transform: rotateY(90deg);
}
.slider, #label {
position: relative;
}
.slider input, #css input {
vertical-align: middle;
}
Here's the HTML code snippet where we are making use of the above styles to achieve transformation.
<div id='element'></div>
<div class='slider'>
<label>Z:</label>
<input id='zslider' max='2.5' min='' step='0.1' type='range' value='1'>
</div>
<div id='label'>Transform: ScaleZ(1)</div>
We will be using javascript code to update the scaling for our element. In the on change event of the slider we will scale the element and update the inner text of the div with id - label.
var element = document.getElementById('element'),
css = document.getElementById('label'),
z = 1;
document.getElementById('zslider').addEventListener('change', function() {
z = this.value;
updateElement();
}, false);
function updateElement() {
var scale = 'scaleZ(' + z + ')';
element.style[Modernizr.prefixed('transform')] = scale + ' rotateY(60deg)';
label.innerText = 'transform: ' + scale;
}
The CSS3 transitions are effects that allows the element to change it's style gradually. In order to see the effect of the transition , you will always have to specify a duration.
Here's an example of a CSS transition. You can notice on mouse hover of bob image, the width gets changed and the transition will also be applied.
<!DOCTYPE html>
<html>
<head>
<style>
img
{
width:100px;
height:100px;
background:red;
-webkit-transition:width 2s;
transition:width 2s;
}
img:hover
{
width:300px;
}
</style>
</head>
<body>
<img src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" />
</body>
</html>
Now let us see the properties of transition. (Please note, some of the definitions are based on w3schools[4]
- transition – The transition is a single property which can be used to set all the transition effects. All of the below transition based properties can be set using this one property.
- transition-delay – The transition delay specifies the delay with which the transition effect has to happen.
- transition-duration – The transition duration specifies how many seconds or milliseconds a transition effect takes to complete.
- transition-property – The transition property can be used to specify the name of the CSS property that you wish to perform a transition effect. ex:
width - transition-timing-function – The transition timing function is used to specify the speed curve of the transition effect. This property is resposibile for changing or altering the speed of transition. You can set this property with the following values -
linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(),initial,inherit
Little more about transition with transformation. Here's an example you can see the transformation (180deg rotation) is being applied when we mouse hover the bob image.
Here's another example of the usage of transaction with timing function , duration etc. You can see on mouse hover the menu, the background color gets changed to white with a little 1 second delay and a box shadow is also being applied.
Now let us learn about CSS3 Animations. The CSS3 animation allows us to apply animations with the help of animation property.
There are two main components that we must know before we get started with animations. That is, we must first define the styles that are required for the animation and specify the keyframe which indicates the start and end states of the animation styles.
The @keyframes rule is the base for animation. We can apply various styles during the animation. Within the keyframe we can either specify the from and to and/or we can explicitly specify the change to happen in percentage. 0% is the beginning of the animation and 100% is when the animation completes.
Note the @keyframe is only supported in Internet Explorer 10, Firefox, and Opera. For Safari and Chrome support we will have to define @-webkit-keyframes rule.
Below is an example of how we can define a keyframe rule with from and to.
@keyframes move
{
from {top:0px;}
to {top:500px;}
}
@-webkit-keyframes move
{
from {top:0px;}
to {top:500px;}
}
Now we shall define animation which makes use of the keyframe rule.
animation:move 2s infinite;
-webkit-animation:move 2s infinite;
Let us now learn how to define a keyframe rule with percentages. If you want to have a better control over the keyframes and wish to build animations to be controlled in a specific percentages it's always good to go with the below approach.
Note you can mix and match the percentage with from and to animations too.
@keyframes move
{
0% {top:0px; left:0px; background:orange;}
25% {top:0px; left:100px; background:red;}
50% {top:100px; left:100px; background:blue;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:yellow;}
}
@-webkit-keyframes move
{
0% {top:0px; left:0px; background:orange;}
25% {top:0px; left:100px; background:red;}
50% {top:100px; left:100px; background:blue;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:yellow;}
}
Let us now learn the properties that's required to apply animations.
Quote: The following CSS3 Animation propeties are based on
[5]
- animation-delay – The animation delay is used to specify the delay between the time the element is loaded and the beginning of the animation sequence.
- animation-direction – Specifies whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.
- animation-duration – The animation duration is used to specify the length of time that an animation should take to complete one cycle.
- animation-iteration-count – Used to specify the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.
- animation-name - The animation name specifies the name of the @keyframes at-rule describing the animation's keyframes.
- animation-play-state – The animation play state property basically helps in pausing and resuming the animation sequence.
- animation-timing-function – Specifies the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves.
- animation-fill-mode – Lets us to specify a values that can be applied before and after animation.
Let us see the cube animation example in steps.
Please note - The below cube example is based on the common creative license created by David DeSandro More info, please take a look into - http://desandro.github.io/3dtransforms/examples/cube-02-show-sides.html
1. First thing to do is defining the keyframe
@-webkit-keyframes spinCubeWebkit {
0% { -webkit-transform: translateZ( -100px ) rotateX( 0deg ) rotateY( 0deg ); }
100% { -webkit-transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg ); }
}
2. Second is defining animations. Note , we have specified animation with infinite so the cube rotates by itself forever. Also notice the effect ease-in-out which specifies a transition effect with a slow start and end.
#cube.spinning {
-webkit-animation: spinCubeWebkit 8s infinite ease-in-out;
-moz-animation: spinCubeMoz 8s infinite ease-in-out;
-o-animation: spinCubeO 8s infinite ease-in-out;
animation: spinCube 8s infinite ease-in-out;
}
3. We will define the cube as below. We need to specify the transform-style with preserve-3d so that the elements children that is the edges are positioned in the 3D Space.
Note – If you are running the cube sample in say IE 10 , currently it does not support preserve-3d. The only workaround for now is to manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.
<section class="container">
<div id="cube" class="spinning">
<p class="front"></p>
<p class="back"></p>
<p class="right"></p>
<p class="left"></p>
<p class="top"></p>
<p class="bottom"></p>
</div>
</section>
#cube {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ( -100px );
-moz-transform: translateZ( -100px );
-o-transform: translateZ( -100px );
transform: translateZ( -100px );
}
#cube p {
display: block;
position: absolute;
width: 196px;
height: 196px;
border: 2px solid black;
line-height: 196px;
font-size: 120px;
font-weight: bold;
color: white;
text-align: center;
}
4. We will apply rotation and translation on each edges of the cube.
#cube .front {
-webkit-transform: translateZ( 100px );
-moz-transform: translateZ( 100px );
-o-transform: translateZ( 100px );
transform: translateZ( 100px );
}
#cube .back {
-webkit-transform: rotateX( -180deg ) translateZ( 100px );
-moz-transform: rotateX( -180deg ) translateZ( 100px );
-o-transform: rotateX( -180deg ) translateZ( 100px );
transform: rotateX( -180deg ) translateZ( 100px );
}
#cube .right {
-webkit-transform: rotateY( 90deg ) translateZ( 100px );
-moz-transform: rotateY( 90deg ) translateZ( 100px );
-o-transform: rotateY( 90deg ) translateZ( 100px );
transform: rotateY( 90deg ) translateZ( 100px );
}
#cube .left {
-webkit-transform: rotateY( -90deg ) translateZ( 100px );
-moz-transform: rotateY( -90deg ) translateZ( 100px );
-o-transform: rotateY( -90deg ) translateZ( 100px );
transform: rotateY( -90deg ) translateZ( 100px );
}
#cube .top {
-webkit-transform: rotateX( 90deg ) translateZ( 100px );
-moz-transform: rotateX( 90deg ) translateZ( 100px );
-o-transform: rotateX( 90deg ) translateZ( 100px );
transform: rotateX( 90deg ) translateZ( 100px );
}
#cube .bottom {
-webkit-transform: rotateX( -90deg ) translateZ( 100px );
-moz-transform: rotateX( -90deg ) translateZ( 100px );
-o-transform: rotateX( -90deg ) translateZ( 100px );
transform: rotateX( -90deg ) translateZ( 100px );
}
Now we will see a real world example of a 2D and 3D Transformations applied for div buttons.
First let us define the styles that are required for this sample.
.button-skewed-action,
.button-skewed-success,
.button-skewed-warning,
.button-skewed-danger {
-webkit-perspective: 200px;
-ms-perspective: 200px;
perspective: 200px;
text-transform: uppercase;
width: 150px;
margin: 30px auto;
position: relative;
color: white;
font-weight: bold;
line-height: 2.4;
text-align: center;
padding-left: 20px;
cursor: pointer;
outline: 1px solid transparent;
-webkit-transform: skew(-9deg) rotateX(-22deg) rotateY(-31deg) rotateZ(-9deg);
-ms-transform: skew(-9deg) rotateX(-22deg) rotateY(-31deg) rotateZ(-9deg);
transform: skew(-9deg) rotateX(-22deg) rotateY(-31deg) rotateZ(-9deg);
}
.button-skewed-action {
background: #5388C6;
-webkit-transform:matrix(1,0.1,-0.5,1,0,0);
-ms-transform:matrix(1,0.1,-0.5,1,0,0);
-webkit-transform:matrix(1,0.1,-0.5,1,0,0);
transform:matrix(1,0.1,-0.5,1,0,0);
}
.button-skewed-action:hover {
background: #3C87DD;
}
.button-skewed-success {
background: #7fc552;
}
.button-skewed-success:hover {
background: #7CD147;
}
.button-skewed-warning {
background: #C6C000;
-webkit-transform:matrix(1,0.1,-0.5,1,0,0);
-ms-transform:matrix(1,0.1,-0.5,1,0,0);
-webkit-transform:matrix(1,0.1,-0.5,1,0,0);
transform:matrix(1,0.1,-0.5,1,0,0);
}
.button-skewed-warning:hover {
background: #B3AE14;
}
.button-skewed-danger {
background: #C66253;
}
.button-skewed-danger:hover {
background: #DD513C;
}
We shall apply the above styles to in HTML.
<h4 align="center">CodeProject Skewed Buttons </h4>
<div class="button-skewed-success">Submit</div>
<div class="button-skewed-action">Action</div>
<div class="button-skewed-warning">Warning</div>
<div class="button-skewed-danger">Danger</div>
Let us see one more example demonstating the usage of transition and 3D Rotation to flip the image.
Here are the styles that is required for our code sample. You can notice the transition with 1s is being applied for the card and we are rotating the card by 180 deg to make the card to flip effect.
body{
font-size: 25px;
}
.container {
width: 400px;
height: 250px;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
#card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#card.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
#card figure {
display: block;
height: 100%;
width: 100%;
color: white;
text-align: center;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
#card .front {
background: red;
}
#card .back {
background: blue;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
Let us code the HTML document and apply the above styles.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<h2>Flip Image Example</h2>
<section class="container">
<div id="card">
<figure class="front">
<img src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" alt="The Pulpit Rock" width="304" height="228">
</figure>
<figure class="back">
<img src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" alt="The Pulpit Rock" width="304" height="228">
</figure>
</div> </section>
<a id="card" href="#">Flip</a>
Points of Interest
Initially, I knew little about CSS3 but when started researching about CSS3, the capabilites that's being provided by modern browser to support CSS3 is tremendious. I really enjoyed playing with HTML5 Video/Audio tags, CSS3 animations, transitions etc. You might be supripsed to see the animations is being implemented with a minimal CSS3 code and no javascripts.
Special thanks to codepen.io editor, without that I would not be able to comeup with a proffesional code intereative samples :)
Don't forget to download and view the sample source code. It has 15 samples demostrating the use of HTML5 and CSS3.
References
[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
[2] http://www.html5rocks.com/en/tutorials/video/basics/
[3] http://www.htmlgoodies.com/primers/html/article.php/3920991/HTML5-Primer-How-To-Use-the-Audio-Tag.htm
[4] http://www.w3schools.com/cssref/css3_pr_transition.asp
[5] http://www.w3schools.com/cssref/css3_pr_animation.asp
History
Version 1.0 - Created Getting Fancy with HTML5 & CSS3 article - 04/12/2014
Version 1.1 - Updated article with the appropriate references - 09/08/2015
