Web Designing
2
Topics
5
Posts
simulate a “scan” light that will reveal words in a box, this is my code by now:
const e = document.getElementsByClassName('scan')[0];
document.onmousemove = function(event){
e.style.left = `${event.clientX}px`;
};
*{
margin: 0;
padding: 0;
}
html, body{
width: 100%;
min-height: 100vh;
overflow-x: hidden;
display: flex;
}
.banner{
width: 100vw;
height: 100vh;
display: flex;
flex-grow: 1;
flex-direction: row;
align-items: center;
background-color: #031321;
}
.banner .scan{
width: 7px;
height: 80%;
position: absolute;
left: 30px;
z-index: 3;
transition: left 50ms ease-out 0s;
border-radius: 15px;
background-color: #fff;
box-shadow:
0 0 15px 5px #fff, /* inner white */
0 0 35px 15px #008cff, /* inner blue */
0 0 350px 20px #0ff; /* outer cyan */
}
.banner .description{
width: 100%;
color: white;
font-size: 3em;
text-align: center;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
<div class="banner">
<div class="scan"></div>
<div class="description">
Just trying something
</div>
</div>
1.mp4
HTML image link code
<a href="...../site-logo.png"><img src="site-logo.png" width="82" height="86" title="Cyberian" alt="Cyberian Logo"></a>
Or better use css styling to determine the width and height.
<a href="...../site-logo.png"><img src="site-logo.png" width:82px; height:86px" title="Cyberian" alt="Cyberian Logo"></a>
This code has the following parts:
“” is link tag.
“href” attribute sets URL to link to.
“” the image start.
“src” attribute sets the image file.
“title” attribute sets the image tool-tip text.
“alt” is the image tag alternative text attribute.
“style” attribute sets with “css” with detail size of image “width” and “height” of the image.
“” is the link end tag.
PAK VS BAN Live
File Sharing
