css Archives - PHPCODER.TECH

How To, HTML/CSSAugust 7, 2019June 3, 2020

Media Query CSS for Desktop, Tablet, Mobile

What is Media Queries in CSS? Media queries are the CSS features used to develop responsive websites. Means media queries help to adapt web page content to different sizes according to screen resolutions. They are responsible for responsive web design and used to customize the web page design or web design for multiple resolution devices. […]

HTML/CSSJune 15, 2019June 3, 2020

Infinite Loader Using HTML and CSS

During website designing we can make it more impressive by using CSS preloader. During the ajax call preloader can be a important features for monitoring Ajax request. Here, today we cover about pre-loaders which are useful for making a beautiful website design. Most of the websites covered the loading process with many animated preloaders. Some […]

HTML/CSSFebruary 26, 2019June 3, 2020

Pure CSS animated Preloader

Hello Coders, today I will show you something which is very impressive for our website. Which is entertain your website visitors. This is pure CSS preloader which you can use for your site to increase website speed and optimization. go below for a live view So let’s start, Loading.html


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

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

</ul>

</section>

</body>

</html>

Here is the main file, […]

HTML/CSSFebruary 20, 2019June 3, 2020

Pure CSS3 Animated Car

Hello Coders, today I will show you something interesting with animation using CSS3 and HTML. You can use this code for making something new or your own. See below for the demo. I hope you guys are like it. If you have any problem with this code or anything which is not understandable please comment […]

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/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 […]