Category: Web Design

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: 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

Why and Why Not to Use a CMS With Infographic

Content management systems(CMS) are one of the fastest growing web design trends, with over 40% of websites using some sort of CMS. Of that market share an estimated 59% belongs to WordPress (W3Techs). Some of the biggest names around relay on a CMS. Some notable names using WordPress are: The New Yorker, Best Buy, The Rolling Stones, CNN and more. However with every big success there are a million tragedy websites you will never hear of. Working with a CMS provides a lot of benefits but it also provides a lot weaknesses. Lets discuss some pros and cons of using a CMS opposed to a traditional static website and decide if a CMS is right for your next web design.

Reasons to Use a CMS

Control Website Without Code

Building a website on a CMS provides a graphical user interface (GUI) where anyone can make changes to the website. This is great because it allows you to focus on development. With a little bit of training clients, data entry people, writers and whoever else is needed can apply and edit content to the website. This mean you don’t have to do it! You can further limit who can edit what, so no one messes up your design work. One way to do this I personally like is the White Label CMS plugin

Manage Multiple Contributors

A CMS is also helpful for managing multiple contributors. This is especially helpful when working with writers. Each writer can be set up with an account. This helps know who is doing what. This is also helpful with giving each contributor credit. Once the information is entered to their account it can be set to automatically be shown with an article they publish. Also since that information is dynamically generated when the article is loaded if the author’s information changes it will automatically show the new information on every article they have written.

Scalability

One of the most powerful abilities of working with a CMS is its ability to scale. With their ability of adding categories, tags, change menus, and write custom queries a site architecture can be easily changed. What would take weeks with a static website can be done in the matter of an hour. Also with pages being dynamically generated, new templates can be coded or old ones modified to completely change the aesthetic of existing pages without manually having to change each one.

Social Sharing and Community

Blogs are one of the most shared forms of media on the internet. Blogs are an integral part of any dynamic CMS. CMS websites are especially useful for building a community. They provide a simple platform to post, comment and share.

Reasons Not to Use a CMS

Speed

CMS websites use a template engine to generate dynamic pages on the server using PHP and return a completed web page. This requires dozens of HTTP and often results in rebose markup.

Security

CMS sites require an attached databases. Databases are gateways for hackers. Even more so hackers have taken advantage of the CMS boom and have created tools to find security flaws within them. The most common types of these tools scans pages for security vulnerabilities then uses an injection to get into the site’s database. Once in the database these tools crawl the users stored in the database running them through them a algorithm to determine an admin user. These tools are often able to return an admin user name and password with alarming accuracy.

There is much that can be done to secure CMS sites. CMS sites are not necessarily insecure but it is important to understand they carry extra risk from a static web pages.

Giving up Control

CMS websites create a platform where a website can easily have multiple authors. It creates a platform where a developer can create a website to pass off to a client to manage themselves. These are all great but it requires letting go control of the website to someone who is not a web developer. The planning of the site’s architecture, the design of consistent on brand UI elements, the carefully sculptured SEO content and all the other intensely thought about features of a website will not be continued by someone who is not a web professional. You can limit the privileges of these users, you can teach a client how things should be done, however at the end of the day control is lost.