Show header after scrolling 1st Section on squarespace 7.0 & 7.1 website || jishaansinghal
Show header after scrolling 1st Section on squarespace 7.0 & 7.1 website || jishaansinghal https://youtu.be/ZmzmpynqU3A https://www.fiverr.com/s/BRjKpbb
Posts
CSS 3d Layered Image Hover Effects CSS Isometric Design in 2022 with Source code | jishaansinghal
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; background: #000; overflow: hidden; } .container{ position: relative; width: 240px; height: 400px; margin-top: 150px; background:rgba(0, 0, 0, 0.1); transform: rotate(-30deg) skew(25deg) scale(0.8); } .container img{ position: absolute; width: 100%; height: 100%; transition: .5s; } .container:hover img:nth-child(4){ transform: translate(160px, -160px); opacity: 1; } .container:hover img:nth-child(3){ transform: translate(120px, -120px); opacity: .8; } .container:hover img:nth-child(2){ transform: translate(80px, -80px); opacity: .6; } .container:hover ...
Advanced Button Effects with HTML & CSS in 2022 with full source code | jishaansinghal
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ margin: 0; padding: 0; box-sizing: border-box; background: #03045E; } a{ overflow: hidden; text-decoration: none; text-transform: uppercase; font-size: 30px; list-style-type: none; border: 2px solid #fff; padding: 20px 30px; position: relative; margin-top: 25%; margin-left: 40%; display: inline-block; color: #fff; background: #000; transition: .5s; } a:hover{ background: #fff; color: #000; } a::before{ content: ""; position: absolute; top: 0%; left: -100%; width: 10%; height: 100%; background: #fff; transition: .5s; } a:hover::before{ left: 100%...
Advanced Card border with html & css in 2022 by jishaansinghal
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ margin: 0; padding: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background: #060c21; } .container .box{ position: relative; width: 200px; height: 300px; background: #060c21; display: flex; justify-content: center; align-items: center; border: 1px solid #000; padding: 15px; } .container .box::before{ content: ""; position: absolute; top: -2px; left: -2px; bottom: -2px; right: -2px; background: #fff; transform: skew(2deg,2deg); z-index:-1; } .container .box::before{ background: linear-gradient(315deg,green, #fff); } h2,p{ color: #fff; font-weight: bold; } h2 { ...
Mousemove Eraser Animation with html css and javascript in 2022 source code here | jishaansinghal
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ width: 100%; height: 100vh; background: repeating-linear-gradient(0deg,red 0%, red 50%, green 50%, green 100%),repeating-linear-gradient(90deg,red 0%, red 50%, green 50%, green 100%); background-size: 30px 30px; background-blend-mode: difference; cursor: pointer; } span{ position: absolute; display: block; width: 150px; height: 150px; border-radius: 50%; pointer-events: none; background: url(bg.jpg); background-size: cover; background-attachment: fixed; } </style> </head> <body> <script> document.addEventListener("mousemove", functi...
Target #4 Ups n Downs CSSBattle in 2022 + full sourece code | jishaansingha
<div id="a"> <div id="b"> <div id="c"> <style> * { background: #62306D; } div { width: 100px; height: 100px; background: #F7EC7D; position: absolute; border-radius: 0 0 50px 50px; } #a { top: 50px; left: 150px; transform: rotate(180deg); } #b { top: 150px; left: 50px; } #c { top: 150px; left: 250px;
Target #3 (Push Button) - CSSBattle
<div id="rect"><div id="circle"><style>*{background:#6592CF;}#rect{margin:75px 42px;width:300px;height:150px;background:#243D83;overflow:hidden;}#circle{border-radius:25px;width:50px;height:50px;background:#EEB850;margin:50px auto;box-shadow: 0 0 0 50px #243D83, 0 0 0 100px #6592CF
Target #2 (Carrom) - CSSBattle in 2022 By JishaanSinghal
<div id="a"><div id="b"><div id="c"><div id="d"><style>body{margin:0;background:#62374e;}div{width:50;height:50;background:#fdc57b;position:fixed;}#a{top:50;left:50;}#b{top:50;left:300;}#c{top:200;left:50;}#d{top:200;left:300
Target #1 CSSBattle in 2022 + full source code By jishaansinghal
Source code: <img style=box-shadow:0+0+0+2in#b5e0ba,0+0+0+5in#5d3a3a>