Создание классических типографских эффектов: первая висячая строка абзаца
17 мая 2017 | Опубликовано в css | 15 Комментариев »
Обратный абзацный отступ, называемый также втяжкой, — сдвиг начала первой строки абзаца влево по отношению к остальным его строкам. Другими словами, у первой строки абзаца есть отрицательный отступ, и именно таким образом этот эффект создается с помощью кода 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
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191
14 ноября 2020 в 4:40
PmbsZ1 pills2sale.com viagra online
Ответить
16 ноября 2020 в 2:24
I'd like to tell you about a change of address nursing considerations for amlodipine besylate The Seventh Regiment Band played as the Giants passed title to âThe John T. Brush Stairway, â named in honor of the teamâs late owner, who had died seven months earlier. The passageway is today the last artifact of the stadium where so much New York sports history was made.
Ответить
17 ноября 2020 в 0:10
Wonderfull great site quality meds delivery âItâs just wrong to say we underachieved, ââ says Bob Ojeda, like Darling also a former Mets starter turned SNY analyst. âBecause, to me, the â86 team was never given a chance to win again. When they traded (Kevin) Mitchell and didnât re-sign Ray Knight, those were two guys who gave us that bully mentality that was part of what made us so good.
Ответить
17 ноября 2020 в 0:12
What sort of work do you do? approved pharmacy And isnât he the one who somehow had to explain to everybody â from grumpy media types to broadcast partners losing both viewers and advertising revenues â why the Open was the only Slam without a roof, or at least a plan for one?
Ответить
17 ноября 2020 в 0:49
Which university are you at? best rx promotions "Billions of computers around the world use Adobe software, so if hackers manage to embed malicious code in official-looking software updates they could potentially take control of millions of machines.
Ответить
17 ноября 2020 в 1:52
We're at university together voltaren tablet fiyat "People are clearly surprised and the thinking now is the Fed is going to make sure the economy is on even sounder footing before they start backing off on these purchases, " said Doug Foreman, co-chief investment officer at Kayne Anderson Rudnick Investment Management in Los Angeles.
Ответить
17 ноября 2020 в 1:53
Do you know the address? buy clotrimazole cream 1 However, please note — if you block/delete all cookies, some features of our websites, such as remembering your login details, or the site branding for your local newspaper may not function as a result.
Ответить
17 ноября 2020 в 1:55
I'm retired thuoc lovegra 50mg Most of the strategies boiled down to a bait-and-switch routine. Federal officials said JPMorgan began offering power at extremely low prices the day before it was needed. The prices were low enough to get the ISO to commit to buying the bank's electricity.
Ответить
17 ноября 2020 в 2:33
About a year toxic dose ibuprofen dog Many Americans doubt Obama's willingness to use force against Iran, and many of Iran's Middle Eastern foes do, too. But the Iranian leadership, which wants to have a nuclear capability despite its fantastical protestations to the contrary, is beginning to understand the price it is paying for its atomic desires.
Ответить
17 ноября 2020 в 4:33
I'll put her on buy buspar uk Shareholders have sued Dell officials in federal court inHouston, and at least 20 other Delaware Chancery suits arepending. The investors contend Dell board members are duty-boundto get the top price, and have shirked their responsibilities.
Ответить
17 ноября 2020 в 5:13
Would you like a receipt? cytotec 200 mcg compresse pfizer He has also accused municipal authorities of employing migrants as street cleaners and plumbers âto pocket as much as half of their wages, â and proposed âa ban on migrant labor at state agencies, including for contractors who employ them.â
Ответить
17 ноября 2020 в 7:54
Could I ask who's calling? voltaren forte prijs Hopes for his «Abenomics» prescription of hyper-easy monetary policy, big spending and steps to promote growth pushed up Tokyo share prices and weakened the yen even before his LDP-led bloc won a December poll for the powerful lower house.
Ответить
17 ноября 2020 в 8:41
Yes, I play the guitar ventolin hfa 90 mcg inhaler coupon Unspooling at the Anaheim Convention Center, the weekend-long event kicked off Friday with programming focused around Disney’s upcoming animated ventures. Saturday’s presentation emphasized news from the live-action side of the slate, with titles including Brad Bird’s “Tomorrowland” and the upcoming sequel “Muppets Most Wanted” also receiving a push.
Ответить
17 ноября 2020 в 23:44
I'm not interested in football pantoprazole cvs pharmacy It's not clear where the benefit comes from and the news isn't necessarily a reason to pick up the habit. "If you're already drinking coffee and enjoying it, continue, " says Graf. "If not, there's no reason to start. "
Ответить