Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Необычный бэкграунд... (https://javascript.ru/forum/xhtml-html-css/50675-neobychnyjj-behkgraund.html)

Кирюха =) 07.10.2014 09:52

Необычный бэкграунд...
 
Доброго времени суток. Не знаю каким макаром реализовать вот такой вот фон. . Вообще ума не приложу. пробовал переводить этот элемент в display:inline получаеться вот такая штуковина . Прошу помогите, всю голову себе сломал:cray: :cray: :cray:

Viral 07.10.2014 10:12

http://css-tricks.com/multi-line-padded-text/

hfts_rider 07.10.2014 10:20

А где вы увидели этот пример?

Если брать каждую строку в новый блок, тогда так...
http://learn.javascript.ru/play/oP3fH

Кирюха =) 07.10.2014 10:34

нее брать новую строку в блок это не то....

Кирюха =) 07.10.2014 11:13

Viral, очень сложный пример, там scss. Я сейчас экпериметирую с outline, в мозиле идеально в хроме фигня какая то

Viral 07.10.2014 11:27

Кирюха =),

<style>
.padded-multiline { 
  text-align:right;
  line-height: 1.3; 
  padding: 2px 0; 
  border-right: 20px solid #c0c;
  width: 400px;
  margin: 20px auto;
}
.padded-multiline p { 
  background-color: #c0c;
  padding: 4px 0;
  color: #fff; 
  display: inline;
  margin: 0; 
}
.padded-multiline p span { 
  position: relative;
  right: -10px; 
}
</style>
<div class="padded-multiline">
  <p>
    <span>
      How do I add padding to subsequent lines of an inline text element? How do I add padding to subsequent lines of an inline text element? How do I add padding to subsequent lines of an inline text element? How do I add padding to subsequent lines of an inline text element? How do I add padding to subsequent lines of an inline text element? How do I add padding to subsequent lines of an inline text element? 
    </span>
  </p>
</div>


сложно - нимагу...

Кирюха =) 07.10.2014 12:47

Спасибо. Ты реально меня выручил.... Сам бы я не допер. Очень тебе благодарен.

ruslan_mart 08.10.2014 13:32

http://learn.javascript.ru/play/LhB6gb

<!DOCTYPE HTML>
<html>
  
  <head>
    <style type="text/css">
      .text {
        text-align: right;
        width: 250px;
      }
      .text span {
        background: yellow;
        border: 1px solid yellow;
        outline: 7px solid yellow;
      }
    </style>
  </head>
  
  <body>
    <div class="text">
      <span>How do I add padding to subsequent lines of an inline text element? How do I add padding to subsequent
        lines of an inline text element? How do I add padding to subsequent lines of an inline text element?
        How do I add padding to subsequent lines of an inline text element? How do I add padding to subsequent
        lines of an inline text element? How do I add padding to subsequent lines of an inline text element?</span>
    </div>
  </body>

</html>

Aetae 08.10.2014 13:36

Ruslan_xDD, а теперь посмотри в firefoxe'e.

ruslan_mart 08.10.2014 14:10

Aetae, ох уж этот файрфокс. :)


Часовой пояс GMT +3, время: 18:22.