Explore hidden gems in web design with ’20 CSS Tricks You Probably Didn’t Know About.’ Uncover innovative and lesser-known CSS techniques to enhance your website’s style and functionality.

Ever wondered if there are more cool things you can do with CSS? Join me for a quick look at 20 CSS hidden tricks that could be your secret weapons for making awesome websites. Get ready to learn some new CSS tricks!

1. Smooth Scroll Magic

Make scrolling smooth by adding scroll-behavior: smooth to your HTML. This CSS property smoothens the scrolling behavior for the entire page.

html {
    scroll-behavior: smooth;
}

2. Link Charmers

Give a distinctive look to links starting with “https” by changing their color to red. This is achieved using an attribute selector.

a[href^="https"] {
    color: red;
}

3. Sibling Symphony

Apply styles to paragraphs that come after an h1 element. The ~ selector targets siblings that follow a specified element.

h1 ~ p {
    color: yellow;
}

4. The Rebel :not()

Style list items that don’t have the class “special” with italic font.

li:not(.special) {
    font-style: italic;
}

5. Responsive Typography with Viewport Units

Make font sizes responsive to the viewport size by using viewport units (vw). In this example, the font size of h1 is set to 15% of the viewport width.

h1 {
    font-size: 15vw;
}

6. :empty Elegance

Hide empty paragraphs using the :empty pseudo-class. This ensures that paragraphs without content are not displayed.

p:empty {
    display: none;
}

7. Variable Visions

Define custom properties (variables) at the root level for easier theming and maintenance. In this case, a main color variable is set and used in styling an h2 element.

:root {
    --main-color: #349832;
}

h2 {
    color: var(--main-color);
}

8. Image Wizardry with Object-fit

Control how images should be resized within their frames using the object-fit property. In this example, the cover value is used to ensure the entire image is visible while maintaining its aspect ratio.

img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

9. Grid Glory

Utilize the power of CSS Grid for simplified and flexible layouts. In this example, a container is set to display as a grid with three columns of equal width.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

10. :focus-within pseudo class

Apply styles to a form when it contains focused elements. The :focus-within pseudo-class selects an element if any of its children have focus.

form:focus-within {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

11. Vertical centering with flexbox

Easily center content both horizontally and vertically within a container using flexbox.

.container {
   display: flex;
   align-items: center;
   justify-content: center;
}

12. Custom highlight color for selections

Customize the highlight color when text is selected on your webpage.

::selection {
   background-color: #ffcc00;
   color: #333;
}

13. Styling placeholder text

Style the placeholder text inside input fields.

::placeholder {
   color: #999;
   font-style: italic;
}

14. Gradient borders

Create gradient borders using the background-clip property.

.element {
   border: 2px solid transparent;
   background-clip: padding-box;
   background-image: linear-gradient(to right, red, blue);
}

15. Variable font sizes with vw

Adjust font size based on the viewport width, allowing for more responsive typography.

body {
   font-size: calc(16px + 1vw);
}

16. Conic gradients for colorful elements

Create colorful and dynamic backgrounds using conic gradients.

.element {
   background: conic-gradient(#ff5733, #33ff57, #5733ff);
}

17. Clamp() function for responsive text

Use the clamp() function to set a range for font size, ensuring readability on different screen sizes.

.text {
   font-size: clamp(16px, 4vw, 24px);
}

18. Efficient font loading with font display swap

Use the font-display: swap; property to improve the performance of web fonts by displaying fallback fonts while the custom font is loading.

@font-face {
   font-family: 'YourFont';
   src: url('your-font.woff2') format('woff2');
   font-display: swap;
}

19. Custom scroll snap points

Implement custom scroll snap points for a smoother scrolling experience, especially useful for image galleries or sliders.

.scroll-container {
   scroll-snap-type: y mandatory;
}

.scroll-item {
   scroll-snap-align: start;
}

20. Variable font styling with font variation settings

Utilize variable fonts and the font-variation-settings property for fine-tuned control over font weight, style, and other variations.

.text {
   font-family: 'YourVariableFont', sans-serif;
   font-variation-settings: 'wght' 500, 'ital' 1;
}

Conclusion

These advanced CSS techniques provide a range of options for creating more interactive, dynamic, and responsive web designs. Experimenting with these features can enhance the visual appeal and functionality of your web projects.