Watch This Video Till The End
Tuesday, 30 October 2018
Sunday, 28 October 2018
Thursday, 25 October 2018
Friday, 19 October 2018
Wednesday, 17 October 2018
Saturday, 13 October 2018
Friday, 12 October 2018
Html Forms | html registration form code | login form in html | css hove...
How to create Html Forms using html and pure css.
#html
#css
Wednesday, 10 October 2018
Tuesday, 9 October 2018
Monday, 8 October 2018
Sunday, 7 October 2018
css animation 2018 | css leaves animation | svg animation css | html tut...
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Leaf with pattern</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
BODY {
background: #000;
}
.svg {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
.svg--rays {
width: 100%;
height: 100%;
}
.svg--hand {
width: 95vmin;
height: 95vmin;
}
.cell {
fill: maroon;
-webkit-animation: colors 3.5s linear infinite;
animation: colors 3.5s linear infinite;
}
.cell:nth-child(24n + 1) {
-webkit-animation-delay: -11s;
animation-delay: -11s;
}
.cell:nth-child(24n + 2) {
-webkit-animation-delay: -3.5s;
animation-delay: -3.5s;
}
.cell:nth-child(24n + 3) {
-webkit-animation-delay: -9s;
animation-delay: -9s;
}
.cell:nth-child(24n + 4) {
-webkit-animation-delay: -8s;
animation-delay: -8s;
}
.cell:nth-child(24n + 5) {
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
.cell:nth-child(24n + 6) {
-webkit-animation-delay: -7.5s;
animation-delay: -7.5s;
}
.cell:nth-child(24n + 7) {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.cell:nth-child(24n + 8) {
-webkit-animation-delay: -6s;
animation-delay: -6s;
}
.cell:nth-child(24n + 9) {
-webkit-animation-delay: -7.5s;
animation-delay: -7.5s;
}
.cell:nth-child(24n + 10) {
-webkit-animation-delay: -11.5s;
animation-delay: -11.5s;
}
.cell:nth-child(24n + 11) {
-webkit-animation-delay: -7s;
animation-delay: -7s;
}
.cell:nth-child(24n + 12) {
-webkit-animation-delay: -10.5s;
animation-delay: -10.5s;
}
.cell:nth-child(24n + 13) {
-webkit-animation-delay: -2.5s;
animation-delay: -2.5s;
}
.cell:nth-child(24n + 14) {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.cell:nth-child(24n + 15) {
-webkit-animation-delay: -11.5s;
animation-delay: -11.5s;
}
.cell:nth-child(24n + 16) {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.cell:nth-child(24n + 17) {
-webkit-animation-delay: -8s;
animation-delay: -8s;
}
.cell:nth-child(24n + 18) {
-webkit-animation-delay: -3.5s;
animation-delay: -3.5s;
}
.cell:nth-child(24n + 19) {
-webkit-animation-delay: -2.5s;
animation-delay: -2.5s;
}
.cell:nth-child(24n + 20) {
-webkit-animation-delay: -7.5s;
animation-delay: -7.5s;
}
.cell:nth-child(24n + 21) {
-webkit-animation-delay: -5s;
animation-delay: -5s;
}
.cell:nth-child(24n + 22) {
-webkit-animation-delay: -9.5s;
animation-delay: -9.5s;
}
.cell:nth-child(24n + 23) {
-webkit-animation-delay: -4s;
animation-delay: -4s;
}
.cell:nth-child(24n + 24) {
-webkit-animation-delay: -9s;
animation-delay: -9s;
}
@-webkit-keyframes colors {
0% {
fill: maroon;
}
10% {
fill: crimson;
}
20% {
fill: orangered;
}
30% {
fill: gold;
}
40% {
fill: yellowgreen;
}
50% {
fill: skyblue;
}
60% {
fill: steelblue;
}
70% {
fill: slateblue;
}
80% {
fill: darkviolet;
}
90% {
fill: purple;
}
}
@keyframes colors {
0% {
fill: maroon;
}
10% {
fill: crimson;
}
20% {
fill: orangered;
}
30% {
fill: gold;
}
40% {
fill: yellowgreen;
}
50% {
fill: skyblue;
}
60% {
fill: steelblue;
}
70% {
fill: slateblue;
}
80% {
fill: darkviolet;
}
90% {
fill: purple;
}
}
.c-rays {
fill: none;
stroke: #050505;
stroke-width: 100%;
stroke-dasharray: 5%;
-webkit-animation: rotate 20s linear infinite;
animation: rotate 20s linear infinite;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<svg class="svg svg--rays">
<circle r="50%" cx="50%" cy="50%" class="c-rays"></circle>
</svg>
<svg class="svg svg--hand" viewBox="0 0 700 440">
<defs>
<mask id="mask"
maskunits="userSpaceOnUse"
maskcontentunits="userSpaceOnUse">
<image xlink:href="https://img-fotki.yandex.ru/get/9167/5091629.a4/0_8d418_ba8c7e7d_orig"
width="700" height="440"></image>
</mask>
<pattern
id="patt" width="500" height="500"
patternUnits="userSpaceOnUse" viewBox="0 0 100 100">
<rect width="10" height="10"
fill="maroon" class="cell"></rect>
<rect width="10" height="10" x="10"
fill="crimson" class="cell"></rect>
<rect width="10" height="10" x="20"
fill="orangered" class="cell"></rect>
<rect width="10" height="10" x="30"
fill="gold" class="cell"></rect>
<rect width="10" height="10" x="40"
fill="yellowgreen" class="cell"></rect>
<rect width="10" height="10" x="50"
fill="skyblue" class="cell"></rect>
<rect width="10" height="10" x="60"
fill="steelblue" class="cell"></rect>
<rect width="10" height="10" x="70"
fill="darkslateblue" class="cell"></rect>
<rect width="10" height="10" x="80"
fill="darkviolet" class="cell"></rect>
<rect width="10" height="10" x="90"
fill="purple" class="cell"></rect>
<!-- line -->
<rect width="10" height="10"
y="10"
fill="maroon" class="cell"></rect>
<rect width="10" height="10"
x="10" y="10"
fill="crimson" class="cell"></rect>
<rect width="10" height="10"
x="20" y="10"
fill="orangered" class="cell"></rect>
<rect width="10" height="10"
x="30" y="10"
fill="gold" class="cell"></rect>
<rect width="10" height="10"
x="40" y="10"
fill="yellowgreen" class="cell"></rect>
<rect width="10" height="10"
x="50" y="10"
fill="skyblue" class="cell"></rect>
<rect width="10" height="10"
x="60" y="10"
fill="steelblue" class="cell"></rect>
<rect width="10" height="10"
x="70" y="10"
fill="darkslateblue" class="cell"></rect>
<rect width="10" height="10"
x="80" y="10"
fill="darkviolet" class="cell"></rect>
<rect width="10" height="10"
x="90" y="10"
fill="purple" class="cell"></rect>
<!-- line -->
<rect width="10" height="10"
y="20"
fill="maroon" class="cell"></rect>
<rect width="10" height="10"
x="10" y="20"
fill="crimson" class="cell"></rect>
<rect width="10" height="10"
x="20" y="20"
fill="orangered" class="cell"></rect>
<rect width="10" height="10"
x="30" y="20"
fill="gold" class="cell"></rect>
<rect width="10" height="10"
x="40" y="20"
fill="yellowgreen" class="cell"></rect>
<rect width="10" height="10"
x="50" y="20"
fill="skyblue" class="cell"></rect>
<rect width="10" height="10"
x="60" y="20"
fill="steelblue" class="cell"></rect>
<rect width="10" height="10"
x="70" y="20"
fill="darkslateblue" class="cell"></rect>
<rect width="10" height="10"
x="80" y="20"
fill="darkviolet" class="cell"></rect>
<rect width="10" height="10"
x="90" y="20"
fill="purple" class="cell"></rect>
<!-- line -->
<rect width="10" height="10"
y="30"
fill="maroon" class="cell"></rect>
<rect width="10" height="10"
x="10" y="30"
fill="crimson" class="cell"></rect>
<rect width="10" height="10"
x="20" y="30"
fill="orangered" class="cell"></rect>
<rect width="10" height="10"
x="30" y="30"
fill="gold" class="cell"></rect>
<rect width="10" height="10"
x="40" y="30"
fill="yellowgreen" class="cell"></rect>
<rect width="10" height="10"
x="50" y="30"
fill="skyblue" class="cell"></rect>
<rect width="10" height="10"
x="60" y="30"
fill="steelblue" class="cell"></rect>
<rect width="10" height="10"
x="70" y="30"
fill="darkslateblue" class="cell"></rect>
<rect width="10" height="10"
x="80" y="30"
fill="darkviolet" class="cell"></rect>
<rect width="10" height="10"
x="90" y="30"
fill="purple" class="cell"></rect>
<!-- line -->
<rect width="10" height="10"
y="40"
fill="maroon" class="cell"></rect>
<rect width="10" height="10"
x="10" y="40"
fill="crimson" class="cell"></rect>
<rect width="10" height="10"
x="20" y="40"
fill="orangered" class="cell"></rect>
<rect width="10" height="10"
x="30" y="40"
fill="gold" class="cell"></rect>
<rect width="10" height="10"
x="40" y="40"
fill="yellowgreen" class="cell"></rect>
<rect width="10" height="10"
x="50" y="40"
fill="skyblue" class="cell"></rect>
<rect width="10" height="10"
x="60" y="40"
fill="steelblue" class="cell"></rect>
<rect width="10" height="10"
x="70" y="40"
fill="darkslateblue" class="cell"></rect>
<rect width="10" height="10"
x="80" y="40"
fill="darkviolet" class="cell"></rect>
<rect width="10" height="10"
x="90" y="40"
fill="purple" class="cell"></rect>
<!-- line -->
<rect width="10" height="10"
y="50"
fill="maroon" class="cell"></rect>
<rect width="10" height="10"
x="10" y="50"
fill="crimson" class="cell"></rect>
<rect width="10" height="10"
x="20" y="50"
fill="orangered" class="cell"></rect>
<rect width="10" height="10"
x="30" y="50"
fill="gold" class="cell"></rect>
<rect width="10" height="10"
x="40" y="50"
fill="yellowgreen" class="cell"></rect>
<rect width="10" height="10"
x="50" y="50"
fill="skyblue" class="cell"></rect>
<rect width="10" height="10"
x="60" y="50"
fill="steelblue" class="cell"></rect>
<rect width="10" height="10"
x="70" y="50"
fill="darkslateblue" class="cell"></rect>
<rect width="10" height="10"
x="80" y="50"
fill="darkviolet" class="cell"></rect>
<rect width="10" height="10"
x="90" y="50"
fill="purple" class="cell"></rect>
<!-- line -->
<rect width="10" height="10"
y="60"
fill="maroon" class="cell"></rect>
<rect width="10" height="10"
x="10" y="60"
fill="crimson" class="cell"></rect>
<rect width="10" height="10"
x="20" y="60"
fill="orangered" class="cell"></rect>
<rect width="10" height="10"
x="30" y="60"
fill="gold" class="cell"></rect>
<rect width="10" height="10"
x="40" y="60"
fill="yellowgreen" class="cell"></rect>
<rect width="10" height="10"
x="50" y="60"
fill="skyblue" class="cell"></rect>
<rect width="10" height="10"
x="60" y="60"
fill="steelblue" class="cell"></rect>
<rect width="10" height="10"
x="70" y="60"
fill="darkslateblue" class="cell"></rect>
<rect width="10" height="10"
x="80" y="60"
fill="darkviolet" class="cell"></rect>
<rect width="10" height="10"
x="90" y="60"
fill="purple" class="cell"></rect>
<!-- line -->
<rect width="10" height="10"
y="70"
fill="maroon" class="cell"></rect>
<rect width="10" height="10"
x="10" y="70"
fill="crimson" class="cell"></rect>
<rect width="10" height="10"
x="20" y="70"
fill="orangered" class="cell"></rect>
<rect width="10" height="10"
x="30" y="70"
fill="gold" class="cell"></rect>
<rect width="10" height="10"
x="40" y="70"
fill="yellowgreen" class="cell"></rect>
<rect width="10" height="10"
x="50" y="70"
fill="skyblue" class="cell"></rect>
<rect width="10" height="10"
x="60" y="70"
fill="steelblue" class="cell"></rect>
<rect width="10" height="10"
x="70" y="70"
fill="darkslateblue" class="cell"></rect>
<rect width="10" height="10"
x="80" y="70"
fill="darkviolet" class="cell"></rect>
<rect width="10" height="10"
x="90" y="70"
fill="purple" class="cell"></rect>
<!-- line -->
<rect width="10" height="10"
y="80"
fill="maroon" class="cell"></rect>
<rect width="10" height="10"
x="10" y="80"
fill="crimson" class="cell"></rect>
<rect width="10" height="10"
x="20" y="80"
fill="orangered" class="cell"></rect>
<rect width="10" height="10"
x="30" y="80"
fill="gold" class="cell"></rect>
<rect width="10" height="10"
x="40" y="80"
fill="yellowgreen" class="cell"></rect>
<rect width="10" height="10"
x="50" y="80"
fill="skyblue" class="cell"></rect>
<rect width="10" height="10"
x="60" y="80"
fill="steelblue" class="cell"></rect>
<rect width="10" height="10"
x="70" y="80"
fill="darkslateblue" class="cell"></rect>
<rect width="10" height="10"
x="80" y="80"
fill="darkviolet" class="cell"></rect>
<rect width="10" height="10"
x="90" y="80"
fill="purple" class="cell"></rect>
<!-- line -->
<rect width="10" height="10"
y="90"
fill="maroon" class="cell"></rect>
<rect width="10" height="10"
x="10" y="90"
fill="crimson" class="cell"></rect>
<rect width="10" height="10"
x="20" y="90"
fill="orangered" class="cell"></rect>
<rect width="10" height="10"
x="30" y="90"
fill="gold" class="cell"></rect>
<rect width="10" height="10"
x="40" y="90"
fill="yellowgreen" class="cell"></rect>
<rect width="10" height="10"
x="50" y="90"
fill="skyblue" class="cell"></rect>
<rect width="10" height="10"
x="60" y="90"
fill="steelblue" class="cell"></rect>
<rect width="10" height="10"
x="70" y="90"
fill="darkslateblue" class="cell"></rect>
<rect width="10" height="10"
x="80" y="90"
fill="darkviolet" class="cell"></rect>
<rect width="10" height="10"
x="90" y="90"
fill="purple" class="cell"></rect>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#patt)" mask="url(#mask)">
</rect>
</svg>
</body>
</html>
Saturday, 6 October 2018
Wednesday, 3 October 2018
Tuesday, 2 October 2018
Monday, 1 October 2018
Subscribe to:
Posts (Atom)