Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
 
sendxt
9 / 9 / 3
Регистрация: 25.04.2012
Сообщений: 1,094
#1

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

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

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

Найти другой вариант реализации объекта - HTML, CSS
Здравствуйте! Подскажите пожалуйста как сверстать такой объект: http://jsfiddle.net/9ok351kL/36/ <div id="heart2"> <div...

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

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

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

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

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

24
Eugene-nsk
27 / 27 / 7
Регистрация: 27.07.2014
Сообщений: 184
06.08.2014, 12:54 #16
Цитата Сообщение от Sabio Посмотреть сообщение
Картинки тоже растягиваться будут?
Я думал, вы в курсе, что при изменении размеров поля, картинки в background не растягиваются, а просто смещаются. Естественно, заранее они будут приличной длины.

Никто не спорит, могут быть и другие варианты, например, отдельный background repeat из двух линий и наклонные штуки по бокам с помощью position:absolute. Вариантов много, тем и хорош html/css.
0
МилокМурлыка
50 / 50 / 14
Регистрация: 25.04.2014
Сообщений: 106
06.08.2014, 13:34 #17
Цитата Сообщение от Eugene-nsk Посмотреть сообщение
Я думал, вы в курсе, что при изменении размеров поля, картинки в background не растягиваются, а просто смещаются.
Я согласен что таблицы + картинки не идеальное решение, но как это картинки растягиваются? А background-size на что?
0
Eugene-nsk
27 / 27 / 7
Регистрация: 27.07.2014
Сообщений: 184
06.08.2014, 14:03 #18
Вы бы диалог сначала прочитали
0
vovandr
628 / 516 / 139
Регистрация: 19.08.2013
Сообщений: 1,401
06.08.2014, 15:08 #19
Такую фиговину можно без единой картинки сделать
0
sendxt
9 / 9 / 3
Регистрация: 25.04.2012
Сообщений: 1,094
06.08.2014, 15:55  [ТС] #20
vovandr, Ждём ваш вариант +))
0
Sabio
57 / 57 / 13
Регистрация: 24.06.2013
Сообщений: 265
06.08.2014, 16:30 #21
МилокМурлыка, хороший вариант с градиентом.
0
vovandr
628 / 516 / 139
Регистрация: 19.08.2013
Сообщений: 1,401
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 / 3
Регистрация: 25.04.2012
Сообщений: 1,094
06.08.2014, 20:17  [ТС] #23
vovandr, чётко

Эх далек я ещё от этого всего ))
0
Eugene-nsk
27 / 27 / 7
Регистрация: 27.07.2014
Сообщений: 184
06.08.2014, 22:51 #24
vovandr, отличное решение, но не для Opera
0
Миниатюры
Лучший вариант реализации разделителя контента на сайте  
vovandr
628 / 516 / 139
Регистрация: 19.08.2013
Сообщений: 1,401
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
Привет! Вот еще темы с ответами:

Прошу предложить лучший вариант перебора массива - C#
Всем доброго дня, такой вопросик. есть массив int array = { 1, 2, 3, 4, 5, 6, 7 }; есть цикл foreach который выводит...

Замена Webbrowser или другой лучший вариант для скоростного парсинга - C#
Замена Webbrowser или другой лучший вариант для скоростной парсинг Добрый день хочу написать программу-парсинг не для кражи контента,...

Свой вариант реализации метода - Delphi
Такая проблема: Есть задание и код интерфейсной секции с комментариями. Но я не понимаю как сделать задание. Есть еще несколько таких...

Свой вариант реализации метода - Delphi
Не могли бы Вы помочь? Есть задание и код интерфейсной секции с комментариями. Но я не понимаю как сделать задание. Код: ...


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

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

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