Задача на JavaScript:

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

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

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

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

#домашка

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

Лучшие статьи @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

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

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

Читать 👨‍💻

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

Эффективная работа с тенями и светом в 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;
   }
   

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

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

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

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

#полезности

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

Читать 👨‍💻

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

Макет для тренировки (florist man)

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

#практика | #макет

JS Задача: Интерактивный слайдер изображений

Читать 👨‍💻

#домашка

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

Лучшие статьи @free_html_lessons:
1. Работы с тенями css
2. css игра
3. Микрофронтенды

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

Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. UI-UX дизайнер
3. Web-дизайнер

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

CSS модули

Читать 👨‍💻

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

5 полезных инструментов для тестирования веб-доступности

Читать 👨‍💻

#полезности

Как создать собственный CSS-фреймворк

Читать 👨‍💻

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

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

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

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

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

Лучшие статьи @free_html_lessons:
1. Компонентный подход в css
2. Разные способы сделать таймер
3. CSS модули

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

Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. UI-UX дизайнер
3. Web-дизайнер

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

Задача на JavaScript:

У вас есть массив чисел, представляющих высоты столбов. Вам нужно найти максимальную площадь, которую можно охватить, выбрав два столба и протянув между ними горизонтальную линию.

Напишите функцию findMaxArea, которая принимает массив heights в качестве аргумента и возвращает максимальную площадь.

Примеры:

findMaxArea([1, 8, 6, 2, 5, 4, 8, 3, 7]); // Возвращает 49
findMaxArea([4, 3, 2, 1, 4]); // Возвращает 16
findMaxArea([1, 2, 1]); // Возвращает 2

В этой задаче вы должны реализовать алгоритм с наилучшей временной сложностью.

#домашка

Создаем анимации с помощью JavaScript: Используем requestAnimationFrame() для плавного рендеринга

Читать 👨‍💻

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

Загрузка ресурсов: onload и onerror

Читать 👨‍💻

#js | #теория