Skip to main content

Glowing Border effect using html/css

 {html code}

<html>

    <head>

        <link href='E:\html\.vscode\.vscode\style.css' type='text/css' rel='stylesheet'>

        <title>Glowing Border</title>

    </head>

    <body>

        <div class='box'>

            <div class='text'>

            <h2><u>Glowing Border</u></h2>

            <p>HTML and CSS are technically not the programming languages, they are the scripting languages. 

            Usually used for the front-end development.</p>

            </div>

        </div>

       

    </body>

</html>



{css code}

body{

    background: black;

    display: flex;


}


.text{

    padding: 30px;

    margin: 10px;

    letter-spacing: 1px;

    box-sizing: border-box;

    color: white;

}


.box{

    top: 20%;

    left: 40%;

    display: flex;

    position: relative;

    width: 300px;

    height: 420px;

    justify-items: center;

    align-items: center;    

    background: rgb(0, 0, 0);

    font-family: 'poppins',sans-serif;

    animation: glow 4s linear infinite;

}


.box::before{

    display: flex;

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    bottom: -2px;

    z-index: -1;

    content: '';

}


.box::after{

    display: flex;

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    bottom: -2px;

    z-index: -1;

    content: '';

    filter: blur(20px);

}


.box::before,

.box::after{

    background: linear-gradient(125deg, #03cdff, #a6ff01);

}

This is how the final product will look!

Note: In the head section(html code) we need to paste the path of the css file in <link> tag as href='paste the path of your css file'.

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Stock Market using Python

 "The stock market is a device for transferring money from the impatient to the patient." - Warren Buffett Today we'll look into few ways for accessing the stock market. And we'll do this using Python ! Now, as we know that there are 2 stock exchange in India; BSE and NSE So we'll get the data from both! To begin with let's access the data from BSE first. (P.S: I certainly like the 2nd and the 3rd method to access stock market!) * So, to import the BSE data we need to " pip install bsedata ". => And then import the module, => Create an object to store the Driver Class => Then we need to do " getQuote('script_code')" where we need to provide a script code of a company which we need to access. Just like here we have given; => And from here we can see that the script code was for the company named "V-MART". But we can't remember all the script code hence we need to download this script file from the BSE websi...
Post a Comment
Read more

Quote and Joke Generator

*This a random quote and jokes generator. #The first one is a random quote generator. You will get a new quote every time you click on the button. #The second one is a random joke generator. You will get a new joke every time you click on the button. For Number Guessing Game : click here //click on the button to get a quote //-author get a quote //click on the button to get a joke get a joke
Post a Comment
Read more