» »

Создаем линию вокруг текста на сайте


Если вы решили сделать статью красиво и заголовок к ней, то Создаем линию вокруг текста на сайте вам возможно пригодиться. Также переменятся она в дизайне, это можно посмотреть, здесь на сайте, когда заходите на сайт и там написано "Вход" и по двум сторонам идут линий. Вообщем вы думаю такое встречали, и теперь сами можете сделать, так как идут стили и все основном сделано на них, то есть возможность самим корректировать, что каким цветом или по дизайну будет.

И так начнем, берем домен ZORNET.RU

Код
<h1>ZORNET.RU</h1>


И в CSS:

Код
h1 {  
  overflow: hidden;  
  position: relative;  
  margin: 0;  
  text-align: center;  
  white-space: nowrap;  
}  
h1:before,  
h1:after {  
  content: '';  
  display: inline-block;  
  position: relative;  
  top: -1px;  
  width: 50%;  
  height: 1px;  
  vertical-align: middle;  
  background: black;  
}  
h1:before {  
  left: -10px;  
  margin-left: -50%;  
}  
h1:after {  
  left: 10px;  
  margin-right: -50%;  
}


И так получаются стрелки.
27.10.2015 Просмотров: 341 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Brung
Brung 27.10.2015 23:241
0
Но это же не скрипт, а что то из темы, что интересные решение.
Kosten
Kosten 27.10.2015 23:293
0
А разве там написано скрипт, этот материал даже не в категорий этой.
Brung
Brung 27.10.2015 23:242
0
А так даже не знал, что можно делать.
Сопрано
Сопрано 27.10.2015 23:304
0
Больше интересует h1, обязательно его ставить, или можно поменять и потом в стилях все изменить.
Kosten
Kosten 27.10.2015 23:345
0
Trantel, делаю на других стилях, по этому точно не скажу, но думаю возможно, если везде в стилях поменять, то должны полосы быть.
avatar