Вёрстка сайтов | HTML, CSS, JS

<legend>

Добавляет заголовок в <fieldset>, который по умолчанию оформляется браузером как текст, органично вписанный в рамку.

<legend> позволяет описать содержимое <fieldset>, но семантически он не является «представителем» заголовков, хотя выполняет схожую функцию. Он не задаёт иерархию, а лишь характеризует контент внутри «своей» группы — как <label> для соответствующего контрола.

Важно, чтобы <legend> был первым дочерним элементом внутри <fieldset>. Если внутри <fieldset> будет больше одного <legend>, отобразится только первый, все остальные отобразятся как обычные блочные элементы:

Посмотреть пример 👨‍💻

#html | #полезности

👍2❤1🔥1🌭1

1.35K views08:05

Какую из операций не поддерживает функция calc()?

Anonymous Quiz

73%

13%

👍3❤1👎1👨‍💻1

281 voters1.28K views12:17

Вёрстка сайтов | HTML, CSS, JS

Javascript:void(0)

Читать 👨‍💻

#js | #полезности

Telegraph

Javascript:void(0): что значит, какие задачи решает?

В языках программирования, включая JavaScript, функции и операторы возвращают данные. В веб-разработке эту особенность нужно учитывать, т. к. интегрированные в виде ссылок веб-приложения могут изменить контент страницы. Чтобы предотвратить возврат данных…

👍3👨‍💻1

1.47K views07:10

Вёрстка сайтов | HTML, CSS, JS

Макет для тренировки (agro practice)

Перейти к макету 🧑‍💻

#макетдлятренировки

🔥2

1.21K views07:05

Вёрстка сайтов | HTML, CSS, JS

Задача на JavaScript:

Необходимо создать программу, которая будет переводить заданный текст на "Роботский язык". Роботский язык - это модифицированный алфавит, в котором все гласные буквы заменяются на "о" и после каждой согласной буквы, кроме "р" добавляется "p" . Например, слово "Программирование" будет переведено на "Пррогрромрмроровронроо".

Задача:
Напишите функцию, которая принимает на вход текстовую строку и возвращает этот текст, переведённый на Роботский язык. Убедитесь, что ваша функция учитывает регистр букв, и сохраняет оригинальную пунктуацию и пробелы.

Пример использования:

console.log(robotLanguage("Программирование")); // выводит "Пррогрромрмроровронроо"
console.log(robotLanguage("Привет, мир!")); // выводит "Прровротр, мрор!"

#домашка

👍3

1.22K views07:05

Вёрстка сайтов | HTML, CSS, JS

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. AR в браузере
2. Javascript:void(0)
3. <legend>

Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. JavaScript Developer
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. Помощник/ученик Web-дизайнера UX/UI (Junior)
3. UX/UI designer

#лучшеезанеделю

👍2

1.31K views07:05

Вёрстка сайтов | HTML, CSS, JS

Как использовать звук на сайтах

Читать 👨‍💻

#полезнаястатья

👍4

1.18K views07:12

Вёрстка сайтов | HTML, CSS, JS

Эффективная работа с тенями и светом в CSS: Добавляем глубину и реалистичность интерфейсу

Привет! Сегодня мы поговорим о том, как можно добавить глубину и реалистичность вашим веб-интерфейсам с помощью теней и света в CSS. Тени — это не просто эффект для создания объема, но и мощный инструмент для улучшения восприятия дизайна. В этом посте мы обсудим, как правильно использовать тени и световые эффекты, чтобы интерфейсы выглядели профессионально и стильно.

Зачем нужны тени в интерфейсе?
Тени помогают:
1. Создавать объем — Тени могут выделять элементы на странице, делая их визуально "поднятыми" над фоном.
2. Улучшать читаемость — Легкие тени на текстах помогают улучшить контраст и восприятие.
3. Добавлять акценты — С помощью теней можно выделить важные кнопки или элементы интерфейса.

Основные CSS-свойства для работы с тенями
1. `box-shadow` — для добавления тени вокруг элементов.
Пример простого использования:

   .box {
       box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
   }

2. `text-shadow` — для добавления теней к тексту.
Пример применения к заголовкам:

   h1 {
       text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
   }

Как создать реалистичные тени?

1. Мягкость и прозрачность
Тени не должны быть слишком резкими или плотными. Используйте мягкие градиенты и полупрозрачные цвета для более естественного эффекта. Например, вместо черного цвета, используйте что-то вроде rgba(0, 0, 0, 0.2).

2. Используйте несколько слоев
Для создания более сложных и реалистичных теней можно комбинировать несколько теней в одном элементе. Например:

   .box {
       box-shadow: 
           2px 2px 5px rgba(0, 0, 0, 0.2),
           5px 5px 10px rgba(0, 0, 0, 0.1);
   }

3. Правильное направление света
Выберите одно основное направление "света" для всего интерфейса. Например, если свет падает сверху слева, тени должны быть направлены вниз вправо. Это создаст гармонию и реалистичность интерфейса.

Работа со светом: Как добавить "сияние" элементам

1. Использование градиентов
Градиенты могут имитировать свет, падающий на элементы. Например, вертикальный градиент может сделать объект выглядящим более объемным:

   .button {
       background: linear-gradient(to bottom, #fff, #e0e0e0);
   }

2. Сияние с помощью `filter`
Используйте свойство filter: drop-shadow() для создания более сложных световых и теневых эффектов:

   .box {
       filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.4));
   }

3. Эффект "внутреннего света"
С помощью box-shadow можно создать эффект внутреннего свечения:

   .element {
       box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
   }

Советы для создания идеальных теней и света

- Контраст: Тени должны быть достаточно заметными, чтобы выделять элементы, но не чрезмерными.
- Цвет тени: Избегайте черных теней. Используйте цвет, который слегка отличается от основного фона.
- Анимация: Используйте плавные переходы для появления и исчезновения теней, чтобы интерфейс казался более "живым":

   .box {
       transition: box-shadow 0.3s ease;
   }

Заключение
Тени и свет — это мощные инструменты для создания глубины и реалистичности в вашем интерфейсе. Экспериментируйте с размерами, прозрачностью и направлением теней, чтобы сделать ваш дизайн более современным и выразительным. Помните, что в веб-дизайне важно чувствовать баланс и не перегружать интерфейс, сохраняя его чистым и интуитивным.

#какэтосделать

👍8🔥2

1.3K views07:05

Вёрстка сайтов | HTML, CSS, JS

Grid Attack - игра для изучения css grid

Перейти на сайт 👨‍💻

#полезности

👍5

1.28K views07:05

Вёрстка сайтов | HTML, CSS, JS

Микрофронтенды

Читать 👨‍💻

#полезнаястатья

Telegraph

Микрофронтенды

Что такое микро-фронтенды? Микро-фронтенды – это архитектурный стиль, при котором фронтенд-приложение разбивается на отдельные модули, каждый из которых отвечает за свою часть функциональности. Эти модули могут разрабатываться разными командами и быть написаны…

🔥3❤1