Add post about CSS tricks

Author: Claudio Cortese

_posts/2025-01-07-10-css-tricks-to-make-your-site-stand-out.md

@@ -0,0 +1,238 @@
+---
+layout: post
+title: "10 CSS Tricks to Make Your Site Stand Out 🌟"
+tags: tutorial webdev css
+image: /img/posts/css-tricks.jpg
+typewriter-delay: 20
+---
+**CSS** has come a long way! Today, it’s not just about adding colors or arranging elements on a page; it’s about creating visually engaging, interactive, and user-friendly experiences. Here are 10 **CSS** tricks you can use to enhance your site’s design. Whether you're building a portfolio, a business site, or a blog, these **CSS** techniques can help give your website a polished, professional look.
+
+---
+
+## 1. Smooth Hover Animations 🚀
+
+Hover animations can bring a page to life, providing a satisfying interaction when a user points to a button, image, or link. These animations can range from simple color transitions to intricate effects.
+
+### Example: Button Hover Effect
+
+```css
+  button {
+    background-color: #3498db;
+    color: white;
+    padding: 12px 24px;
+    border: none;
+    transition: transform 0.3s ease;
+  }
+
+  button:hover {
+    transform: scale(1.1);
+    background-color: #2980b9;
+  }
+```
+
+When the user hovers over the button, it grows slightly and changes color, creating a dynamic effect that encourages them to click.
+
+---
+
+## 2. Glassmorphism for a Modern Look 💎
+
+Glassmorphism is the trend that gives elements a frosted glass effect, ideal for modern, sleek designs. This can be great for cards, headers, or other UI components.
+
+### Example: Frosted Glass Card
+
+```css
+  .card {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+    backdrop-filter: blur(10px);
+    padding: 20px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+```
+
+This frosted effect looks fantastic over images or colorful backgrounds and makes the text inside the card stand out while maintaining a sophisticated, modern look.
+
+> **Note**: The \`backdrop-filter\` property may not be supported on all browsers. Check compatibility on [Can I use](https://caniuse.com/?search=backdrop-filter).
+
+---
+
+## 3. Responsive Typography with \`clamp()\` 📐
+
+One **CSS** function that often goes under the radar is \`clamp()\`, which helps you set responsive font sizes that adjust across different screen sizes. This means no more jumping between media queries for every breakpoint!
+
+### Example: Responsive Headline
+
+```css
+  h1 {
+    font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
+  }
+```
+
+This **CSS** will adjust the headline size between 1.5rem and 3rem, depending on the viewport width. It's especially handy for making sure text scales nicely on mobile and desktop screens.
+
+> **Note**: The \`clamp\` function is well-supported on most modern browsers, but it’s still worth checking on [Can I use](https://caniuse.com/?search=clamp).
+
+---
+
+## 4. Scroll Snap for Smooth Page Scrolling 🧲
+
+\`scroll-snap\` allows you to create smooth, full-page scrolling effects, perfect for portfolio sites or presentations. It makes scrolling feel natural and controlled by “snapping” to certain elements as you scroll.
+
+### Example: Snap Sections
+
+```css
+  .container {
+    scroll-snap-type: y mandatory;
+    overflow-y: scroll;
+    height: 100vh;
+  }
+
+  .section {
+    scroll-snap-align: start;
+    height: 100vh;
+  }
+```
+
+Each section in this layout will “snap” into place as the user scrolls. It’s a sleek, visually engaging effect that’s surprisingly easy to achieve with **CSS**!
+
+> **Note**: The \`scroll-snap\` property is well-supported on modern browsers but might need a fallback for older ones. See [Can I use](https://caniuse.com/?search=scroll-snap).
+
+---
+
+## 5. Custom Cursors for Fun Interactions 🖱️
+
+Custom cursors can add a unique and playful touch to your website. They can be as subtle or as bold as you like, and they can give users a tactile experience as they navigate.
+
+### Example: Custom Circle Cursor
+
+```css
+  body {
+    cursor: none;
+  }
+
+  .custom-cursor {
+    width: 20px;
+    height: 20px;
+    border: 2px solid black;
+    border-radius: 50%;
+    position: absolute;
+    pointer-events: none;
+    transition: transform 0.1s;
+  }
+```
+
+To use this, you’ll need some JavaScript to track the cursor position. But the result can be an ultra-cool custom cursor that reacts to user movement.
+
+---
+
+## 6. **CSS** Grid for Perfectly Aligned Layouts 🏗️
+
+**CSS** Grid is one of the most powerful tools available to web designers today. It lets you create complex layouts with minimal code. If you need an organized gallery or a detailed layout, **CSS** Grid is your best friend.
+
+### Example: Basic Grid Gallery
+
+```css
+  .gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+  }
+```
+
+With just a few lines of code, you have a fully responsive grid that adjusts automatically based on screen size.
+
+---
+
+## 7. Variable Fonts for Dynamic Typefaces 🖋️
+
+Variable fonts are a fantastic innovation in typography. Instead of loading multiple font weights, a single variable font can adjust its weight, width, and even slant dynamically. This can improve performance and add dynamic elements to your text.
+
+### Example: Using a Variable Font
+
+```css
+  @font-face {
+    font-family: 'Roboto';
+    src: url('Roboto.woff2') format('woff2');
+  }
+
+  .text {
+    font-variation-settings: 'wght' 300; /*Light weight */
+  }
+
+  .text:hover {
+    font-variation-settings: 'wght' 700; /* Bold weight on hover*/
+  }
+```
+
+This lets you adjust font weight without loading multiple versions of the same font, making your site faster while keeping text dynamic.
+
+> **Note**: Variable fonts are supported by most modern browsers. Check compatibility on [Can I use](https://caniuse.com/?search=variable-fonts).
+
+---
+
+## 8. **CSS** Counters for Auto Numbering 🎲
+
+**CSS** Counters let you number items automatically, which is great for lists, sections, or steps in a tutorial. It’s a clean and efficient way to keep everything in order.
+
+### Example: Numbered List of Sections
+
+```css
+  .counter {
+    counter-reset: section;
+  }
+
+  .section::before {
+    counter-increment: section;
+    content: "Section " counter(section) ": ";
+  }
+```
+
+With this setup, each section will automatically number itself, making it easy to add or rearrange sections without updating numbers.
+
+---
+
+## 9. Animations with \`@keyframes\` for Engaging Effects 🎞️
+
+**CSS** animations can transform your site into a lively, engaging experience. With \`@keyframes\`, you can create anything from subtle fades to elaborate animations that draw attention to specific elements.
+
+### Example: Fade-In Animation
+
+```css
+  @keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  .element {
+    animation: fadeIn 1s ease-in-out;
+  }
+```
+
+This simple fade-in effect can be applied to text, images, or other elements. It’s a clean way to draw attention to specific parts of a page as they load.
+
+---
+
+## 10. \`:is()\` and \`:where()\` Selectors for Simpler Code 📜
+
+These new **CSS** selectors help you target multiple elements in a concise way, reducing redundancy in your code. This is particularly useful for simplifying complex selectors, making your **CSS** both shorter and easier to read.
+
+### Example: Targeting Multiple Elements
+
+```css
+  :is(h1, h2, h3) {
+    color: #333;
+    font-family: 'Arial', sans-serif;
+  }
+```
+
+This line of **CSS** applies the same styles to all three heading levels without writing them separately. \`:where()\` is similar, but it doesn’t add to specificity, making it perfect for resets and global styles.
+
+> **Note**: Check \`:is\` and \`:where\` support on [Can I use](https://caniuse.com/?search=is) as they may not be available on some older browsers.
+
+---
+
+## Wrapping Up ✨
+
+**CSS** is more powerful than ever! With these tricks, you can enhance your site’s visuals and improve user interaction without needing a lot of extra code. Try experimenting with these techniques, and watch as your site goes from ordinary to extraordinary.
+
+Let these ideas inspire you to dive deeper into **CSS**, and remember—creativity and attention to detail are what make a site truly memorable. Happy coding!