[Перевод] CSS сolor-сontrast(): пошаговое руководство

Если вы испытывали раздражение из-за невозможности легко перемещаться по сайту, с высокой вероятностью вы столкнулись с недоступностью в том или ином виде. Недоступность и неприятные впечатления от использования схожи. Если вам сложно прочитать мелкий шрифт, то человеку с нарушениями зрения, возможно, вообще не прочитает его. Функция color-contrast() используется для удобства чтения, придания необходимого контраста между текстом и фоном на веб-странице. Это особенно важно для людей с…

Подробнее

[Перевод] 12 важнейших сайтов для освоения CSS в 2023 году

Хотите войти в веб-разработку, но не знаете, с чего начать? Освоение CSS станет отличным стартом и, к счастью для вас, в сети существует огромное количество учебных ресурсов. Мы провели исследование и собрали 12 наиболее актуальных сайтов, которые помогут вам продвинуться от уровня новичка до профессионала по CSS за кратчайшие сроки. Будь вы начинающий программист или опытный, на этих сайтах есть информация для всех уровней: от полноценных учебных пособий до памяток и фрагментов кода.

Подробнее

[Перевод] Руководство по реализации отзывчивого дизайна в 2023 году

Сегодня построение отзывчивых макетов уже не основывается на контрольных точках (breakpoints) с фиксированной шириной. Вместо этого современные макеты должны работать на устройствах практически любого размера. Однако, к своему удивлению, я всё ещё встречаю сайты, где используется паттерн отзывчивого дизайна – когда присутствует контейнер, получающий новое значение max-width в соответствии с шириной области просмотра. Термин «отзывчивый» сегодня отражает уже очень многое. У нас есть…

Подробнее

[Перевод] Градиентные тени на CSS

Мне часто задают вопрос: Возможно ли создать тени из градиентов, а не из сплошных цветов? В СSS не существует конкретного свойства для этого (поверьте мне, я проверял), а в любом посте по этой теме содержится только множество хитростей для того, чтобы получить что-то похожее на градиент. В этой статье я расскажу вам о некоторых из них. Но для начала… ещё одна статья о градиентных тенях? Серьёзно? Читать дальше →

Подробнее

[Перевод] CSS-селектор :has() и междустрочные интервалы в длинных текстах

Если вы работали с сайтами, содержащими много длинных текстов, особенно с сайтами на CMS, где пользователи работают в WYSIWYG-редакторе, то вы наверняка писали CSS для управления междустрочными интервалами между различными элементами типографики — заголовками, параграфами, списками и т. д. Читать дальше →

Подробнее

[Перевод] 3D-слайдер на CSS

Напишем слайдеры изображений на чистых HTML и СSS. Меняем только CSS, разметка в HTML остается неизменной. Внешний вид из-за разного CSS при этом разительно различается, а в слайдеры можно вставить неограниченное число картинок. Сначала мы создали круговой слайдер с бесконечным вращением, похожий на виджет-спиннер с изображениями. Затем мы сделали слайдер, пролистывающий стопку фотографий. Продолжение — к старту курса по Fullstack-разработке на Python. Читать дальше →

Подробнее

[Перевод] Создаём веб-сайт, как будто сейчас 1999 год

Раньше веб был более странным местом В прошлом году я поставила перед собой цель вернуть дух старого веба, креативность и шарм конца 90-х и начала 2000-х. В те времена не было правил, ты ставил на веб-страницу что угодно, потому что это было твоё пространство, в котором можно делать всё, что пожелаешь. И для целого поколения Интернет-пользователей наличие собственного веб-сайта было признаком крутости. Именно так обстояли дела тогда, в эпоху до появления социальных сетей и web 2.0, о…

Подробнее

[Перевод] Как сделать динамические цвета в CSS

Когда говорим «динамический», подразумеваем JavaScript. Но некоторые динамические функции можно реализовать, используя только CSS. Например, цвета. Читать далее

Подробнее

[Перевод] Разбираемся в анимациях и временных переходах в CSS

Анимация — несколько рисунков, показанных последовательно, чтобы создать иллюзию движения. Анимации привлекают внимание пользователей и помогают сделать интерфейсы понятными. Мы подготовили перевод статьи, чтобы разобраться, как контролировать движения и переходы в CSS. Читать далее

Подробнее

Простые, но приятные и воздушные тени вместе с Vue Box Shadows

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

Подробнее

[Перевод] 58 байтов CSS, которые выглядят красиво почти где угодно

При создании своего веб-сайта я хотел найти простой и разумный способ сделать его красивым на большинстве дисплеев. Для моих задач подошли следующие 58 байтов: main { max-width: 38rem; padding: 2rem; margin: auto;} Давайте их разберём. Читать дальше →

Подробнее

[Перевод] Провал Tailwind, инструмента для невежд

Привет, Хабр! Не так давно в нашем блоге вышел перевод статьи «Взлет и падение Bootstrap». Как указали в комментариях наши читатели, вскоре после публикации оригинального материала на Medium, на том же ресурсе появилось и опровержение. Чтобы вы могли оценить обе точки зрения, публикуем перевод этой статьи. Поскольку материал получился крайне объемным, мы решили разбить статью-опровержение на две части. По традиции, будем рады вашим комментариям и дополнениям! Позиция редакции может не

Подробнее