10 lesser known CSS tricks part 3

There are more than just 20 CSS tricks that you might haven’t heard about yet. That’s why we dive into part 3 of the lesser known CSS tricks series. I hope you have fun and these tricks will be helpful for improving your web design game. So what are you waiting for?

01. Custom underlines

Customize the style of underlines on links using a combination of border-bottom and text-decoration.

a {
    text-decoration: none;
    border-bottom: 1px solid #3498db;
}

02. Hidden accessibility text

Use the class sr-only to visually hide elements but keep them accessible to screen readers.

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

03. Aspect ratio boxes

Maintain aspect ratio for elements like images or videos by using the padding trick.

.aspect-ratio-box {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* Adjust as needed */
}

.aspect-ratio-box > iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

04. Selecting even and odd elements

Style alternate elements using the :nth-child pseudo-class.

li:nth-child(even) {
    background-color: #f2f2f2;
}

li:nth-child(odd) {
    background-color: #e6e6e6;
}

05. CSS Counter

Use the counter-reset and counter-increment properties to create automatic numbering in lists.

ol {
    counter-reset: item;
}

li {
    counter-increment: item;
}

li::before {
    content: counter(item) ". ";
}

06. Multiple background images

Apply multiple background images to an element with different properties.

.bg {
    background-image: url('image1.jpg'), url('image2.jpg');
    background-position: top left, bottom right;
    background-repeat: no-repeat, repeat-x;
}

07. Hyphens for better text flow

Improve text readability by allowing automatic hyphenation using the hyphens property.

p {
    hyphens: auto;
}

08. CSS variables for dynamic styling

Leverage CSS variables to create dynamic and reusable styles.

:root {
    --main-color: #3498db;
}

.element {
    color: var(--main-color);
}

09. Focus styles for keyboard navigation

Improve focus styles for better keyboard navigation and accessibility.

:focus {
    outline: 2px solid #27ae60;
}

10. Smooth gradient transitions

Apply smooth transitions to gradient backgrounds for a polished effect.

.gradient-box {
    background: linear-gradient(45deg, #3498db, #2ecc71);
    transition: background 0.5s ease;
}

.gradient-box:hover {
    background: linear-gradient(45deg, #e74c3c, #f39c12);
}