2 replies [Last post]
lsilver
Offline
newbie
Last seen: 7 years 24 weeks ago
Timezone: GMT-8
Joined: 2012-08-26
Posts: 8
Points: 12

I'm using CSS3 code that I found to display animated clouds on a blue sky. Works just fine.

I also want to display a headline on top of the "sky and clouds". This isn't working correctly. The clouds are on top of the headline.

I tried z-index but that didn't work and read that z-index might not work when web-transform is being used. But I couldn't find a solution.

So, what do I need to do to make sure that the headline is always on top of the "sky and clouds".

Thanks.

HTML

<div id="clouds">
<h2>Welcome To Gateway</h2>
	<div class="cloud x1"></div>
	<div class="cloud x2"></div>
	<div class="cloud x3"></div>
	<div class="cloud x4"></div>
	<div class="cloud x5"></div>
</div>

CSS

h2 {
  text-align: center;
}
 
/*Lets start with the cloud formation rather*/
 
/*The container will also serve as the SKY*/
 
*{ margin: 0; padding: 0;}
 
body {
	/*To hide the horizontal scroller appearing during the animation*/
	overflow: hidden;
}
 
#clouds{
	padding: 100px 0;
	background: #c9dbe9;
	background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
 
/*Time to finalise the cloud shape*/
.cloud {
	width: 200px; height: 60px;
	background: #fff;
 
	border-radius: 200px;
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px;
 
	position: relative; 
}
 
.cloud:before, .cloud:after {
	content: '';
	position: absolute; 
	background: #fff;
	width: 100px; height: 80px;
	position: absolute; top: -15px; left: 10px;
 
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
 
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	-moz-transform: rotate(30deg);
}
 
.cloud:after {
	width: 120px; height: 120px;
	top: -55px; left: auto; right: 15px;
}
 
/*Time to animate*/
.x1 {
	-webkit-animation: moveclouds 45s linear infinite;
	-moz-animation: moveclouds 45s linear infinite;
	-o-animation: moveclouds 45s linear infinite;
}
 
/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
	left: 200px;
 
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0.6; /*opacity proportional to the size*/
 
	/*Speed will also be proportional to the size and opacity*/
	/*More the speed. Less the time in 's' = seconds*/
	-webkit-animation: moveclouds 75s linear infinite;
	-moz-animation: moveclouds 75s linear infinite;
	-o-animation: moveclouds 75s linear infinite;
}
 
.x3 {
	left: -250px; top: -180px;
 
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
 
	-webkit-animation: moveclouds 60s linear infinite;
	-moz-animation: moveclouds 60s linear infinite;
	-o-animation: moveclouds 60s linear infinite;
}
 
.x4 {
	left: 470px; top: -220px;
 
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.75; /*opacity proportional to the size*/
 
	-webkit-animation: moveclouds 54s linear infinite;
	-moz-animation: moveclouds 54s linear infinite;
	-o-animation: moveclouds 54s linear infinite;
}
 
.x5 {
	left: -150px; top: -150px;
 
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
 
	-webkit-animation: moveclouds 60s linear infinite;
	-moz-animation: moveclouds 60s linear infinite;
	-o-animation: moveclouds 60s linear infinite;
}
 
@-webkit-keyframes moveclouds {
	100% {margin-left: 2000px;}
	0% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
	100% {margin-left: 2000px;}
	0% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
	100% {margin-left: 2000px;}
	0% {margin-left: -1000px;}
}

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 6 years 1 week ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Well it does do work, the

Well it does do work, the z-index I mean.
The problem why it didn't work, is because you didn't gave your H2 an absolute position.
Here is the code I used to get it infront of your clouds.

h2 {
    margin-left: 250px;
    position: absolute;
    z-index: 999;
}

I only changed the H2 in css, so the rest in the CSS file and in the HTML file remains the same.
Here is the working proof.

Let us know if it worked out for you Wink

Check Maximum Webdesign for your online solutions

lsilver
Offline
newbie
Last seen: 7 years 24 weeks ago
Timezone: GMT-8
Joined: 2012-08-26
Posts: 8
Points: 12

Thanks. Works perfectly.

Thanks. Works perfectly.