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

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, мая 17, 2017
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Merziuz
14 ноября 2020 в 4:40
0

PmbsZ1 pills2sale.com viagra online
Ответить
Arianna
16 ноября 2020 в 2:24
0

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.
Ответить
Edgardo
17 ноября 2020 в 0:10
0

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.
Ответить
Numbers
17 ноября 2020 в 0:12
0

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?
Ответить
Elliot
17 ноября 2020 в 0:49
0

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.
Ответить
Genaro
17 ноября 2020 в 1:52
0

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.
Ответить
Vanessa
17 ноября 2020 в 1:53
0

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.
Ответить
Bobby
17 ноября 2020 в 1:55
0

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.
Ответить
Bobbie
17 ноября 2020 в 2:33
0

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.
Ответить
Unlove
17 ноября 2020 в 4:33
0

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.
Ответить
Noah
17 ноября 2020 в 5:13
0

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.â
Ответить
Rodolfo
17 ноября 2020 в 7:54
0

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.
Ответить
Philip
17 ноября 2020 в 8:41
0

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.
Ответить
Carrol
17 ноября 2020 в 23:44
0

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. "
Ответить