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

• 

  Использование селекторов 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 Комментариев »
• 

  Простой эффект параллакса с использованием единиц измерения em

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

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

  Создание анимированных раздвигающихся изображений, закрывающих фон

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

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

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

  Селектор :only-of-type используется для обращения к единственному элементу определенного типа, который находится в определенном окружении. В то время как селектор :only-child определяет только, является ли элемент единственным в блоке,  селектор :only-of-type проверяет, является ли элемент единственным элементом своего типа в блоке. Таким образом, если использовать следующую разметку HTML:

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

  Создание понятной и правильной таблицы HTML

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

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