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;

}