Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

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

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

Перевод — Дежурка

Смотрите также:




Комментарии

  1. Merziuz
    Thumb up Thumb down 0

    PmbsZ1 pills2sale.com viagra online

    Ответить

  2. Arianna
    Thumb up Thumb down 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.

    Ответить

  3. Edgardo
    Thumb up Thumb down 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.

    Ответить

  4. Numbers
    Thumb up Thumb down 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?

    Ответить

  5. Elliot
    Thumb up Thumb down 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.

    Ответить

  6. Genaro
    Thumb up Thumb down 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.

    Ответить

  7. Vanessa
    Thumb up Thumb down 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.

    Ответить

  8. Bobby
    Thumb up Thumb down 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.

    Ответить

  9. Bobbie
    Thumb up Thumb down 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.

    Ответить

  10. Unlove
    Thumb up Thumb down 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.

    Ответить

  11. Noah
    Thumb up Thumb down 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.”

    Ответить

  12. Rodolfo
    Thumb up Thumb down 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.

    Ответить

  13. Philip
    Thumb up Thumb down 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.

    Ответить

  14. Carrol
    Thumb up Thumb down 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. "

    Ответить

Оставить ответ


− 6 = два

Вставить изображение