Базовый анимированный значок меню
Сложность - ЛЕГКО
Языки - HTML, CSS, JS
🖥 Читать статью 🖥
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#html #css #javascript
Сложность - ЛЕГКО
Языки - HTML, CSS, JS
🖥 Читать статью 🖥
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#html #css #javascript
Telegraph
Базовый анимированный значок меню с помощью CSS и JavaScript
ШАГ 1 Добавляем HTML:
Эффект ввода текста
Сложность - ЛЕГКО
Языки - HTML, JS
🖥 Читать статью 🖥
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#javascript #html
Сложность - ЛЕГКО
Языки - HTML, JS
🖥 Читать статью 🖥
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#javascript #html
Telegraph
Эффект ввода текста с помощью JavaScript
ШАГ 1 Добавляем HTML:
Интересные теги HTML:
1) Тег <CODE> предназначен для отображения одной или нескольких строк текста, который представляет собой программный код.
2) Тег <BLOCKQUOTE> предназначен для выделения длинных цитат внутри документа. Текст, отображается как выровненный блок с отступами слева и справа.
3) Тег <DEL> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.
4) Тег <XMP> отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины. Пока тег <XMP> не закрыт, все теги внутри него отображаются как обычный текст.
5) Тег <ABBR> указывает, что символы являются аббревиатурой. С помощью параметра title дается расшифровка сокращения, что позволяет понимать аббревиатуру.
6) Тег <ADDRESS> предназначен для хранения информации об авторе. Планируется, что поисковые системы будут анализировать содержимое этого тега для сбора информации.
#теги #html
1) Тег <CODE> предназначен для отображения одной или нескольких строк текста, который представляет собой программный код.
2) Тег <BLOCKQUOTE> предназначен для выделения длинных цитат внутри документа. Текст, отображается как выровненный блок с отступами слева и справа.
3) Тег <DEL> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.
4) Тег <XMP> отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины. Пока тег <XMP> не закрыт, все теги внутри него отображаются как обычный текст.
5) Тег <ABBR> указывает, что символы являются аббревиатурой. С помощью параметра title дается расшифровка сокращения, что позволяет понимать аббревиатуру.
6) Тег <ADDRESS> предназначен для хранения информации об авторе. Планируется, что поисковые системы будут анализировать содержимое этого тега для сбора информации.
#теги #html
Часто задаваемый вопрос: "Как подключить CSS к HTML коду?"
Способ 1. Отдельный CSS файл.
Самый распространенный способ подключения CSS - это когда он хранится в отдельном файле. Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество. Чтобы подключить CSS файл к HTML странице, в теге head следует написать такую конструкцию:
Способ 2. CSS внутри тега style.
Второй способ заключается в том, что CSS код можно написать в теге <style> Его можно размещать как внутри <head>, так и внутри <body>. Недостаток этого способа в том, что CSS код применяется только к одной странице сайта. Этот способ обычно применяется тогда, когда нужно написать CSS на конкретной странице сайта, не затрагивая остальных. Пример:
#css #html
Способ 1. Отдельный CSS файл.
Самый распространенный способ подключения CSS - это когда он хранится в отдельном файле. Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество. Чтобы подключить CSS файл к HTML странице, в теге head следует написать такую конструкцию:
<link rel="stylesheet" href="путь к CSS файлу">. Сам CSS файл должен быть с расширением .css. Обычно его называют style.css.Способ 2. CSS внутри тега style.
Второй способ заключается в том, что CSS код можно написать в теге <style> Его можно размещать как внутри <head>, так и внутри <body>. Недостаток этого способа в том, что CSS код применяется только к одной странице сайта. Этот способ обычно применяется тогда, когда нужно написать CSS на конкретной странице сайта, не затрагивая остальных. Пример:
<style> p {color: red;} </style>#css #html
Классическая змейка
Сложность - СРЕДНЕ
Языки - HTML, JS, CSS
🖥 Читать статью 🖥
В этой статье Вы прочитаете как сделать классическую змейку, просто и понятно, с использованием canvas.
Справка
Тег <canvas> - создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры.
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#css #javascript #html #игры
Сложность - СРЕДНЕ
Языки - HTML, JS, CSS
🖥 Читать статью 🖥
В этой статье Вы прочитаете как сделать классическую змейку, просто и понятно, с использованием canvas.
Справка
Тег <canvas> - создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры.
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#css #javascript #html #игры
Полезный ресурс.
HTML CSS Палитра цветов
помогает подобрать цвет в виде HEX, RGB, RGBA, HSV и CMYK записи цветовой модели. Нажимайте на поля выбора цвета, а для более точного выбора, перемещайте курсор с зажатой левой кнопкой мыши. Изменяйте параметры цвета через поля ввода. А ещё можно скачать выбранный цвет, в формате SVG, PNG, JPEG или GIF.
Ссылка на данный сайт
#полезныйресурс
HTML CSS Палитра цветов
помогает подобрать цвет в виде HEX, RGB, RGBA, HSV и CMYK записи цветовой модели. Нажимайте на поля выбора цвета, а для более точного выбора, перемещайте курсор с зажатой левой кнопкой мыши. Изменяйте параметры цвета через поля ввода. А ещё можно скачать выбранный цвет, в формате SVG, PNG, JPEG или GIF.
Ссылка на данный сайт
#полезныйресурс
Иконка загрузки
Сложность - ЛЕГКО
Языки - HTML, CSS
ШАГ 1
Добавляем HTML:
ШАГ 2
Добавляем CSS:
border: определяет размер и цвет границы
border-radius: преобразует иконку в окружность
border-top: вращательный элемент
width height: размер
animation spin 3s linear infinite: анимация бесконечная со скоростью 3
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#css #html
Сложность - ЛЕГКО
Языки - HTML, CSS
ШАГ 1
Добавляем HTML:
<div class="loading"></div>ШАГ 2
Добавляем CSS:
<style>
.loading {
border: 8px solid #AFAFAF;
border-radius: 50%;
border-top: 8px solid black;
width: 60px;
height: 60px;
animation: spin 3s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>border: определяет размер и цвет границы
border-radius: преобразует иконку в окружность
border-top: вращательный элемент
width height: размер
animation spin 3s linear infinite: анимация бесконечная со скоростью 3
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#css #html
Как подключить JavaScript к HTML коду?
Способ 1. JavaScript внутри тега script.
Самый простой способ внедрения JavaScript в HTML. Для этого необходимо добавить парный тег <script>, его часто помещают как внутри <head>, так и внутри <body>. Пример:
Способ 2. Подключение внешнего файла скрипта с кодом.
Обычно такой файл называется script и имеет расширение js. Чтобы подключить JavaScript из внешнего файла, нужно использовать конструкцию
#html #javascript
Способ 1. JavaScript внутри тега script.
Самый простой способ внедрения JavaScript в HTML. Для этого необходимо добавить парный тег <script>, его часто помещают как внутри <head>, так и внутри <body>. Пример:
<script> alert("JavaScript подключен"); </script>Способ 2. Подключение внешнего файла скрипта с кодом.
Обычно такой файл называется script и имеет расширение js. Чтобы подключить JavaScript из внешнего файла, нужно использовать конструкцию
<script src="путь к файлу скрипта/script.js"></script>. Как правило, скрипты подключаются в области <head> документа.#html #javascript