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

• 

  Альтернатива галерее изображений Lightbox на чистом CSS

  Нам никогда особо не нравился плагин для создания галереи изображений Lightbox, так что в этом уроке мы предложим свой способ создания подобной галереи изображений. Эффект, создаваемый с помощью вышеупомянутого плагина, знаком буквально всем, так как это один из первых популярных JavaScript-плагинов для создания галерей, так что варианты этой идеи быстро приобрели широкое распространение. К сожалению, в [...]

  Далее... 1 Комментарий »
• 

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

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

  Далее... 1 Комментарий »
• 

  Использование селектора элемента в CSS

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

  Далее... 1 Комментарий »
• 

  Создание более плотных абзацев с использованием переноса слов CSS3

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

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

  Использование цветовой модели RGB в CSS

  Хотя цветовая модель RGB менее компактна в записи кода CSS, чем шестнадцатеричная, зато ей намного проще управлять напрямую через JavaScript, именно RGB используется в  JavaScript для возвращения информации о цвете элементов, независимо от того, каким способом им был задан цвет в коде CSS, поэтому так полезно разобраться именно с этой цветовой моделью. 

  Далее... 1 Комментарий »
• 

  Использование изображений в формате DataURI

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

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

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

  Элемент горизонтального разделителя <hr> - один из наиболее редко и неправильно используемых в коде HTML, возможно, из-за того, что он не выглядит привлекательно в исходном состоянии. При использовании его без задания свойств на веб-странице, он выглядит следующим образом:

  Далее... 1 Комментарий »
• 

  Использование селекторов last-child и last-of-type в CSS

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

  Далее... 1 Комментарий »
• 

  Фоновые изображения для экранов Retina с использованием свойства задания изображения

  Хотя отображение изображений, относящихся к содержимому, на экранах высокого разрешения хорошо поддержано в HTML5 и CSS, включая новый элемент для больших изображений, а также атрибуты srcset и sizes, фоновым изображениям для экранов Retina почти не уделялось внимания, и для них не появлялось новых возможностей отображения. Так как фоновые изображения часто довольно большие и по разрешению и по размеру файла, это особенно неприятно. [...]

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