🔅 CSS: Emmet for CSS

🔧 CSS TIP
Use trigonometric functions in CSS to create a smooth stepped transition delay:

.character {
  transition-delay:
    calc(sin((var(--index) / 12) * 45deg) * 0.475s);
}

👨‍🎨 CSS TIP

shape-outside property in action

.column--left .shape {
  float: right;
  shape-outside: circle(100px at 100% 50%);
}

🔧 CSS TIP

Typing effect

<div class="wrapper">
  <div class="typing-demo">CSS Tips for you!</div>
</div>

.typing-demo {
    width: 17ch; /* Adjust based on the length of your text /
    animation: typing 12s steps(17) infinite, blink 0.5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2rem;
}

/ Typing and erasing animation /
@keyframes typing {
    0% { width: 0; }
    35% { width: 17ch; } / 4s for typing (1/3 of 12s) /
    70% { width: 17ch; } / 5s pause (adding up to 8.4s) /
    100% { width: 0; } / 3.6s for erasing (remaining time) /
}

/ Blinking cursor animation */
@keyframes blink {
    50% { border-color: transparent; }
}

Play video BTN

#animation

Do you know how to name React components using the Base + Composite + Suffix pattern?

You can use this pattern to create clear and consistent component names in your projects.

#React

💎 REACT Tips
Rendering can be avoided by rethinking the component structure and using composition (see gif).

#React