Posts

Showing posts from November, 2019

Click to animate function in javascript

Image
<!DOCTYPE html> <html> <head> <title> home </title> <script  > function ani(){ let a = document.getElementById( "target" ); a.style.animation = "raj 1s linear infinite" ; } </script> <style > body{ background:black; /* background :  radial-gradient( brown,black); */ /* background: repeating-linear-gradient(to right, #174dd7 , #3897b6); */ } h1{ font-size: 200px; text-align: center; } @keyframes raj { 0%{ background: radial-gradient(red,black);-webkit-background-clip:text; -webkit-text-fill-color:transparent;} 50%{background: radial-gradient(cyan,red);-webkit-background-clip:text; -webkit-text-fill-color:transparent;} 100%{background: radial-gradient(pink,black);-webkit-background-clip:text; -webkit-text-fill-color:transparent;} } a{ background: radial-gradient(black,cyan); margin-left: 50%; padding: 10px; color: white; font-weight: bold; font-size: 20px; border-radius: 20...
Post a Comment
Read more

Put two color name and change background in css and javascript

Image
<!DOCTYPE html> <html lang= "en" > <head>     <meta charset= "UTF-8" >     <meta name= "viewport" content= "width=device-width, initial-scale=1.0" >     <meta http-equiv= "X-UA-Compatible" content= "ie=edge" >     <title> Home </title> </head> <body id= "bg" >     <h1> Input color name </h1>    <input type= "text" id= "in1" >    <input type= "text" id= "in2" > <script> var x =document.getElementById( "in1" ); var y =document.getElementById( "in2" ); var z =document.getElementById( "bg" ); function ram(){ z.style.background = `linear-gradient(to right, ${x.value} , ${y.value})`; } in1.addEventListener( 'input' ,ram);       in2.addEventListener( 'input' ,ram); </script> </body> </html> ...
Post a Comment
Read more

Gradient word color in css

Image
<!DOCTYPE html> <html lang= "en" > <head>     <meta charset= "UTF-8" >     <meta name= "viewport" content= "width=device-width, initial-scale=1.0" >     <meta http-equiv= "X-UA-Compatible" content= "ie=edge" >     <title> Home </title>     <style>     h1{         font-size: 200px;         background: linear-gradient(to right,red , #3727c7);         -webkit-background-clip:text;         -webkit-text-fill-color: transparent;     }     </style> </head> <body>    <h1> Rajnish </h1> </body> </html>
Post a Comment
Read more