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. […]
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 […]
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!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> |
Here is the main file, […]
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 […]
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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> |
On this […]
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!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> |
Rotation.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
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); } } |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!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> |
CSS Source: animate.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
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 […]
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!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> |
CSS Code: ghost.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
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 […]