Navigation

    Cyberian
    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Pro Blog
    • Users
    • Groups
    • Unsolved
    • Solved
    Quiz 100% Result
    • How to make this illumination effect with CSS

      Leader Leader

      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

      Web Designing
    • How to HTML Image Link

      M
      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:

      “<a>” is link tag. “href” attribute sets URL to link to. “<img>” 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. “</a>” is the link end tag.
      Web Designing

    How to make this illumination effect with CSS

    Web Designing
    css effect with css illumination illumination effect illumination effect with css
    2
    2
    5
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Leader Leader
      Leader Leader last edited by zaasmi

      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

      1 Reply Last reply Reply Quote 0
      • zaasmi
        zaasmi Cyberian's Gold last edited by

        You can increase the background-size (500px in this example) to increase transition smoothing.

        const e = document.getElementsByClassName('scan')[0];
        const hidden = document.getElementsByClassName('hidden')[0];
        
        document.onmousemove = function(event) {
          e.style.left = `${event.clientX}px`; //               ↓ background width (500px) / 2
          hidden.style.setProperty("--pos", `${event.clientX - 250}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;
        }
        
        .hidden {
          background: radial-gradient(dodgerblue 10%, #031321 50%) var(--pos) 50% / 500px 500px no-repeat fixed;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        
        <div class="banner">
          <div class="scan"></div>
          <div class="description">
            Just <span class="hidden">hidden</span> something
          </div>
        </div>
        
        1 Reply Last reply Reply Quote 0
        • First post
          Last post

        50% Off on Your FEE Join US!

        Quiz 100% Result If you want to know how you can join us and get 50% Discout on your FEE ask Cyberian in Chat Room! Quiz 100% Result Quiz 100% Result
        solution1241 discussion1194 fall 2019813 assignment 1425 assignment 2295 spring 2020265 gdb 1246 assignment 382 crw10174 spring 201955
        | |
        Copyright © 2021 Cyberian Inc. Pakistan | Contributors
        Live Chat