Creating Flash-like Banner Ads with CSS

  • follow us in feedly
Published November 12, 2013 by Brad Knutson
Creating Flash-like Banner Ads with CSS

I’m amazed that I still stumble across the occasional Flash ad banner. In today’s day and age…where Flash is the butt-end of every programming joke…flash still finds a way to exist.

Frankly, I just don’t understand it.

Perhaps some people are trying to hold on to their Flash skills because they spent countless hours learning ActionScript, spent late nights testing some really cool and graphic intensive animations, spent months worth of salary to take classes to learn the latest version of Flash…maybe it’s hard to let go. Well, just like the switchboard operators of yesteryear, it’s time to move on – and let go.

With CSS, I strongly believe that there isn’t a flash animation out there that we couldn’t reproduce.

So, earlier today, when I was looking at affiliate banners for a product I am thinking about endorsing, you can imagine my disdain when I saw they included a flash banner. GAH!!!!!!

This prompted me to come up with a few quick examples of some really cool looking flash-like banners made with 100% CSS.

Flash-like Ad Banners with CSS

View Demo

The HTML


<div class="container1">
<div class="banner">
<div class="phrase-1">
					Are you getting the most out of your website?
				</div>
<div class="phrase-2">
					I can help you get there.
				</div>
<div class="blob-1"></div>
<div class="blob-2"></div>
<div class="blob-3"></div>
</div>
</div>

Nothing to see here.

The CSS

This is where the magic is done. We combine the best features of CSS (including transitions and animations) to come up with some awesome example. The below CSS is specifically for the demo linked above.

.container1, .container2, .container3 {
	font-family: 'Helvetica', Calibri, sans-serif;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	line-height: 4;
}
.container1 a, .container2 a, .container3 a, .container1 a:visited, .container2 a:visited, .container3 a:visited {
	color: #000;
}
.container1 .banner, .container1 .phrase-1, .container1 .phrase-2 {
	-webkit-transition: all ease 1s;
	-moz-transition: all ease 1s;
	-o-transition: all ease 1s;
	-ms-transition: all ease 1s;
	transition: all ease 1s;
}
.container1 .banner {
	width: 600px;
	height: 75px;
	margin: 50px auto;
	overflow: hidden;
	background-color: #DDDDDD;
	position: relative;
}
.container1 .banner:hover {
	background-color: #3A485F;
}
.container1 .phrase-1, .container1 .phrase-2 {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 2;
}
.container1 .phrase-1 {
	opacity: 1;
}
.container1 .phrase-2 {
	opacity: 0;
	color: #FFF;
}
.container1 .banner:hover .phrase-1 {
	opacity: 0;
}
.container1 .banner:hover .phrase-2 {
	opacity: 1;
}
.container1 .blob-1, .container1 .blob-2, .container1 .blob-3 {
	position: absolute;
	z-index: 1;
	-webkit-transition: all ease 1s;
	-moz-transition: all ease 1s;
	-o-transition: all ease 1s;
	-ms-transition: all ease 1s;
	transition: all ease 1s;
}
.container1 .blob-1 {
	border-radius: 25px;
	background-color: rgba(58,72,95,0.2);
	width: 175px;
	height: 175px;
	top: -10%;
	left: 33%;
	-webkit-animation: rotating 10s ease-in infinite;
	-moz-animation: rotating 10s ease-in infinite;
	-ms-animation: rotating 10s ease-in infinite;
	animation: rotating 10s ease-in infinite;
}
.container1 .banner:hover .blob-1 {
	height: 600px;
	width: 600px;
	top: -30%;
	left: 0%;
}
.container1 .blob-2 {
	border-radius: 35px;
	background-color: rgba(58,72,95,0.2);
	width: 185px;
	height: 185px;
	top: -5%;
	left: 30%;
	-webkit-animation: rotating 9s linear infinite;
	-moz-animation: rotating 9s linear infinite;
	-ms-animation: rotating 9s linear infinite;
	animation: rotating 9s linear infinite;
}
.container1 .banner:hover .blob-2 {
	height: 600px;
	width: 600px;
	top: -35%;
	left: 5%;
}
.container1 .blob-3 {
	border-radius: 35px;
	background-color: rgba(58,72,95,0.2);
	width: 200px;
	height: 200px;
	top: -10%;
	left: 35%;
	-webkit-animation: rotating 8s ease-out infinite;
	-moz-animation: rotating 8s ease-out infinite;
	-ms-animation: rotating 8s ease-out infinite;
	animation: rotating 8s ease-out infinite;
}
.container1 .banner:hover .blob-3 {
	height: 700px;
	width: 700px;
	top: -40%;
	left: -5%;
}
.container2 .banner, .container2 .phrase-1, .container2 .phrase-2 {
	-webkit-transition: all ease 1s;
	-moz-transition: all ease 1s;
	-o-transition: all ease 1s;
	-ms-transition: all ease 1s;
	transition: all ease 1s;
}
.container2 .banner {
	width: 600px;
	height: 75px;
	margin: 50px auto;
	overflow: hidden;
	background-color: #DDDDDD;
	position: relative;
}
.container2 .banner:hover {
	background-color: #3A485F;
}
.container2 .phrase-1, .container2 .phrase-2 {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 2;
}
.container2 .phrase-1 {
	opacity: 1;
}
.container2 .phrase-2 {
	opacity: 0;
	color: #FFF;
}
.container2 .banner:hover .phrase-1 {
	opacity: 0;
}
.container2 .banner:hover .phrase-2 {
	opacity: 1;
}
.container2 .blob-1, .container2 .blob-2, .container2 .blob-3 {
	position: absolute;
	z-index: 1;
	-webkit-transition: all ease 1s;
	-moz-transition: all ease 1s;
	-o-transition: all ease 1s;
	-ms-transition: all ease 1s;
	transition: all ease 1s;
}
.container2 .blob-1 {
	border-radius: 50px;
	background-color: rgba(58,72,95,0.2);
	width: 205px;
	height: 135px;
	top: -10%;
	left: 5%;
	-webkit-animation: rotating 10s ease-in infinite;
	-moz-animation: rotating 10s ease-in infinite;
	-ms-animation: rotating 10s ease-in infinite;
	animation: rotating 10s ease-in infinite;
}
.container2 .banner:hover .blob-1 {
	height: 600px;
	width: 600px;
	top: -30%;
	left: 0%;
}
.container2 .blob-2 {
	border-radius: 65px;
	background-color: rgba(58,72,95,0.2);
	width: 235px;
	height: 165px;
	top: -5%;
	left: 30%;
	-webkit-animation: rotating 9s linear infinite;
	-moz-animation: rotating 9s linear infinite;
	-ms-animation: rotating 9s linear infinite;
	animation: rotating 9s linear infinite;
}
.container2 .banner:hover .blob-2 {
	height: 600px;
	width: 600px;
	top: -35%;
	left: 5%;
}
.container2 .blob-3 {
	border-radius: 75px;
	background-color: rgba(58,72,95,0.2);
	width: 250px;
	height: 175px;
	top: -10%;
	left: 55%;
	-webkit-animation: rotating 8s ease-out infinite;
	-moz-animation: rotating 8s ease-out infinite;
	-ms-animation: rotating 8s ease-out infinite;
	animation: rotating 8s ease-out infinite;
}
.container2 .banner:hover .blob-3 {
	height: 700px;
	width: 700px;
	top: -40%;
	left: -5%;
}
.container3 .banner, .container3 .phrase-1, .container3 .phrase-2 {
	-webkit-transition: all ease 1s;
	-moz-transition: all ease 1s;
	-o-transition: all ease 1s;
	-ms-transition: all ease 1s;
	transition: all ease 1s;
}
.container3 .banner {
	width: 600px;
	height: 75px;
	margin: 50px auto;
	overflow: hidden;
	background-color: #DDDDDD;
	position: relative;
}
.container3 .banner:hover {
	background-color: #94231B;
}
.container3 .phrase-1, .container3 .phrase-2 {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 2;
}
.container3 .phrase-1 {
	opacity: 1;
	color: #94231B;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.container3 .phrase-2 {
	opacity: 0;
	color: #FFF;
	text-shadow: 1px 1px 6px rgba(0,0,0,0.8);
}
.container3 .banner:hover .phrase-1 {
	opacity: 0;
}
.container3 .banner:hover .phrase-2 {
	opacity: 1;
}
.container3 .blob-1, .container3 .blob-2, .container3 .blob-3 {
	position: absolute;
	width: 205px;
	height: 205px;
	top: -45%;
	opacity: 0.5;
	z-index: 1;
	-webkit-transition: all ease 1s;
	-moz-transition: all ease 1s;
	-o-transition: all ease 1s;
	-ms-transition: all ease 1s;
	transition: all ease 1s;
}
.container3 .blob-1 {
	left: 5%;
	-webkit-animation: rotating 10s ease-in infinite;
	-moz-animation: rotating 10s ease-in infinite;
	-ms-animation: rotating 10s ease-in infinite;
	animation: rotating 10s ease-in infinite;
}
.container3 .banner:hover .blob-1 {
	height: 600px;
	width: 600px;
	opacity: 0;
	top: -30%;
	left: 0%;
}
.container3 .blob-2 {
	left: 40%;
	-webkit-animation: rotating 9s linear infinite;
	-moz-animation: rotating 9s linear infinite;
	-ms-animation: rotating 9s linear infinite;
	animation: rotating 9s linear infinite;
}
.container3 .banner:hover .blob-2 {
	height: 600px;
	width: 600px;
	top: -35%;
	left: 5%;
	opacity: 0;
}
.container3 .blob-3 {
	left: 65%;
	-webkit-animation: rotating 8s ease-out infinite;
	-moz-animation: rotating 8s ease-out infinite;
	-ms-animation: rotating 8s ease-out infinite;
	animation: rotating 8s ease-out infinite;
}
.container3 .banner:hover .blob-3 {
	height: 700px;
	width: 700px;
	top: -40%;
	left: -5%;
	opacity: 0;
}
@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes rotating {
    from{
        -moz-transform: rotate(0deg);
    }
    to{
        -moz-transform: rotate(360deg);
    }
}
@-ms-keyframes rotating {
    from{
        -ms-transform: rotate(0deg);
    }
    to{
        -ms-transform: rotate(360deg);
    }
}
@-keyframes rotating {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

Now that’s a lot of CSS!

Really, it’s not – I essentially tripled the amount of CSS because I wanted to break each banner into it’s own CSS section – so if you create this effect on your own you won’t need as much.

I think it’s fairly obvious that you can get really creative with this. Try it out for yourself, and see what you can come up with!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

6 thoughts on “Creating Flash-like Banner Ads with CSS

    1. Brad Knutson Post author

      Hey Rob – on this site I just surrounded the banner with an anchor tag, and I don’t have any issues.

      You could also use JavaScript onclick to send the user to a new URL.

  1. Rob

    Ah I see. Im using XHTML 1.0 Transitional. Ive used onclick as you suggested and added cursor:pointer to the containers css.
    Works fine. Thanks for the speedy reply :)

    Reply

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">