So I decided that I would create the PNG fog image and stick it on the div as background.. then use CSS animations to gradually move that div, simulating raising fog.
Here is the result:
I am some div element covered by mist
How it is done
There are several divs here - main one for containing all other other divs (it could be replaced by <body> on proper website), box div which is the box in the centre of the screen and fog div which moves creating illusion of fog.Main div has following properties in CSS:
position: relative;Relative position makes sure that the containing div places itself between the rest of the content.
background-image: url(address-to-pic.png);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 300px;
overflow: hidden;
outline: thin red solid;
Properties like width, height and background are self descriptive.
Important property is the "overflow: hidden;" it hides any content that goes outside of the main div which is exactly what we want as we are moving the fog div from below the main div but we only want to see the part that is inside of it. Outline is there just for presentational purposes.
Box div has following properties in CSS:
position: absolute;Absolute position keeps the box in the place despite other page elements - otherwise it would be pushed over by other divs.
z-index: 2;
left: 35%;
height: 40%;
width: 30%;
bottom: 20%;
background-color: rgba(100, 198, 255, 0.6);
box-shadow: 2px 2px 10px black;
outline: thin red solid;
"z-index: 2;" property can be set to anything as long as its value is lower than that of the fog div - so that the fog overlays the box.
Box shadow property sets the nice, smooth shadow under the box so that it appears to be floating.
Fog div has following properties in CSS:
z-index: 10;Animation property starts the animation called "fog" for the div which is specified in other part of CSS.
animation: fog 10s infinite;
position: relative;
background-image: url(address-to-pic.png);
background-repeat: repeat;
height: 100%;
width: 100%;
outline: thin red solid;
CSS animation used:
@keyframes fogThis is the standard way of creating animations in CSS, it consists of steps (from 100% to 0%) and properties that are changed in each step.
{
100%{top: 0%;}
0%{top: 100%;}
}
Brak komentarzy:
Prześlij komentarz