Создание классических типографских эффектов: первая висячая строка абзаца
17 мая 2017 | Опубликовано в css | 1 Комментарий »
Обратный абзацный отступ, называемый также втяжкой, — сдвиг начала первой строки абзаца влево по отношению к остальным его строкам. Другими словами, у первой строки абзаца есть отрицательный отступ, и именно таким образом этот эффект создается с помощью кода CSS.
Для начала, создадим разметку HTML:
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. <p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
После этого запишем встроенный или подключенный код CSS:
p { text-indent: -4em; }
Мы сразу столкнемся с проблемой: селектор элемента задаст такой внешний вид всем абзацам. Нам нужно ограничить область применения стилей только первым абзацем. Самый простой способ сделать это — использовать селектор first-of-type, который обращается только к первым элементам данного типа:
p:first-of-type { text-indent: -4em; }
Но это в свою очередь создаст другую проблему: теперь первая строка первого абзаца, вероятно, выйдет за левый край окна браузера. Чтобы уравновесить этот эффект, оттолкнем абзац вправо, используя свойство внешнего левого отступа:
p:first-of-type { text-indent: -4em; margin-left: 6em; }
Вероятно, нам нужно, чтобы у всех абзацев левый край был на одном уровне, так что применим свойство внешнего левого отступа не только к первому, но и ко всем абзацам, и кроме того уравновесим отступы, добавив такой же внешний отступ справа:
p { margin: 6em inital; } p:first-of-type { text-indent: -4em; }
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
- Выбор брокера имеет огромное значение, так как Вам с этим брокером непосредственно работать.
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
Самые комментируемые
- 50 прикольных страниц ошибки 404
90
- Flash и HTML5 для клиентов, разработчиков и пользователей. Откручиваем гайки.
88
- 16 лучших бесплатных графических редакторов
73
- Интервью с fashion-иллюстратором Lilit Sarkisian
64
- 12 сайтов, на которых можно продавать свои работы
62
- Дизайн схемы проезда
62
- 370 экшенов для фотошопа
58
- Как выглядят сайты дизайнерских вузов - их и наши
58