Note this Tutorial is with the -webkit- prefix for Chrome, so if you use for example Mozilla Firefox Browser you must change the prefix to –moz- .
Below we will describe some highlighted code:
z-index:
· This Specifies the stack order of the element, the default value is auto.
· Is supported in all Major Browsers.
· If the value is inherited - Specifies that the z-index should be inherited from the parent element
:after & :before
They are Pseudo classes
-linear-gradient
Linear gradients are defined by an axis, the gradient line with each point on it being of a different color.
<!DOCTYPE html><html><head><style>body {background: #BFCFFE;}#cloud {width: 360px; height: 120px;background: -webkit-linear-gradient(top, #f2f9fe 10%, #d6f0fd 100%);-webkit-border-radius: 100px;position: relative;margin: 200px auto 70px;}#cloud:after, #cloud:before {content: '';position: absolute;background: #f2f9fe;z-index: -1}#cloud:after {width: 100px; height: 100px;top: -50px; left: 50px;-webkit-border-radius: 100px;}#cloud:before {width: 180px; height: 180px;top: -90px; right: 50px;-webkit-border-radius: 200px;}.shadow {width: 360px;position: absolute; bottom: -10px;background: #000;z-index: -1;-webkit-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);-webkit-border-radius: 50%;}</style></head><body><div id = "cloud"><span class='shadow'></span></div></body></html>
If you need any help feel free to leave a comment (or) contact me.
No comments:
Post a Comment