Главная » Архив меток: CSS 3 (страница 34)

Архив меток: CSS 3

Крутое использование псевдоэлементов CSS ::before и ::after

От автора: я должен признаться: мне нравятся псевдо-элементы CSS ::before и ::after. Они похожи на пару приспешников в каком-то модном приключении. В 3 раза больше силы. В 3 раза больше стилей. В 3 раза больше удивительные визуальных эффектов, которые вы можете создать. Вы никогда не окажетесь в одиночестве — потому что везде, где был один, теперь будут трое Что такое ...

Читать далее »

Наконец-то, решение на чистом CSS для :hover на сенсорных экранах

От автора: с псевдоклассом :hover CSS возникали проблемы с тех пор, как на устройстве с сенсорным экраном был установлен первый веб-браузер. Конечно, появлялись определенные решения, но ни одно из них не было достаточным. С новыми Level 4 Media Queries эта проблема, кажется, решена навсегда. «Хм… а в чем проблема?» Допустим, вы просто добавили к элементу веб-страницы стиль :hover, поэтому он ...

Читать далее »

Руководство по CSS counter

От автора: используйте свойство CSS counter, чтобы превратить любой элемент в нумерованный список. Аналогично тому, как работает тег упорядоченного списка ol. Это очень полезно, если вы создаете сайт документации, где вам нужно автоматически нумеровать заголовки или создавать оглавление. div { /* Определение и инициализация счетчика */ counter-reset: tidbit-counter; } h2::before { /* Увеличение значения счетчика */ counter-increment: tidbit-counter; /* Отображение ...

Читать далее »

Область видимости в CSS

От автора: сегодня мы рассматриваем сложную проблему области видимости CSS. Джаваскриптеры справедливо считают, что тот факт, что все селекторы CSS находятся в глобальной области видимости, усложняет их приложения. Что мы можем с этим поделать? Я написал объяснение ниже. Как обычно, я бы хотел услышать, подходит ли это объяснение для вас или, наоборот, смущает. Глобальная область видимости Любой селектор CSS действителен ...

Читать далее »

Как начать работу с CSS Grid: подробное руководство

От автора: больше похоже на мое медленное продвижение в процессе изучения CSS Grid, руководство просто звучит круче. Когда я заканчиваю свой 10-ый CSS Grid pen* (моя 10-я годовщина, если хотите), я думаю, что могла бы также изложить (ха!) некоторые свои мысли. Может быть, кому-то эти заметки пригодятся? Начало работы Мне всегда становится боязно перед тем, как сделать первый шаг, попробовать ...

Читать далее »

Особенности CSS :visited — почему вы не можете установить размер шрифта для посещенной ссылки

От автора: посещенные ссылки отображаются фиолетовым цветом; непосещенные — отображаются синим. Это различие восходит к началу Интернета. Но можно настроить эту визуальную разницу с помощью псевдо-селектора :visited CSS! Скажем, вы хотите сделать посещенные ссылки серыми и маленькими, чтобы указать пользователю, что эта ссылка «обработана»: a:visited { color: gray; font-size: 6px; } Обратите внимание, что посещенная ссылка выглядит серой, как и ...

Читать далее »

Операторы if и циклы for в CSS

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

Читать далее »

Стоит ли использовать CSS Grid и как убедить в этом свою команду

От автора: вы стремитесь перейти на CSS Grid Layout, но не можете убедить остальных членов команды (ваших коллег или менеджеров)? Кто-то недавно спросил меня, что я могу посоветовать скептически настроенной команде, чтобы они приняли CSS Grid в свой рабочий процесс. Хотя я сам не сталкивался с какими-либо серьезными препятствиями, эту историю я слышу слишком часто. Несмотря на то, что разочаровывает, ...

Читать далее »

Как объединить функции цветов SASS и CSS-переменные

От автора: новый метод, поддерживаемый во всех браузерах, для сохранения в CSS-переменных цветов и изменения их с помощью функций SASS. Переменные CSS великолепны. Мы все это знаем. Значения цветов HSL лучшие. Согласна! Функции цветов SASS потрясающи. Да, естественно. Но как совместить все эти вещи и использовать их СЕГОДНЯ? Способ есть! Мы разработали новый метод для нашего фреймворка, который сочетает в ...

Читать далее »

Адаптивный дизайн и пользовательские свойства CSS: определение переменных и контрольных точек

От автора: пользовательские свойства CSS (или переменные CSS) становятся все более и более популярными. Они наконец достигли достойной поддержки браузерами и постепенно пробиваются в различные производственные среды. Популярность пользовательских свойств не должна вызывать удивления, поскольку они могут быть очень полезны во многих случаях, включая управление цветовой палитрой, настройку компонентов и создание тем. Но переменные также могут быть очень полезны, когда ...

Читать далее »