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

Стиль мышления CSS 

Ах да, CSS. Едва ли неделя проходит без того, чтобы это не стало темой жаркой онлайн-дискуссии. Это слишком тяжело. Это слишком просто. Это непредсказуемо. Она устарела.

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

Диагональные блоки в CSS 

Существуют разные способы создания диагональных сечений. В нашем случае мы полагаемся на свойство clip-path.

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

Стилизуем Placeholder с помощью CSS 

Используйте псевдоэлемент ::placeholder для стилизации дефолтного текста в элементе input или textarea. Большинство современных браузеров поддерживают это, но для старых браузеров требуются префиксы.

Как улучшить работу блокировщика рекламы?

Вы видели этот ужас в Фейсбуке?


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

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

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

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 для большинства веб-разработчиков.

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

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

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

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

Попробовать

В этом месте могла бы быть ваша реклама

Разместить рекламу