HTML/CSS Archives - Page 4 of 4

HTML/CSSFebruary 18, 2019June 3, 2020

Image hover effect- fill color on image using CSS and HTML

Hello Coders, two I will show you some interesting with CSS and HTML, which you want to see sometimes on your mind. So I hope you guys are like it. Let’s start, First we create a .html file named, ColorChange.html

<!DOCTYPE html>
<html>
<head>
<title>Color Change</title>
<link rel="stylesheet" type="text/css" href="colorchange.css">
</head>
<body>
<section>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Color Change</title>

</head>

<body>

<ul>

</ul>

</section>

</body>

</html>

Now check the main part which is CSS, if you want you can scrap […]

HTML/CSSFebruary 17, 2019June 3, 2020

Glowing Animated text using CSS and HTML5

Hello Coders, after some days i develop another interesting thing called Glowing Text using CSS and HTML5. I hope you all are like it and give some comments and tell some improvements about the tech. So let’s get started to see what i do with CSS and Html5, see below code, Glowing.html


<!DOCTYPE html>
<html>
<head>
<title>Glowing Text</title>
<link rel="stylesheet" type="text/css" href="glowing.css">
</head>
<body>
<h1>
<span>D</span>
<span>I</span>
<span>V</span>
<span>A</span>
<span>K</span>
<span>A</span>
<span>R</span>
</h1>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Glowing Text</title>

</head>

<body>

<h1>

</h1>

</body>

</html>

On this […]

HTML/CSS, PHP BeginnersFebruary 14, 2019January 14, 2021

Show Preloader Using Jquery

Hello Coders, today i will show you how you can Show Preloader Using jQuery. With click on single link you can show a preloader. Follow code below, Source Code of Show Preloader Using jQuery

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
var myVar;

//here is a Div ID of the link</strong></span>
$( "#myDiv" ).click(function() {
myFunction(this);
});

//call loader with loader div ID</strong></span>
function myFunction(div) {
$("#loader").toggle();
$(div).toggle();
setTimeout(function(){
window.location = "https://phpcoder.tech";
}, 3000);
}

});
</script>
</head>
<body>
<button id="myDiv">Go to Website</button>
<div id="loader" style="display:none;padding:150px">
<img src="https://i.pinimg.com/originals/78/e8/26/78e826ca1b9351214dfdd5e47f7e2024.gif" width="250px" height="200px">
</div>
</body>
</html>

<html>

<head>

$(document).ready(function(){

var myVar;

//here is a Div ID of the link</strong></span>

$( "#myDiv" ).click(function() {

myFunction(this);

});

//call loader with loader div ID</strong></span>

function myFunction(div) {

$("#loader").toggle();

$(div).toggle();

setTimeout(function(){

window.location = "https://phpcoder.tech";

}, 3000);

}

});

</script>

</head>

<body>

<button id="myDiv">Go to Website</button>

</div>

</body>

</html>

Copy and paste this code in your code Editor save with .html extension and run on your browser. Code Explanation: […]

HTML/CSSFebruary 13, 2019June 3, 2020

CSS transform property with 3D Box Rotation

Hello Coders, here is the another interesting thing using CSS transform, See below, 3D Box Rotation using Transform CSS Source: Rotation.html


<!DOCTYPE html>
<html>
<head>
<title>Rotation</title>
<link rel="stylesheet" type="text/css" href="rotation.css">
</head>
<body>
<div class="box">
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Rotation</title>

</head>

<body>

<div>

</div>

</body>

</html>

Rotation.css


body{
margin: 0;
padding: 0;
background: #03a9f4;
}
.box{
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 150px);
height: 300px;
width: 300px;

//See here how thats work and change according to you for magical difference 
transform-style: preserve-3d;
transform: perspective(1000px) rotateX(-10deg);
}
.box div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: animate 5s linear infinite;
}
.box div span{
position: absolute;
top: 100px;
left: 100px;
display: block;
width: 70%;
height: 70%;
background: linear-gradient(#ffffff, #a7a7a7, #ffffff);
}
.box:before{
content: '';
position: absolute;
bottom: -150px;
left: 0;
width: 100%;
height: 50%;
background:#000;
filter: blur(40px);
opacity: 0.25;

}
.box div span:nth-child(1){
transform: rotateX(0deg);
}
.box div span:nth-child(2){
transform: rotateY(90deg);
}
.box div span:nth-child(3){
transform: rotateX(270deg);
}
.box div span:nth-child(4){
transform: rotateX(90deg);
}
@keyframes animate{
0%{
transform: perspective(1000px) rotateY(0deg);
}
100%{
transform: perspective(1000px) rotateY(360deg);
}
}

body{

margin: 0;

padding: 0;

background: #03a9f4;

}

.box{

position: absolute;

top: calc(50% - 150px);

left: calc(50% - 150px);

height: 300px;

width: 300px;

//See here how thats work and change according to you for magical difference

transform-style: preserve-3d;

transform: perspective(1000px) rotateX(-10deg);

}

.box div{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

transform-style: preserve-3d;

animation: animate 5s linear infinite;

}

.box div span{

position: absolute;

top: 100px;

left: 100px;

display: block;

width: 70%;

height: 70%;

background: linear-gradient(#ffffff, #a7a7a7, #ffffff);

}

.box:before{

content: '';

position: absolute;

bottom: -150px;

left: 0;

width: 100%;

height: 50%;

background:#000;

filter: blur(40px);

opacity: 0.25;

}

.box div span:nth-child(1){

transform: rotateX(0deg);

}

.box div span:nth-child(2){

transform: rotateY(90deg);

}

.box div span:nth-child(3){

transform: rotateX(270deg);

}

.box div span:nth-child(4){

transform: rotateX(90deg);

}

@keyframes animate{

0%{

transform: perspective(1000px) rotateY(0deg);

}

100%{

transform: perspective(1000px) rotateY(360deg);

}

HTML/CSSFebruary 10, 2019June 3, 2020

HTML5 CSS Smoke Effect

See the Pen HTML5 CSS Smoke Effect by Bikash Panda (@phpcodertech) on CodePen. Hello Guys, here is another interesting effect using HTML and CSS, review below code and comment below what you think about it. Your work looks like this, HTML Source: animate.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section><video src="Smoke.mp4" autoplay muted></video>
<h1>
<span>P</span>
<span>H</span>
<span>P</span>
<span>C</span>
<span>O</span>
<span>D</span>
<span>E</span>
<span>R</span>
</h1>
</section>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>

</h1>

</section>

</body>

</html>

CSS Source: animate.css

body
{
margin: 0;
padding: 0;
}
section{
height:100vh;
background: #000;
}
section:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, red , yellow,#FF8700, yellow, red);
mix-blend-mode: color;
pointer-events: none;
}
video{
object-fit: cover;
height: 100%;
width: 100%;
}
h1{
margin: 0;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: #ddd;
font-size: 5em;
font-family: sans-serif;
letter-spacing: 0.2em;
}
h1 span{
display: inline-block;
animation: animate 1s linear forwards;
}
@keyframes animate{
0%{
opacity: 0;
transform: rotateY(90deg);
filter: blur(10px);
}
100%{
opacity: 1;
transform: rotateY(0deg);
filter: blur(0px);
}
}
h1 span:nth-child(1)
{
animation-delay:1s;
}
h1 span:nth-child(2)
{
animation-delay:2s;
}
h1 span:nth-child(3)
{
animation-delay:2.5s;
}
h1 span:nth-child(4)
{
animation-delay:3s;
}
h1 span:nth-child(5)
{
animation-delay:3.5s;
}
h1 span:nth-child(6)
{
animation-delay:4s;
}
h1 span:nth-child(7)
{
animation-delay:4.5s;
}
h1 span:nth-child(8)
{
animation-delay:5s;
}

body

{

margin: 0;

padding: 0;

}

section{

height:100vh;

background: #000;

}

section:before{

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-image: linear-gradient(to right, red , yellow,#FF8700, yellow, red);

mix-blend-mode: color;

pointer-events: none;

}

video{

object-fit: cover;

height: 100%;

width: 100%;

}

h1{

margin: 0;

padding: 0;

position: absolute;

top: 50%;

transform: translateY(-50%);

width: 100%;

text-align: center;

color: #ddd;

font-size: 5em;

font-family: sans-serif;

letter-spacing: 0.2em;

}

h1 span{

display: inline-block;

animation: animate 1s linear forwards;

}

@keyframes animate{

0%{

opacity: 0;

transform: rotateY(90deg);

filter: blur(10px);

}

100%{

opacity: 1;

transform: rotateY(0deg);

filter: blur(0px);

}

h1 span:nth-child(1)

{

animation-delay:1s;

}

h1 span:nth-child(2)

{

animation-delay:2s;

}

h1 span:nth-child(3)

{

animation-delay:2.5s;

}

h1 span:nth-child(4)

{

animation-delay:3s;

}

h1 span:nth-child(5)

{

animation-delay:3.5s;

}

h1 span:nth-child(6)

{

animation-delay:4s;

}

h1 span:nth-child(7)

{

animation-delay:4.5s;

}

h1 span:nth-child(8)

{

animation-delay:5s;

}

If anyone wants this background video to […]

HTML/CSSFebruary 10, 2019June 3, 2020

Highlight the image icon when clicked on it

Hello, today I want to show you something interesting ICONS or Highlighted ICONS using CSS, see the code below and suggest to me what other design I can try and what you guys make interesting like this. HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>Check Box</title>
<link rel="stylesheet" type="text/css" href="ghost.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body><span style="color:red;font-size: 20px;"><b>Tap icons to see the effect</b></span>
<!--<span style="color: #008000"><strong>Below These are font awesome icons</strong></span>-->
<ul>
<li>
<label>
<input type="checkbox" name="">
<i class="fa fa-wifi" aria-hidden="true"></i>
<span class="check"></span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="">
<i class="fa fa-bluetooth-b" aria-hidden="true"></i>
<span class="check"></span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="">
<i class="fa fa-volume-control-phone" aria-hidden="true"></i>
<span class="check"></span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<span class="check"></span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="">
<i class="fa fa-battery-three-quarters" aria-hidden="true"></i>
<span class="check"></span>
</label>
</li>
</ul>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Check Box</title>

</head>

<body><span style="color:red;font-size: 20px;"><b>Tap icons to see the effect</b></span>

<ul>

<li>

<label>

</label>

</li>

<li>

<label>

</label>

</li>

<li>

<label>

</label>

</li>

<li>

<label>

</label>

</li>

<li>

<label>

</label>

</li>

</ul>

</body>

</html>

CSS Code: ghost.css

body{
margin: 0px;
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
background-color: #060606;
height:100vh;
}
ul{
position: relative;
margin: 0px;
padding: 0px;
display: flex;
}
ul li{
position: relative;
list-style: none;
width: 100px;
text-align: center;
}
ul li label{
position: relative;
}
ul li label i,
ul li label input[type="checkbox"]
{
display: block;
text-align: center;
}
ul li label i.fa{
font-size: 40px;
color: #222;
transition: 0.5s;
}
ul li label input[type="checkbox"]
{
position: absolute;
opacity: 0;
cursor:pointer;
}
ul li label .check
{
position: relative;
display: block;
width: 50px;
height: 50px;
background: linear-gradient(#000,#333)
border-radius: 50%;
margin: 10px auto 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
ul li label .check:before{
content: '';
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background:#1b1b1b;
transition: 0.5s;
z-index: 3;
}
ul li label .check:after{
content: '';
position: absolute;
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
background: #222;
border-radius: 50%;
z-index: 2;
border: 2px solid #161616;
}
ul li label input[type="checkbox"]:checked ~ .check:before{
background: rgba(0,176,255,1);
box-shadow: 0 0 10px rgba(0,176,255,1),
0 0 15px rgba(0,176,255,1),
0 0 20px rgba(0,176,255,1),
0 0 25px rgba(0,176,255,1),
0 0 0 2px rgba(0,176,255,.1);
}
ul li label input[type="checkbox"]:checked ~ i.fa
{
color: rgb(0,176,255,1);
}

body{

margin: 0px;

padding: 0px;

display: flex;

justify-content: center;

align-items: center;

background-color: #060606;

height:100vh;

}

ul{

position: relative;

margin: 0px;

padding: 0px;

display: flex;

}

ul li{

position: relative;

list-style: none;

width: 100px;

text-align: center;

}

ul li label{

position: relative;

}

ul li label i,

ul li label input[type="checkbox"]

{

display: block;

text-align: center;

}

ul li label i.fa{

font-size: 40px;

color: #222;

transition: 0.5s;

}

ul li label input[type="checkbox"]

{

position: absolute;

opacity: 0;

cursor:pointer;

}

ul li label .check

{

position: relative;

display: block;

width: 50px;

height: 50px;

background: linear-gradient(#000,#333)

border-radius: 50%;

margin: 10px auto 0;

display: flex;

justify-content: center;

align-items: center;

z-index: 1;

}

ul li label .check:before{

content: '';

position: absolute;

width: 8px;

height: 8px;

border-radius: 50%;

background:#1b1b1b;

transition: 0.5s;

z-index: 3;

}

ul li label .check:after{

content: '';

position: absolute;

top: 6px;

left: 6px;

right: 6px;

bottom: 6px;

background: #222;

border-radius: 50%;

z-index: 2;

border: 2px solid #161616;

}

ul li label input[type="checkbox"]:checked ~ .check:before{

background: rgba(0,176,255,1);

box-shadow: 0 0 10px rgba(0,176,255,1),

0 0 15px rgba(0,176,255,1),

0 0 20px rgba(0,176,255,1),

0 0 25px rgba(0,176,255,1),

0 0 0 2px rgba(0,176,255,.1);

}

ul li label input[type="checkbox"]:checked ~ i.fa

{

color: rgb(0,176,255,1);

}

Copy and Paste above code on your Code Editor and see, how […]