<!DOCTYPE html> <html> <head> <style> ::-moz-selection { /* Code for Firefox */ color: blue; background: yellow; } ::selection { color: blue; background: yellow; text-shadow: 2px 2px 2px grey; } </style> </head> <body> <h1>Select some text on this page:</h1> <p>Hello World…
Learn how to create a responsive cutout text with CSS. cutout text is also known as knockout. Here is a quick example of how you can produce Cutout Effect in CSS. <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <style>…
Here is a complete example of Magnifier Glass when Mouse over the image <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <style> * {box-sizing: border-box;} .img-magnifier-container { position:relative; } .img-magnifier-glass { position: absolute; border: 3px solid #000; border-radius: 50%; cursor:…
How to add CSS Blur Filter into Background Image <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <style> body, html { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; } * { box-sizing: border-box; } .bg-image { /* The image…
@media at-rules, used to target styles at specific media, such as screen or print.A page can then be optimized and laid out completely differently for mobile phones, tablets, and varying browser window sizes. @media screen { body { font: 12px arial, sans-serif } #nav { display: block…
Learn how to create an image gallery that varies between four, two or full-width images, depending on screen size: <!DOCTYPE html> <html> <style> * { box-sizing: border-box; } body { margin: 0; font-family: Arial; } .header { text-align: center; padding:…
The Carousel plugin is a component for cycling through elements, like a carousel (slideshow). <div id=”carouselExampleIndicators” class=”carousel slide” data-ride=”carousel”> <ol class=”carousel-indicators”> <li data-target=”#carouselExampleIndicators” data-slide-to=”0″ class=”active”></li> <li data-target=”#carouselExampleIndicators” data-slide-to=”1″></li> <li data-target=”#carouselExampleIndicators” data-slide-to=”2″></li> </ol> <div class=”carousel-inner”> <div class=”carousel-item active”> <img class=”d-block w-100″…
Why CSS Gradient These are the following reasons to use CSS gradient. You don’t have to use images to display transition effects. The download time and bandwidth usage can also be reduced. It provides better look to the element when…