Cool CSS Tricks
Perhaps the most important aspect of a website (besides the content itself) is how visually appealing it shows on the users’ end. Here, I am going to outline some neat CSS tricks to really get your page to pop.
Text Borders
Want your headers, bulletins, and lists to stand out? Try adding an outline around your text:
h1 {
-webkit-text-stroke: 1px blue;
}
Image rendering
Want to tell the browser how the image should be zoomed in/out? Try using the image-rendering property:
img {
image-rendering: crisp-edges;
}
Customizing Text Selection
If you want the portion that is selected by the user to pop, use a selection pseudo-element:
h3::selection {
background: orange;
color: white;
}
Wavy Underlines
You have something important to say? Make sure it pops with a wavy underline:
p {
text-decoration: underline wavy;
}
Image Carousel
Want a visually appealing way to display multiple images on your site? Use an image carousel:
.container {
scroll-snap-type: x mandatory;
}
.slides {
scroll-snap-align: start;
}
