DevGang
Авторизоваться

Красочные типографские эксперименты

В последнее время проводились интересные эксперименты, связанные с типографикой. Я пытался придумать такую шутку, как «что-то в потомках», но я просто не могу найти что-то, что встанет на ноги, и мне будет легко противостоять.

Codrin Pavel cоздал увлекательный яркий шрифт CSSans, дизайн которого разработан его сестрой Изабеллой Андронаке!

Плавный скроллинг при помощи CSS

В прошлом году, создавая страницу продукта FilePond, я наткнулся на API scrollIntoView. Это удобный метод указывает браузеру прокрутить элемент в окне просмотра.

Анимированный Fluid CSS градиент для текста

CSS предоставляет возможность создавать потрясающую анимацию. Разработчики не только делают великолепные произведения цифрового искусства, но также дают нам возможность добавлять гибкие элементы дизайна прямо к нам на веб-страницы. Недавно я включил CSS-градиентную анимацию во многие ссылки на мои блоги, чтобы придать им живой, плавный вид. Смотрите как преобразился модуль «Recent essays» ниже на гифке

https://res.cloudinary.com/practicaldev/image/fetch/s--izmoDRPj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/dgbkiccdcmzkaaqjp78l.gif

Полезные функции CSS Media Query 

Типичный медиа-запрос состоит из медиа-типа (screen, print, speech и т.д.) и одного или нескольких выражений, включающих медиа-функции, которые могут принимать значения true или false.

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

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

Атрибут CSS :placeholder-shown

Одним из первых плагинов, который появился в новом фреймворке на ранних этапах разработки на JavaScript, был placeholder плагин, поэтому мы так обрадовались приходу, атрибута placeholder в HTML5. Тогда любители CSS, вроде меня, были в восторге от того, что спецификация CSS позволила нам стилизовать плэйсхолдеры.

Не так давно я столкнулся с проблемой, когда хотел применить специфичный шрифт font-family  к элементу , только лишь тогда, когда он был заполнен (содержал) текст. Изначально я планировал установить шрифт font-family на , а затем повторно применить шрифт body's блока для  ::placeholder, но, идеально не вышло - выглядело как будто страницу должны закрыть на техническую доработку. 

Я запостил проблему в Твиттере, надеясь найти лучшее решение, и, к счастью, Факундо Коррадини предложил :placeholder-shown. Атрибут :placeholder-shown предоставлен элементу псевдокласса только тогда, когда он сам появляется, поэтому можно выбрать только placeholder , но не текст ввода:

CSS Grid против Flexbox

Не так давно макет для всех HTML-страниц создавался с помощью таблиц, float элементов и других CSS-свойств, которые плохо подходили для стилизации сложных веб-страниц.

Затем появился flexbox - режим макета, который был специально разработан для создания надежных адаптивных страниц. Flexbox облегчает правильное выравнивание элементов и их содержимого, и в настоящее время является предпочтительной системой CSS для большинства веб-разработчиков.

Адаптивные изображения для Retina дисплеев на HTML5

Так как рост популярности Retina и других дисплеев высокой четкости возрастает, веб-разработчикам сейчас как никогда важно использовать изображения высокой четкости. Для достижения этого существуют разные способы, некоторые из которых я описал в статье. Мы рассмотрим следующие способы:

Работаем с паттерном Sass/SCSS 7–1 в Angular 7

Паттерн 7–1 входит в общую архитектуру Sass и рекомендуется к использованию проектом Sass Guidelines Project. А вот и основная структура:

Центрирование в CSS с помощью Flexbox

Центрирование элементов на странице, особенно вертикальное центрирование, в прошлом было сложно сделать с CSS, и нам приходилось делать ряд хаков. К счастью, Flexbox все упрощает, и теперь мы можем сосредоточить нашу энергию проектирования на проблемах более высокого уровня.

Каскадные таблицы стилей (CSS) - это язык таблиц стилей, используемый для описания представления документа, написанного на языке разметки. Хотя чаще всего используется для установки визуального стиля веб-страниц и пользовательских интерфейсов, написанных в HTML и XHTML, язык может быть применен к любому XML-документу, включая простой XML, SVG и XUL. Наряду с HTML и JavaScript, CSS - это важная технология, используемая большинством веб-сайтов для создания визуально привлекательных веб-страниц, пользовательских интерфейсов для веб-приложений и пользовательских интерфейсов для многих мобильных приложений.

CSS разработан в первую очередь для обеспечения разделения представления и контента, включая такие аспекты, как макет, цвета и шрифты. Это разделение может улучшить доступность контента, обеспечить большую гибкость и контроль в спецификации характеристик презентации, позволить нескольким страницам HTML делиться форматированием, указывая соответствующий CSS в отдельном файле .css и уменьшая сложность и повторение в структурном контенте.

Присоединяйся в тусовку

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

Попробовать

В подарок 100$ на счет при регистрации

Получить