Free Figma Template: Food delivery

🧠 Difficulty: 🥕🥕

#Figma #Template

🔧 Creating color palettes with the CSS color-mix() function

The color-mix() function allows us to specify the two colors we want to mix and then outputs the result. We can control the amount of each color in the mix, as well as the color interpolation space, which determines how the colors blend together.

We specify the amount of each color as percentages. If we omit the percentages of both colors, color-mix() will use 50% for each by default. As shown below, mixing red and blue in equal parts gives us a purple hue as expected.

.result {
  background-color: color-mix(in srgb, blue, red);
}

🔧 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