Записи, помеченные ‘верстка’

• 

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

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

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

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

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

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

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

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

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

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

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

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

  Использование селекторов first-of-type, first-child и nth-of-type

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

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

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

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

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

  Затемнение изображений простым и быстрым способом на чистом CSS

  Этот способ можно считать несколько устаревшим из-за наличия режимов наложения фона, хотя режимы наложения не поддерживаются во всех версиях браузеров Internet Explorer и Edge, многих мобильных браузерах и только частично поддерживается в браузерах Safari, так что этот способ можно использовать как обходной путь.

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

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

  Иногда нам может быть нужно, чтобы у блока был фон, состоящий не из одного изображения, а из нескольких не повторяющихся изображений, как в примере ниже. Конечно, можно просто совместить эти изображения в одном файле в редакторе изображений, например, таком как Photoshop, аккуратно обрезать, выбрать подходящую степень сжатия и сохранить в формате JPEG или PNG-8. 

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

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

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

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