Bramastra trick

Posts

Showing posts from November, 2019

Click to animate function in javascript

November 17, 2019

<!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

Put two color name and change background in css and javascript

November 16, 2019

<!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>

Gradient word color in css

November 14, 2019

<!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>