Tag: html

How To Make HTML5 Video Backgrounds

For this example I am utilizing a CC0 stock video. That I have trimmed down to a few seconds. When Working with HTML video it is best practice to include mp4, ogg and webM. These three files types encompass all the variation in the browser market, to make sure your video is as cross browser compatible as possible.

HTML Code for Video Background

First start by adding the necessary mark up for the video. The HTML5 video tag creates a block to house the video. In this example we give the video tag an attribute of “autoplay loop” to have the video continuously play. We also give it an id so we can target it specifically. Inside the video tag we have three source tags. Each source tag has a src and a type attribute corresponding to its file format.

<video autoplay loop id="videoBackground">
<source src="_videos/webBackground.mp4" type="video/mp4"> <!--MP4 Video-->
<source src="_videos/webBackground.webm" type="video/webm"> <!--WebM Video-->
<source src="_videos/webBackground.ogg" type="video/ogg"><!--OGG video-->
</video>

CSS Code for Video Background

The following properties ensure the video stays in place and does not move.
#videoBackground{
position: fixed;
right: 0;
top: 0;
left: 0;
right: 0;
}
The next properties ensure the video is always the size of the whole browser.

#videoBackground{
position: fixed;
right: 0;
top: 0;
left: 0;
right: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
The last property ensures the video is always behind the content.

#videoBackground{
position: fixed;
right: 0;
top: 0;
left: 0;
right: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}

If you have any other z index properties on your page this must be the lowest of them.

How to Make Angled HTML Containers With CSS

Angled HTML containers are a great way to add interest and lead the eye on a website. It’s a simple tool to make a website stand out from the crowd. This fast and easy tutorial can be used on any HTML block element. It is done by creating a pseudo container after and behind the original. Then aligning, matching and transforming it to create the illusion of a continuous container.

First select the element you wish to angle. Style it as you wish and set position to relative.

header{
position: relative;
width: 100%;
height: 10em;
background-color: #FF3300;
}

Next target the element and use the pseudo selector “after”. Then add the following styles.

header::after{
position: absolute;
width: 100%;
height: 100%;
content: '';
background-color: inherit;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
transform-origin: top left;
transform: skewY(6deg);
}

How the Code Works

This code creates a pseudo element after the header. The content of this pseudo element is empty which is determined by the content property having a value of empty single quotes. The width and height property has it completely fill its parent. The position property along with the top, right, left and bottom, sets its position and prohibits it from moving within inside of its parent. The background inherit makes sure the slant automatically matches its parent’s background color. The z-index places the pseudo element behind the original element. The transform origin and transform sets the placement and quantity of the angle.

Change the “transform-origin” and “transform” property to adjust the effect.

How to: Rotate an image in 3D with CSS animation

HTML Page

Start by creating an image in your html page and giving it a class. For this demo we will use the class “imageSpin”

<!doctype html> 
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta http-equiv="x-ua-compatible" content="ie=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Rotate Image in 3D</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
<img src="areVisualLogoMark.png" alt="ARE Visual Logo Mark" class="imageSpin">
</body>
</html>

CSS Page

How the Animation will Work

The animation will utilize the CSS “rotateY” property. There will be two keyframes one where the image rotation is set to “0deg” and the other where it is set to “360deg”. The tweening between the “from” and “to” points will create the animation.

Creating the Animation

Start by creating the keyframe animation and naming it. For this demo I will be calling the demo spin.

@keyframes spin {
}

Now create the starting “from” value and the “to” value.

@keyframes spin {
 from{
 transform: rotateY(0deg);
 }
 to{
 transform: rotateY(360deg);
 }
}

Now we have to call the animation. To do this we select it by calling the class we gave our image. Next we need to set the “animation-name” that we defined earlier. After that we set the “animation-timing-function”, this is the CSS equivalent of easing. For this demo I am going to use “linear” value so the speed of the animation is consistent for the whole duration. Next we will define the “animation-iteration-count.” This is how many times the animation will repeat. For this demo we will set it to “infinite” so it will keep repeating. The last property we will set is “animation-duration” this is how long the animation will take to complete. For this we will use 5 seconds.

Adding browser specificity

CSS animations are still not completely universal. This step may not be needed but generally it is good practice. To make sure our animation renders correctly across browsers we want to add properties specific for each browser. To do this add the following code.

@keyframes spin {
 from{
 transform: rotateY(0deg);
 moz-transform: rotateY(0deg); //Firefox
 ms-transform: rotateY(0deg); //Microsoft Browsers
 }
 to{
 transform: rotateY(360deg);
 moz-transform: rotateY(360deg); //Firefox
 ms-transform: rotateY(360deg); //Microsoft Browsers
 }
}
@-webkit-keyframes spin{
 from{-webkit-transform: rotateY(0deg);}
 to{-webkit-transform: rotateY(360deg);}
}
.imageSpin{
 animation-name: spin;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
 animation-duration: 5s;
 -webkit-animation-name: spin;
 -webkit-animation-timing-function: linear;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-duration: 5s;
}

Download Demo