Небольшая подборка разнообразных полезных и просто интересных ресурсов:

https://mybrandnewlogo.com/ru/generator-gradienta-cveta - генератор градиента
https://colormixer.web.app - генератор цветовых схем

https://9elements.github.io/fancy-border-radius/ - фигуры с помощью border-radius
https://www.shapedivider.app/ - SVG фигуры/разделители для секций
https://bennettfeely.com/clippy/ - обрезка с помощью CSS свойства clip-path

Генераторы SVG фонов:
https://www.magicpattern.design/tools/css-backgrounds
https://www.noscriptbackgrounds.com/
https://www.visiwig.com/patterns/

https://neumorphism.io/ - генератор эффекта в стиле неоморфизма
https://glassmorphism.com/ - генератор эффекта прозрачного матового стекла (к сожалению, в Firefox пока не включена поддержка свойства backdrop-filter по-умолчанию, поэтому полноценный эффект смотрите в Chrome)

https://animista.net/ - множество CSS анимаций

https://cssvalues.com/ - описание значений CSS свойств - этот ресурс очень понравился, раньше не встречал его

Новое практическое задание ☕️

Попробовать добиться такого же эффекта выделения ссылок, как в примере на видео

Используем только CSS

Результат в ближайшие день/два

Всем привет!

Результат вчерашнего практического задания в виде новой практической статьи :) там же можно скачать архив с результатом

Ссылка на статью - https://frontips.ru/effekt-plavnogo-podcherkivaniya-ssylok-pri-navedenii/

Еще немного практики ☕️

Сделать простую галерею, как в примере на видео, используя только CSS

- высота блока с галереей 600px
- изображения раскрываются при наведении курсора
- изображений может быть разное количество
- дополнительно можно сделать эффект плавного масштабирования изображения

Результат, как обычно, в ближайшие день/два

Всем привет!

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

Ссылка на статью - https://frontips.ru/variant-prostoj-galerei-izobrazhenij-na-flexbox/

Всем привет!

Новое практическое задание ☕️

Задача: стилизовать и анимировать карточки, как в примере на видео

Чтобы не начинать с нуля, сделал начальный шаблон, который можно скачать по ссылке https://frontips.ru/assets/images/practice6/practice6.zip

Результат в ближайшие дни

https://omatsuri.app/ - подборка различных инструментов на одном ресурсе:

- генератор треугольников
- генератор теней для выбранного цвета
- генератор градиентов
- SVG-фигуры
- Сжатие SVG
- преобразование SVG → JSX
- преобразование в BASE64
- генератор случайных данных
- коллекция символов
- генератор текстов
- отображение различных курсоров
- подробная информация о нажатой клавише

Особенно полезен генератор треугольников, чтобы не подгонять размеры вручную, в интерактивном режиме сразу виден результат

А для просмотра и поиска необходимых символов есть другой, более интересный ресурс - https://www.toptal.com/designers/htmlarrows/

Процесс вёрстки/программирования должен быть комфортным, и визуальная/аудиальная составляющие не менее важны, чем физические(рабочий стол, кресло, клавиатура, мышь и тд)

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

https://coding-fonts.css-tricks.com/ - выбираем шрифт
https://www.vscolors.com/ - выбираем тему (темы представлены для VSCode, но эти же темы можно найти и для других редакторов)

Мне больше всего приглянулись тема One Dark и шрифт Fira Code, которые использую уже довольно длительное время

В аудиальном плане в процессе вёрстки отдаю предпочтение тишине или нейтральной lofi музыке. Недавно появился эстетически приятный проект - https://lofi.cafe/. Если вам тоже нравится lofi музыка - рекомендую

Всем привет!

Результат и описание нюансов недавнего практического задания снова оформил в небольшой статье

Ссылка на статью - https://frontips.ru/psevdo-3d-effekt-pri-navedenii-na-kartochku/

В коллекцию потрясающих ресурсов - бесплатные, лаконичные и максимально полезные

https://htmlreference.io - гид по HTML элементам

https://cssreference.io/ - визуальный гид по CSS свойствам

Всем привет!

Сегодня хотел бы поделиться хорошим плагином для создания parallax-эффекта

RELLAX.js - плагин написан на чистом JavaScript, минифицированная версия весит всего около 7кб, довольно прост в использовании

Если будет возможность, постараюсь написать статью с примером использования данного плагина

Ссылка на страницу плагина - https://dixonandmoe.com/rellax/

Решил не откладывать надолго статью с примером использования плагина Rellax

В дополнение к параллакс эффекту, в примере будем использовать CSS-переменные

Надеюсь, будет полезно ;)

Ссылка на статью - https://frontips.ru/parallaks-effekt-na-osnove-plagina-rellax/

Удивляет, сколько полезных бесплатных ресурсов можно найти по вёрстке/фронтенду

Один из таких ресурсов - https://www.30secondsofcode.org/ (англоязычность ресурса не должна смущать, так как HTML/CSS/JS код от этого менее понятным не становится ;)

С большинством задач, которые встречаются вам при вёрстке/frontend-разработке, уже сталкивались другие разработчики, и очень приятно, что некоторые из них делятся решениями этих задач

Такие ресурсы экономят время при разработке, так как можно просто адаптировать уже готовое решение под вашу конкретную задачу

Немного попрактикуемся ;)

Задача: добиться поведения как в примере на видео
- стилизовать и анимировать круг на заднем плане
- стилизовать карточки как в примере (обратите внимание на полупрозрачный низ карточки)
- при наведении курсор заменяем на полупрозрачный круг (ищем подсказки здесь - https://www.30secondsofcode.org/css/s/mouse-cursor-gradient-tracking)

Начальный шаблон - https://frontips.ru/assets/images/practice7/practice7.zip

Результат через несколько дней

Всем привет!

Опубликовал статью с результатом последнего практического задания

Буду рад, если найдете для себя что-то полезное :)

Ссылка на статью - https://frontips.ru/gradientnaya-prozrachnost-kartochek-transformaciya-kursora-pri-navedenii/

Привет, друзья!

Сделал простой дизайн-макет, можете смело забирать и верстать для практики/портфолио

Ссылка на макет - https://www.figma.com/community/file/981156126929894622/Lorenzo-Anderson---Professional-Photografer

Но чтобы это не было очередным проходным макетом, проведем эксперимент - желающим предлагаю ревью/обзор вашей вёрстки этого макета на платной основе или можно сразу получить уже готовую вёрстку за символическую плату (например, чтобы сравнить или подсмотреть решение), подробнее здесь - https://telegra.ph/Obzorrevyu-vashej-vyorstki-maketa-ili-gotovaya-vyorstka-dlya-sravneniya-06-01

https://wesbos.com/javanoscript - гид по JavaScript для начинающих - это невероятно титанический труд, да еще и в бесплатном доступе. Гид написан на простом английском - дополнительная мотивация и возможность подтянуть свой английский ;)

Также у автора есть отличнейшие бесплатные курсы:

- https://flexbox.io/ - курс из 20 видео по Flexbox c практическими примерами его использования
- https://cssgrid.io/ - около 4 часов видео по CSS Grid
- https://javanoscript30.com/ - практические видео по JavaScript

Уверен, каждый начинающий HTML-верстальщик, время от времени задаётся вопросом, можно ли вкладывать какой-либо HTML-тег в другой. Например, можно ли вложить img или div в тег абзаца p

Чтобы не искать эту информацию в спецификации, есть полезный инструмент-шпаргалка по вложенности тегов - https://caninclude.glitch.me/

Выбираете дочерний и родительский теги и сразу получаете результат

Если вы сейчас на стадии изучения браузерных событий (DOM Events)...

- https://learn.javanoscript.ru/bubbling-and-capturing
- https://wesbos.com/javanoscript/05-events/targets-bubbling-propagation-and-capture
- https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/Events

...то вам может быть полезен интересный инструмент визуализации - https://domevents.dev

Данный инструмент помогает наглядно увидеть порядок выполнения событий, а также понять разницу функций preventDefault(), stopPropagation(), stopImmediatePropagation()

Приветствую!

Получился довольно длительный перерыв в активности канала - к сожалению, некоторые обстоятельства сейчас не позволяют полноценно им заниматься

Последние несколько вечеров трудился над новой объемной статьёй, в которой мы сделаем так называемую бесконечную прокрутку постов (Infinite Scroll), используя Intersection Observer API, Vue.js, Axios

Записи будем получать из ресурса {JSON} Placeholder, используя библиотеку Axios

Для динамической отрисовки полученных записей будем использовать Vue.js

А для отслеживания элементов в видимой области браузера будем использовать Intersection Observer API

А также будут CSS-анимации, CSS-переменные, плавное появление элементов - думаю будет интересно, а главное полезно ;)

Ссылка на статью - https://frontips.ru/variant-beskonechnoj-prokrutki-postov/

В продолжение темы скролла - крутой и несложный в использовании плагин для создания эффектов при скролле

Locomotive Scroll - https://github.com/locomotivemtl/locomotive-scroll

Умеет делать плавный скролл, параллакс эффект, отслеживать элементы в видимой области браузера, фиксировать элементы при прокрутке и так далее...

Пара примеров применения:

- https://locomotivemtl.github.io/locomotive-scroll/

- https://nfq.group/