Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
 
sendxt
9 / 9 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
#1

Лучший вариант реализации разделителя контента на сайте - HTML, CSS

05.08.2014, 23:33. Просмотров 1230. Ответов 24
Метки нет (Все метки)

У кого какие мысли как такое лучше реализовать?) Такое чудо не одно а выступает в качестве разделения контента на сайте)
0
Миниатюры
Лучший вариант реализации разделителя контента на сайте  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
05.08.2014, 23:33
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Лучший вариант реализации разделителя контента на сайте (HTML, CSS):

Найти другой вариант реализации объекта
Здравствуйте! Подскажите пожалуйста как сверстать такой объект: ...

Лучший вариант записи в .txt
Кто нить замерял как лучше вносить данные в текстовый фаил На данный момент из...

Лучший вариант локализации своего интерфейса
Есть задача изменять язык интерфейса программы. Сейчас делаю так: есть...

Цикл в цикле? Каков лучший вариант?
Господа, поделитесь опытом, пожалуйста, для общего блага среди начинающих. ...

Системы счисления, выбрать лучший вариант
Вот задача, мучает меня уже давно.. Дано целое неотрицательное число в...

Лучший вариант обновления для моей системы
У меня: Intel i3, 3,07 на ядро GeForce GTS 450, 4 Gb RAM Win 7, 64-bit ...

24
Sabio
57 / 57 / 14
Регистрация: 24.06.2013
Сообщений: 265
06.08.2014, 16:30 #21
МилокМурлыка, хороший вариант с градиентом.
0
vovandr
629 / 517 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
06.08.2014, 16:45 #22
HTML5
1
2
3
4
5
<div class="box">
   <div class="sign">
     <span>apie mus</span>
   </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.sign{
  height:60px;
  width: 400px;
  margin: 0 auto;
  background: #000;
  border-width: 0 15px;
  border-style: solid;
  border-color: orange;
  -webkit-transform: translate3d(0,0,0) skew(-16deg);
  transform: translate3d(0,0,0) skew(-16deg);
  text-align: center;
  position: relative;
  z-index: 1;
}
.sign > span {
  -webkit-transform: skew(16deg);
  -ms-transform: skew(16deg);
  transform: skew(16deg);
  display: inline-block;
  color: #fff;
  text-transform: uppercase;
  font: 1.8em/60px Arial, sans-serif;
}
.box:after{
  content: '';
  display: block;
  position: absolute;
  height: 6px;
  border-color: #000;
  border-style: solid;
  border-width: 2px 0;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -4px;
}
.box{
   width: 800px;
   position: relative;
   margin: 0 auto;
}
Демо: http://codepen.io/anon/pen/qkbEc
1
sendxt
9 / 9 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
06.08.2014, 20:17  [ТС] #23
vovandr, чётко

Эх далек я ещё от этого всего ))
0
Eugene-nsk
28 / 28 / 8
Регистрация: 27.07.2014
Сообщений: 185
06.08.2014, 22:51 #24
vovandr, отличное решение, но не для Opera
0
Миниатюры
Лучший вариант реализации разделителя контента на сайте  
vovandr
629 / 517 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
06.08.2014, 23:04 #25
Цитата Сообщение от Eugene-nsk Посмотреть сообщение
отличное решение, но не для Opera
Для opera можно сделать так (проверял на 12.16 под mac - то есть просто наклона не будет):
CSS
1
2
3
4
5
6
7
.sign > span {
  transform: translate3d(0,0,0)  skew(16deg);
  display: inline-block;
  color: #fff;
  text-transform: uppercase;
  font: 1.8em/60px Arial, sans-serif;
}
0
06.08.2014, 23:04
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
06.08.2014, 23:04
Привет! Вот еще темы с решениями:

Прошу предложить лучший вариант перебора массива
Всем доброго дня, такой вопросик. есть массив int array = { 1, 2, 3,...

Какой лучший вариант для домашнего ПК (оптимальный вариан)
Добрый день, посмотрел на форуме раздел похожих ситуаций, мне маленько не...

Разделение цикла for на маленькие методы - какой лучший вариант по производительности?
Что лучше с точки зрения быстродействия и производительности? Цикл в одном...

Замена Webbrowser или другой лучший вариант для скоростного парсинга
Замена Webbrowser или другой лучший вариант для скоростной парсинг Добрый...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
25
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru