Saturday, August 24
CSS Spin Animation |HTML and CSS

CSS Spin Animation |HTML and CSS

CSS Animation, Web Development
CSS Spin Animation |HTML and CSS   HTML <!DOCTYPE html> <html> <head> <title>Shimmering neon text</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="rainbow"> </div> </body> </html> CSS body { display: flex; justify-content: center; align-items: center; height: 100vh; Background:#000; } ::before, ::after { box-sizing: border-box; } @keyframes rotate { 100% { transform: rotate(1turn); } } .rainbow { position: relative; z-index: 0; width: 400px; height: 400px; border-radius: 50%; overflow: hidden; padding: 2rem; } .rainbow::before { content: ''; position: absolute; z-index: -2; left: -50%; top: -50%; width: 200%; height: 200%; background-color: #399953; background-rep
Pure CSS Rainfall Effect

Pure CSS Rainfall Effect

CSS Animation, Web Development
Pure CSS Rainfall Effect HTML   <!DOCTYPE html> <html> <head> <title> Pure CSS Rain fall Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <section></section> </body> </html> CSS body{ margin: 0; padding: 0'' } section{ position: relative; width: 100%; height: 100vh; background: url(pic.jpg); background-size: cover; animation:color-change 3s linear infinite; } section:before{ content:""; position:absolute; top:0; left:0; width:100%; height: 100%; background: url(rain.png); animation: rain 0.2s linear infinite; } @keyframes color-change{ { 0% 100% filter:hue-rotate(0deg); } 50%{ filter:hue-rotate(360deg); } } @keyframes rai
CSS Shimmering Neon Text Effect

CSS Shimmering Neon Text Effect

CSS Animation, Web Development
CSS Shimmering Neon Text Effect HTML <!DOCTYPE html> <html> <head> <title>Shimmering neon text</title> </head> <body> <div class="neon"> <span class="text" data-text="Welcome">Welcome</span> <span class="gradient"></span> <span class="spotlight"></span> </div> </body> </html> CSS body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; } .neon { position: relative; overflow: hidden; filter: brightness(200%); } .text { background-color: black; color: white; font-size: 180px; font-weight: bold; font-family: sans-serif; text-transform: uppercase; position: relative; user-select: none; } .text::befor...
CSS Responsive Pricing Table

CSS Responsive Pricing Table

Table, Web Development
CSS Responsive Pricing Table HTML <!DOCTYPE html> <html> <head> <title> CSS Responsive Pricing Table</title> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="box"> <div class="title"> <i class="fa fa-paper-plane" aria-hidden="true"></i> <h2>Basic</h2> </div> <div class="price"> <h4><sup>$</sup>10</h4> </div> <div class="option"> <ul> <li><i class="fa fa-check" aria-hidden="true"></i>10 Gb Space</li> <li><i class="fa fa-check" aria-hidden="true"></i>3 Domain Names</li> ...
CSS Moving Glow Border Animation

CSS Moving Glow Border Animation

CSS Animation, Web Development
CSS Moving Glow Border Animation  HTML <!DOCTYPE html> <html> <head> <title> CSS Moving Glow Border Animation</title> <link rel ="stylesheet" href ="style.css"> </head> <body> <div class="block moving-glow"></div> </body> </html> CSS body { margin: 0; padding: 0; background-color: #000; } .block { position: relative; margin: 10% auto 0; width: 50%; height: 400px; background: linear-gradient(0deg, #000, #272727); } .moving-glow:before, .moving-glow:after { content: ''; position: absolute; left: -2px; top: -2px; background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000); background-size: 400%; width: calc(100% + 10px); height: calc(100% + 10px); z-index: ...
Pure CSS Working Calculator

Pure CSS Working Calculator

CSS Animation, Web Development
Hello friends! Are you want to learn a better way HTML and CSS? In this tutorial, I am going to show how to make a working calculator using HTML and CSS only. HTML <!DOCTYPE html> <html> <head> <title> Pure CSS calculator</title> <link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'> <link rel ="stylesheet" href ="style.css"> </head> <body> <div class="wrap"> <fieldset class="container"> <form name="calculator"> <input id="display" type="text" name="display" readonly> <input class="button digits" type="button" value="7" onclick="calculator.display.value += '7'"> <input class="button digits" type="button" value="8" onclick="calculator.display.value += '8'"> <input class="button digit...
CSS Thanos Snap Dispersion On Hover Effects

CSS Thanos Snap Dispersion On Hover Effects

CSS Animation, Web Development
CSS Thanos Snap Dispersion On Hover Effects with HTML and CSS.  HTML <!DOCTYPE html> <html> <head> <title> CSS Thanos Snap Dispersion On Hover Effects</title> <link rel ="stylesheet" href ="style.css"> </head> <body> <div class="img-bx"> <img src="woman.jpg"> <img src="http://cdn.ad.moumou.co.kr/system/etc/noise.png"> </div> </body> </html> CSS body { margin:0; padding:0; display:flex; justify-content:center; align-items:center; min-height:100vh; overflow:hidden; } .img-bx { position:relative; width:600px; height:400px; } .img-bx img:nth-child(1) { position:absolute; top:0; left:0; width:100%; height:100%; } .img-bx:hover img:nth-child(1) { transition:5s; transition-delay:2s; transform:translatex...
3D Carousel Material Design with HTML, CSS, and JQuery

3D Carousel Material Design with HTML, CSS, and JQuery

CSS Animation, Web Development
3D Carousel Material Design with HTML, CSS, and JQuery HTML <!DOCTYPE html> <html> <head> <title> meterial design</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <link rel ="stylesheet" href ="style.css"> </head> <body> <div class="carousel"> <a class="carousel-item" href="#one"><img src="img-1.jpg"> <h2>3D CAROUSEL</h2> </a> <a class="carousel-item" href="#two"><img src="img-2.jpg"> <h2>3D CAROUSEL</h2> </a> <a class="carousel-item" href="#t...
Digital Clock with HTML, CSS, and JavaScript

Digital Clock with HTML, CSS, and JavaScript

CSS Animation, Web Development
Are you looking for a digital clock with HTML, CSS, and JavaScript? In this tutorial, I am going to show you how to create a digital clock using HTML, CSS, and JavaScript. Just copy the given source code and paste into your favorite text editor and run it HTML <!DOCTYPE html> <html> <head> <title> Digital Clock</title> <link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'> <link rel ="stylesheet" href ="style.css"> </head> <body onload="startTime()"> <div id ="clock"></div> </body> </html> CSS body{ background: black; } #clock{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); color:#FFF
Simple Image Crossfade Slideshow – CSS Animation

Simple Image Crossfade Slideshow – CSS Animation

CSS Animation, Uncategorized, Web Development
Before starting you have to make one folder and put four images in this folder which you want to the slideshow. HTML <!DOCTYPE html> <html> <head> <title> Simple Image Crossfade Slideshow - CSS Animation</title> <link rel ="stylesheet" href="style.css"> </head> <body> <div class="wrap"> <ul> <li><img width="800" height="400" src="img-1.jpg"></li> <li><img width="800" height="400" src="img-2.jpg"></li> <li><img width="800" height="400" src="img-3.jpg"></li> <li><img width="800" height="400" src="img-4.jpg"></li> </ul> </div> </body> </html> CSS body { background: gray; } .wrap{ width: 800px; margin: auto; margin-top: 100px; } ul { list-style: none; margin: 0; paddin...