Posts

Showing posts from January, 2020

Neon

Image
<!DOCTYPE html> <html> <head> <title> Neon HTML </title> </head> <body> <a href =" # "> <span> </span> <span> </span> <span> </span> <span> </span> Neon Button </a> <a href =" # "> <span> </span> <span> </span> <span> </span> <span> </span> Neon Button </a> <a href =" # "> <span> </span> <span> </span> <span> </span> <span> </span> Neon Button </a> </body> </html> <style type =" text/css "> *{ margin: 0px; padding: 0px; font-family: sans-serif; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; flex-d...
Post a Comment
Read more

Reflect

Image
<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <div class =" container "> <img src =" pro-6.jpg "/> <img src =" pro-6.jpg "/> <img src =" pro-6.jpg "/> </div> </body> </html> <style type =" text/css "> *{ margin: 0px; padding: 0px; box-sizing: border-box; font-family: arial; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; } .container{width: 1100px; display: flex; justify-content: space-between;} .container img{max-width: 350px; transform-origin: center; transform: perspective(800px) rotateY(20deg); transition: 0.5s; -webkit-box-reflect:below 1px linear-gradient(transparent,transparent, #0004);} .container:hover img{opacity: 0.1;} .container img:hover{transform: perspective(800px) rotateY(0deg); opa...
Post a Comment
Read more

Lighting

Image
<!DOCTYPE html> <html> <head> <title> Light Mode </title> </head> <body> <h2> <span> L </span> <span> I </span> <span> G </span> <span> H </span> <span> T </span> </h2> </body> </html> <style type =" text/css "> *{ margin: 0px; padding: 0px; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: sans-serif; background: #000; } h2{ font-size: 6em; color: #333; font-weight: 500; } h2 span{ animation: animate 1s linear infinite; } h2 span:nth-child(1){ animation-delay: 0s; } h2 span:nth-child(2){ animation-delay: 0.2s; } h2 span:nth-child(3){ animation-delay: 0.4s; } h2 span:nth-child(4){ animation-delay: 0.6s; } h2 span:nth-child(5){ animatio...
Post a Comment
Read more

Glow Button

Image
<!DOCTYPE html> <html> <head> <title> Button Glow </title> </head> <body> <a href =" # "> Button </a> </body> </html> <style type =" text/css "> body{ margin: 0px; padding: 0px; background: #000; } a{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 60px; text-align: center; line-height: 60px; color: #fff; font-size: 24px; text-transform: uppercase; text-decoration: none; font-family: sans-serif; box-sizing: border-box; background: linear-gradient(90deg, #03a9fa, #f441a5, #ffeb3b, #03a9fa); background-size: 400%; border-radius: 30px; z-index: 1; } a:hover{ animation: animate 8s linear infinite; } @keyframes animate{ 0%{ background-position: 0%; } 100%{ background-position: 400%; } } a:before{ content: ''; position: absolute; ...
Post a Comment
Read more

Loader Wave

Image
\ <!DOCTYPE html> <html> <head> <title> Loader </title> </head> <body> <div class =" loader "> </div> </body> </html> <style type =" text/css "> *{ margin: 0px; padding: 0px; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; } .loader{ position: relative; width: 200px; height: 200px; background: #2196f3; border-radius: 50%; box-shadow: inset 0 0 50px #000; overflow: hidden; } .loader:before{ content: ''; position: absolute; top: -150%; left: -50%; width: 200%; height: 200%; border-radius: 40%; background: #111; opacity: 0.8; animation: animate 12s linear infinite; } @keyframes animate{ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } ...
Post a Comment
Read more

Blur Popup

Image
<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <div class =" container " id =" blur "> <div class =" content "> <h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </h2> <img src =" img.jpg "> <a href =" # " onclick =" toggle() "> Read More </a> </div> </div> <div id =" popup "> <h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </h2> <p> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo c...
Post a Comment
Read more

Bordering

Image
<!DOCTYPE html> <html lang =" xyz "> <head> <title> Creative Div Boxx </title> </head> <body> <div class =" square "> <span> </span> <span> </span> <span> </span> <div class =" content "> <h2> Post Title </h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <a href =" # "> Read More </a> </div> </div> </body> </html> <styl...
Post a Comment
Read more