✅ Прозрачность изображения
Свойство opacity позволяет задавать прозрачность элемента.
Принимает значения от 0 до 1 включительно, где 1 - полная непрозрачность.
По своему функционалу это свойство похоже на visibility, однако является более гибким и позволяет задавать разный процент прозрачности.
@code_ready | #cвойство #css
Свойство opacity позволяет задавать прозрачность элемента.
Принимает значения от 0 до 1 включительно, где 1 - полная непрозрачность.
По своему функционалу это свойство похоже на visibility, однако является более гибким и позволяет задавать разный процент прозрачности.
@code_ready | #cвойство #css
👍38😁11🔥6
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Адаптивный текст на CSS
Адаптивный дизайн обеспечивает оптимальное отображение на различных устройствах, включая мобильные телефоны и планшеты.
• Метатег viewport, задающийся внутри тега <head> позволяет браузеру правильно масштабировать изображение под ширину экрана.
• Медиавыражения же(@media) позволяют проверить ширину страницы, и в зависимости от заданного условия применить вложенный css
@code_ready | #css #обучение
Адаптивный дизайн обеспечивает оптимальное отображение на различных устройствах, включая мобильные телефоны и планшеты.
• Метатег viewport, задающийся внутри тега <head> позволяет браузеру правильно масштабировать изображение под ширину экрана.
• Медиавыражения же(@media) позволяют проверить ширину страницы, и в зависимости от заданного условия применить вложенный css
@media screen and (min-width: 600px) {
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr;
column-gap: 5%;
}
}@code_ready | #css #обучение
👍55🔥16😁4
0514 (1)(4).gif
3.3 MB
✅ Готовые шаблоны
Плагин HTML/CSS/JavaScript Snippets для VSCode позволяет ускорить процесс написания кода, предоставляя готовые шаблоны и фрагменты кода
@code_ready | #плагин
Плагин HTML/CSS/JavaScript Snippets для VSCode позволяет ускорить процесс написания кода, предоставляя готовые шаблоны и фрагменты кода
@code_ready | #плагин
🔥40👍14👎1
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Список дел - To Do List
Данный код представляет собой готовый пример реализации To Do List на чистом JavaScript.
При пустом вводе не будет происходить ничего, так как основной код работает, при условии что строка не пустая
@code_ready | #обучение #js
Данный код представляет собой готовый пример реализации To Do List на чистом JavaScript.
При пустом вводе не будет происходить ничего, так как основной код работает, при условии что строка не пустая
<h2>Мои задачи</h2>
<div>
<input type="text" id="noteInput" placeholder="Введите задачу...">
<button onclick="addNote()">Добавить задачу</button>
</div>
<ul id="noteList"></ul>
Готовый JavaScript код, я оставляю в комментариях под этим постом (т.к его немало)
@code_ready | #обучение #js
👍39🔥12
✅ Вариации свойства animation в CSS
В шпаргалке указаны все основные методы свойства animation, а также все значения, которые принимают эти свойства.
inherit — Значение наследуется от родительского элемента.
initial — Устанавливает значение по умолчанию.
@code_ready | #шпаргалка #css
В шпаргалке указаны все основные методы свойства animation, а также все значения, которые принимают эти свойства.
inherit — Значение наследуется от родительского элемента.
initial — Устанавливает значение по умолчанию.
@code_ready | #шпаргалка #css
👍38🔥10👎2
✅ Преобразование элементов с transform
Свойство transform в CSS позволяет изменять положение, размеры и форму элементов на веб-страницах.
Может принимать следующие значения:
• translate (x, y) — перемещает элемент по осям X и Y на заданное количество пикселей
• rotate (angle) — поворачивает элемент на заданный угол в градусах
• scale (x, y) — масштабирует элемент по осям X и Y на заданное значение
• skew (x, y) — наклоняет элемент по осям X и Y на заданный угол в градусах
• transform-origin — изменяет точку, относительно которой происходят преобразования
@code_ready | #свойство #css
Свойство transform в CSS позволяет изменять положение, размеры и форму элементов на веб-страницах.
Может принимать следующие значения:
• translate (x, y) — перемещает элемент по осям X и Y на заданное количество пикселей
• rotate (angle) — поворачивает элемент на заданный угол в градусах
• scale (x, y) — масштабирует элемент по осям X и Y на заданное значение
• skew (x, y) — наклоняет элемент по осям X и Y на заданный угол в градусах
• transform-origin — изменяет точку, относительно которой происходят преобразования
@code_ready | #свойство #css
👍42😁7🔥6
0517.gif
2.5 MB
✅ Splashed Toast Notifications
Всплывающие уведомления о помощи, успешном выполнении, предупреждении и ошибке. Написано без использования JavaScript
👨💻 Готовый код: Ссылочка
@code_ready | #кодпен
Всплывающие уведомления о помощи, успешном выполнении, предупреждении и ошибке. Написано без использования JavaScript
@code_ready | #кодпен
Please open Telegram to view this post
VIEW IN TELEGRAM
👍38🔥14👎1
✅ Вопрос с собеседования
Что означает ключевое слово this в JavaScript?
Ответ:
В JavaScript, this — это ссылка на какой-то объект. То, на что, ссылается this, может меняться в зависимости от контекста вызова.
• В общем контексте, this ссылается на глобальный объект (в браузере это объект window).
• Внутри объектного метода, this ссылается на сущность, которая вызвала этот метод.
• При использовании конструктора, this ссылается на новую созданную сущность.
• При использовании методов call(), apply() или bind() ,можно явно задать значение this.
@code_ready | #собеседование
Что означает ключевое слово this в JavaScript?
Ответ:
• В общем контексте, this ссылается на глобальный объект (в браузере это объект window).
• Внутри объектного метода, this ссылается на сущность, которая вызвала этот метод.
• При использовании конструктора, this ссылается на новую созданную сущность.
• При использовании методов call(), apply() или bind() ,можно явно задать значение this.
В данном примере this.brand внутри метода getBrand() ссылается на свойство brand объекта car, так как он его вызвал
@code_ready | #собеседование
👍46🔥12
✅ Шпаргалка для CSS Grid
CSS Grid Layout — представляет собой двумерную систему сеток в CSS. Это пересекающийся набор горизонтальных и вертикальных линий, образующих колонки и строки.
@code_ready | #css #шпаргалка
CSS Grid Layout — представляет собой двумерную систему сеток в CSS. Это пересекающийся набор горизонтальных и вертикальных линий, образующих колонки и строки.
@code_ready | #css #шпаргалка
👍62🔥14👎4😁2
✅ GitHub's VS Code themes
GitHub Theme — это плагин для VSCode, который приносит внешний вид GitHub в вашу среду разработки. Этот плагин предлагает как светлую и тёмную темы, так и другие ихние оттенки, позволяя вам выбрать ту, которая подходит вашему стилю и предпочтениям.
@code_ready | #плагин
GitHub Theme — это плагин для VSCode, который приносит внешний вид GitHub в вашу среду разработки. Этот плагин предлагает как светлую и тёмную темы, так и другие ихние оттенки, позволяя вам выбрать ту, которая подходит вашему стилю и предпочтениям.
@code_ready | #плагин
🔥28👍6👎2
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Создание печатающего эффекта
Typing effect на чистом CSS.
.typing-demo устанавливает ширину блока для текста и создает анимацию typing, которая плавно расширяет его до конца. Затем анимация blink мигает границей, чтобы придать тексту более реалистичный вид.
@code_ready | #практика #css
Typing effect на чистом CSS.
.typing-demo устанавливает ширину блока для текста и создает анимацию typing, которая плавно расширяет его до конца. Затем анимация blink мигает границей, чтобы придать тексту более реалистичный вид.
<div class="wrapper">
<div class="typing-demo">@code_ready for you!</div>
</div>
.typing-demo {
width: 21ch;
animation: typing 2.5s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2rem;
}
@keyframes typing {
from {width: 0;}}
@keyframes blink {
50% {border-color: transparent;}}@code_ready | #практика #css
🔥52👍14
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Горячие клавиши для быстрой верстки
• Ctrl + Shift + K — Удаляет текущую строку целиком.
• Ctrl + / — Закомментирует или раскомментирует текущую строку.
• Shift + ← / → / ↓ / ↑ — Позволяет выделять текст в направлении, указанном стрелкой.
@code_ready | #клавиши
• Ctrl + Shift + K — Удаляет текущую строку целиком.
• Ctrl + / — Закомментирует или раскомментирует текущую строку.
• Shift + ← / → / ↓ / ↑ — Позволяет выделять текст в направлении, указанном стрелкой.
@code_ready | #клавиши
👍58🔥12👎3
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Распознавание голоса на JS
Web Speech API позволяет взаимодействовать с голосовыми интерфейсами в ваших веб приложениях. Он состоит из двух частей: SpeechSynthesis (Текст-в-Речь), и SpeechRecognition (Асинхронное распознавание речи)
@code_ready | #обучение #js
Web Speech API позволяет взаимодействовать с голосовыми интерфейсами в ваших веб приложениях. Он состоит из двух частей: SpeechSynthesis (Текст-в-Речь), и SpeechRecognition (Асинхронное распознавание речи)
<h2>Распознавание голоса</h2>
<p id="transcription"></p>
<button id="startRecognitionButton">Запись</button>
const startRecognitionButton = document.getElementById("startRecognitionButton");
const transcription = document.getElementById("transcription");
startRecognitionButton.addEventListener("click", function () {
const recognition = new webkitSpeechRecognition();
recognition.lang = "ru-RU";
recognition.onresult = function (event) {
const transcript = event.results[0][0].transcript;
transcription.textContent = transcript;};
recognition.onerror = function (event) {
console.error("Ошибка распознавания:", event.error);};
recognition.start();});@code_ready | #обучение #js
🔥77👍23
✅ Шпаргалка по сравнению разных типов
Этот небольшой справочник предоставляет основные операции для сравнения различных типов данных в JavaScript. В нем содержатся примеры сравнения чисел, строк, логических значений, объектов, а также особенности сравнения null и undefined. 🔥
@code_ready | #шпаргалка #js
Этот небольшой справочник предоставляет основные операции для сравнения различных типов данных в JavaScript. В нем содержатся примеры сравнения чисел, строк, логических значений, объектов, а также особенности сравнения null и undefined. 🔥
@code_ready | #шпаргалка #js
🔥32👍12
✅ Стилизация списков с помощью list-style-type
Свойство list-style-type в CSS позволяет изменять маркеры (символы или изображения, которые стоят перед каждым элементом списка) у неупорядоченных (ul) и упорядоченных (ol) списков.
Маркированный список:
• none — удаляет маркеры у всех элементов списка
• disc — кружки (по умолчанию для ul)
• circle — пустые кружки
• square — квадраты
Нумерованный список:
• decimal — цифры(по умолчанию для ol)
• decimal-leading-zero — арабские цифры меньше 10 (01,02,03)
• lower-greek — строчные греческие буквы (α, β, γ, δ,...)
• lower-alpha — строчные буквы латинского алфавита
• upper-alpha — прописные буквы латинского алфавита
• lower-roman — римские цифры нижнего регистра
• upper-roman — маркеры заглавных римских цифр
@code_ready | #свойство #css
Свойство list-style-type в CSS позволяет изменять маркеры (символы или изображения, которые стоят перед каждым элементом списка) у неупорядоченных (ul) и упорядоченных (ol) списков.
Маркированный список:
• none — удаляет маркеры у всех элементов списка
• disc — кружки (по умолчанию для ul)
• circle — пустые кружки
• square — квадраты
Нумерованный список:
• decimal — цифры(по умолчанию для ol)
• decimal-leading-zero — арабские цифры меньше 10 (01,02,03)
• lower-greek — строчные греческие буквы (α, β, γ, δ,...)
• lower-alpha — строчные буквы латинского алфавита
• upper-alpha — прописные буквы латинского алфавита
• lower-roman — римские цифры нижнего регистра
• upper-roman — маркеры заглавных римских цифр
@code_ready | #свойство #css
👍52🔥12
0524(7).gif
269.5 KB
✅ Outline-to-Fill Tab Icon Animations
Меню для вашего сайта, с красивыми анимациями при наведении
Реализовано с помощью JavaScript и SCSS(Расширение для CSS)
👨💻 Готовый код: Ссылочка
@code_ready | #кодпен
Меню для вашего сайта, с красивыми анимациями при наведении
Реализовано с помощью JavaScript и SCSS(Расширение для CSS)
@code_ready | #кодпен
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥27👍13👎4
0524(3).gif
2.2 MB
✅ Предпросмотр SVG
Неудобно редактировать SVG файлы при вёрсте? Плагин SVG Previewer предоставляет удобный функционал при работе с ними: изменение масштаба, фона а так же размер файла
@code_ready | #плагин
Неудобно редактировать SVG файлы при вёрсте? Плагин SVG Previewer предоставляет удобный функционал при работе с ними: изменение масштаба, фона а так же размер файла
@code_ready | #плагин
👍43🔥15👎1
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Дополнительный всплывающий текст
Данный код реализует появляющийся фрагмент текста, при нажатии на кнопку "Показать больше", а так же скрытие его, при нажатии на ту же кнопку, но с противоположным функционалом.
@code_ready | #обучение #css #js
Данный код реализует появляющийся фрагмент текста, при нажатии на кнопку "Показать больше", а так же скрытие его, при нажатии на ту же кнопку, но с противоположным функционалом.
<div class="text-container">
<p class="initial-text">Любой текст,изображаемый изначально.</p>
<div class="hide-content hide">
<p>Дополнительный текст "Показать больше".</p>
</div>
<button id="toggle-button" class="toggle-button">Показать больше</button>
</div>
Продолжения кода, а именно CSS и JavaScript я оставил в комментариях под этим постом. Переходи, ставь реакцию и пользуйся) 🔥
@code_ready | #обучение #css #js
🔥57👍18👎3
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Псевдокласс ::selection
Данный подкласс позволяет применять стиль к выделенному элементу. Можно задавать как цвет выделения, так и цвет текста которым он становится при нем.
Принимаемые свойства:
• color — Цвет выделенного текста.
• background-color — Цвет фона выделенного текста.
• cursor — Курсор, отображаемый при выделении текста.
• caret-color — Цвет курсора (мигающей вертикальной линии) при редактировании текста.
• outline — Контур, отображаемый вокруг выделенного текста.
• text-decoration — Текстовое оформление
(например: подчеркивание, перечеркивание)
• text-emphasis-color — Цвет ударных знаков
(например: точки, круги)
• text-shadow — Тень текста
@code_ready | #псевдокласс #css
Данный подкласс позволяет применять стиль к выделенному элементу. Можно задавать как цвет выделения, так и цвет текста которым он становится при нем.
Принимаемые свойства:
• color — Цвет выделенного текста.
• background-color — Цвет фона выделенного текста.
• cursor — Курсор, отображаемый при выделении текста.
• caret-color — Цвет курсора (мигающей вертикальной линии) при редактировании текста.
• outline — Контур, отображаемый вокруг выделенного текста.
• text-decoration — Текстовое оформление
(например: подчеркивание, перечеркивание)
• text-emphasis-color — Цвет ударных знаков
(например: точки, круги)
• text-shadow — Тень текста
@code_ready | #псевдокласс #css
🔥58👍23
Какого метода массива не существует в JavaScript?
Anonymous Quiz
7%
forEach
24%
some
58%
merge
11%
pop
🔥30👍14