Remove Firefox link Frame
Firefox shows a dotted frame when clicking on a link.This can be Removed with CSS
a:active, a:focus { outline: 0; }
Center an Element Vertically and Horizontally
Use Flexbox to easily center an element both vertically and horizontally within its container
.container {display: flex; justify-content: center; align-items: center; height: 100vh;}
Smooth Scroll effect
Implement a smooth scroll effect to navigate to the top of your webpage:
html {scroll-behavior: smooth;}
.scroll-to-top {position: fixed; bottom: 20px; right: 20px; text-decoration: none; background-color: #4CAF50; color: white; padding: 10px 15px; border-radius: 8px;}
Sticky Footer
Keep your footer at the bottom of the page even when there’s not enough content to fill the viewport
.page-container {display: flex; flex-direction: column; min-height: 100vh;} .content-wrap {flex: 1;} footer {background-color: #f1f1f1; padding: 1rem;}
Window history.back()
The history.back() method loads the previous URL (page) in the history list.
<button onclick="history.back()"> Go Back</button>
Add a loading image for images
If you have large images on your page that take time to load, you can use the following CSS snippet to load a smaller loading graphic until the full-size pictures appear.
img {background: url(loader.gif); no−repeat 50% 50%;}
Add a shadow to borders or images
This will make your borders and images stand out on your page.
.shadow {box-shadow: 0px 5px 5px rgba(0,0,0,0.4); -moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.4);}
Create a full-screen background
The CSS below will cover your HTML page with the background image.
html {background: url('background-image.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
How to use @font-face
If you use the CSS @font-face rule, you don’t have to use web-safe fonts. You can define a name for the font you can use throughout your CSS file.
@font-face{font-family: 'NameYourRont'; src: url('font-webfont.eot?') format('eot'), url('font-webfont.woff') format('woff'), ('font-webfont.ttf') format('truetype'), url ('font-webfont.svg#svgFontName')
format('svg');}
Navigate with id
Navigate on your Website with id
<button> <a href="#section"></a> </button> <p id="section">test</p>