Архив рубрики ‘css’

• 

  Переключение на изображения высокого разрешения для полноэкраного режима

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

  Далее... Нет комментариев »
• 

  Использование единиц измерения CSS в зависимости от ситуации

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

  Далее... Нет комментариев »
• 

  Создание стилей для посещенных ссылок с использованием SVG

  По соображениям безопасности браузер ограничивает возможности CSS для задания стилей посещенным ссылкам всего четырьмя свойствами: цветом, цветом фона, цветом рамки и цветом подчеркивания. В то время как обычные ссылки могут выглядеть намного разнообразней, исходя из желаний дизайнера, строгие ограничения на задание стилей посещенным ссылкам может создать у пользователя плохое понимание того, что именно они уже [...]

  Далее... Нет комментариев »
• 

  Создание таблицы стилей для сброса для кода CSS и HTML5

  Ранее мы уже рассказывали о сбросах для кода CSS и практике по обнулению всех значений браузера по умолчанию или подразумевающихся значениях для свойств CSS. В целом мы против сбросов для кода CSS, которые «уничтожают» абсолютно все: на наш взгляд такой подход с использованием огромного количества селекторов для обнуления требует слишком много работы. Так что нам больше нравится умеренный, [...]

  Далее... Нет комментариев »
• 

  Интересные типографические эффекты с использованием росчерков шрифтов OpenType

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

  Далее... 10 Комментариев »
• 

  Создание эффекта отбрасывания тени с использованием CSS и SVG

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

  Далее... Нет комментариев »
• 

  Использование единиц измерения rem

  Веб-разработчики, идущие в ногу со временем, уже перешли от традиционной абсолютной системы создания веб-страниц, использовавшей пиксели и поинты, к современной адаптивной, использующей единицы измерения em и проценты. Использование относительных единиц измерения позволяет создать цельную веб-страницу, в которой все взаимосвязано, а также хорошо масштабируется, что делает веб-страницу по-настоящему адаптивной.

  Далее... Нет комментариев »
• 

  Создание классических типографских эффектов: перенос слов

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

  Далее... Нет комментариев »
• 

  Использование селекторов псевдоклассов

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

  Далее... 12 Комментариев »