🔧 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);
}

Free Figma Template: Restaurant

🧠 Difficulty: 🥕🥕

#Figma #Template

👨‍🎨 CSS TIP

shape-outside property in action

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

Free Figma Template: Business forum

🧠 Difficulty: 🥕🥕🥕

#Figma #Template

Free Figma Template: Healthy food

🧠 Difficulty: 🥕🥕

#Figma #Template

🔧 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; }
}

🔊 Voice Recognition in JS

The Web Speech API allows interaction with voice interfaces in your web applications. It consists of two parts: SpeechSynthesis (Text-to-Speech) and SpeechRecognition (Asynchronous Speech Recognition).

<h2>Voice Recognition</h2>
<p id="transcription"></p>
<button id="startRecognitionButton">Record</button>

const startRecognitionButton = document.getElementById("startRecognitionButton");
const transcription = document.getElementById("transcription");
startRecognitionButton.addEventListener("click", function () {
  const recognition = new webkitSpeechRecognition();
  recognition.lang = "en-US";
  recognition.onresult = function (event) {
   const transcript = event.results[0][0].transcript;
    transcription.textContent = transcript;};
  recognition.onerror = function (event) {
    console.error("Error:", event.error);};
  recognition.start();});

🔧 Pseudo-class ::selection

This subclass allows you to apply a style to a selected element. You can set both the color of the selection and the color of the text when it is selected.

Accepted properties:

• color — The color of the selected text.
• background-color — The background color of the selected text.
• cursor — The cursor displayed during text selection.
• caret-color — The color of the caret (blinking vertical line) when editing text.
• outline — The outline displayed around the selected text.
• text-decoration — Text decoration (e.g., underline, strikethrough).
• text-emphasis-color — The color of emphasis marks (e.g., dots, circles).
• text-shadow — The shadow of the text.

Free Figma Template: Auto auction participating

🧠 Difficulty: 🥕🥕

#Figma #Template

Free Figma Template: Auto auction participating

🧠 Difficulty: 🥕🥕🥕

#Figma #Template

Progress button animation {Anime.js}

#animation #load #freeCode

Free Figma Template: Airline booking

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template