This media is not supported in your browser
VIEW IN TELEGRAM
🔧 CSS TIP
Typing effect
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; }
}👍16❤9
🔊 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).
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();});👍15❤13🔥2
🔧 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:
•
•
•
•
•
•
•
•
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.👍8❤3