Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.63/16: Рейтинг темы: голосов - 16, средняя оценка - 4.63
Itachi261092
Веб-Разработчик
79 / 79 / 9
Регистрация: 23.01.2012
Сообщений: 696
1

Линии на фоне средствами CSS

22.05.2013, 10:49. Просмотров 2924. Ответов 14
Метки нет (Все метки)

Здравствуйте господа. есть такая задача - нарисовать фоном 6 линий. например есть div размером 600х50px, мне нужно сверху подряд 3 линии разного цвета и снизу тоже. и всё это фоном. а центр оставить пустым. это возможно? а то у меня что то не получается =(
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
22.05.2013, 10:49
Ответы с готовыми решениями:

Текст на размытом фоне средствами CSS
Добрый вечер! Как сделать текст на размытом фоне с помощью CSS? filter:...

Как сделать вогнутые линии для div средствами CSS?
Как сделать "выгиб внутрь" линий вот такой для блочного элемента (как на...

Css прозрачный указатель на темном фоне
не могу придумать как заверстать подобный эффект. кирпичный фон есть,...

Закрепить картинку на заднем фоне, но не задеть тексты (CSS)
Добрый день, проблема такая, нужно намертво закрепить картинку на задней фоне,...

Косые линии в CSS
Как сделать косую линию в CSS ?

14
Forastero
543 / 325 / 82
Регистрация: 15.05.2013
Сообщений: 794
Записей в блоге: 1
22.05.2013, 13:05 2
Если я правильно понял что Вам нужно, то можно использовать для линий: border, outline, box-shadow.
Либо кинуть изображение на фон блоку и растиражировать по оси X.
0
Kumar6346
-6 / 14 / 0
Регистрация: 05.02.2013
Сообщений: 127
22.05.2013, 13:10 3
Itachi261092, можно сделать так. Берете ваши линии (3 сверху и 3 снизу) и в фотошопе объединяете в одну картинку размером вод ваш див т.е 600 на 50. А потом ставите бэкграундом эту картинку в ваш блок и все. Этот вариант подойдет если у вас будет блок фиксированной высоты. Если же у вас будет блок тянуться то тут можно посоветовать сделать внутри вашего дива еще два дива под размер ваших двух картинок и в каждый див закинуть по картинке бэкграундом. А можно сделать еще так: поставить позишн релатив на ваш блок 600 на 50 а внутри его два блока в каждом по картинки и их посишн абсолют. И одному блоку давать значения топ:0 а дрогому боттом:0
0
Itachi261092
Веб-Разработчик
79 / 79 / 9
Регистрация: 23.01.2012
Сообщений: 696
22.05.2013, 13:17  [ТС] 4
SoraxWeb, Kumar6346, спасибо за советы, но варианты с картинками никак не катят. я пока что сделал вот так:
HTML5
1
2
3
4
5
6
7
8
9
<div>
        <div id="line1"></div>
        <div id="line2"></div>
        <div id="line3"></div>
        <div class="info">
        </div>
        <div id="line4"></div>
        <div id="line5"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#line1{
    height: 0px;
    border-top: 1px #5a5a5a solid;
}
#line2{
    height: 0px;
    border-top: 1px #000000 solid;
}
#line3{
    height: 0px;
    border-top: 1px #7a7a7a solid;
}
#line4{
    height: 0px;
    border-top: 2px #7a7a7a solid;
}
#line5{
    height: 0px;
    border-top: 1px #000000 solid;
}
0
Forastero
543 / 325 / 82
Регистрация: 15.05.2013
Сообщений: 794
Записей в блоге: 1
22.05.2013, 13:30 5
Itachi261092, позвольте полюбопытствовать почему не катят варианты с изображениями?
К примеру, вот так: http://jsbin.com/evevuv/2/
0
Itachi261092
Веб-Разработчик
79 / 79 / 9
Регистрация: 23.01.2012
Сообщений: 696
22.05.2013, 13:42  [ТС] 6
SoraxWeb,
  1. Изображение больше объёмом чем текст - чем меньше объём сайта тем быстрее грузится
  2. А если блок динамический? нужно настраивать кучу параметров для правильного отображение этой картинки на фоне
  3. Вариант когда дизайн сайта верстается с минимальным применением картинок - самый предпочтительный
  4. Если понадобится изменить цвета то нужно переделывать картинку
  5. Если понадобится по событию менять цвета этих линий - придётся делать много картинок со всеми вариантами расцветок
  6. Я могу много продолжать говорить почему вариант с картинкой хуже. Все опытные люди подтвержят это
0
Forastero
543 / 325 / 82
Регистрация: 15.05.2013
Сообщений: 794
Записей в блоге: 1
22.05.2013, 13:47 7
Itachi261092, Ну, первым, и единственным пунктом, который нужно было указывать - Если понадобится изменить цвета то нужно переделывать картинку.
В остальном же, старая школа в некоторых моментах лучше. Размер моего изображения 940 байт. Это при условии, что я не сжимал его. Там 100% качество.
ИМХО - 6 блоков div для одних лишь линий - это как-то громоздко и неудобно.
0
Андрей-СПб
27 / 27 / 0
Регистрация: 21.12.2011
Сообщений: 92
22.05.2013, 13:51 8
А зачем 6 div то?
border-bottom и border-top использовать
0
Forastero
543 / 325 / 82
Регистрация: 15.05.2013
Сообщений: 794
Записей в блоге: 1
22.05.2013, 14:15 9
Андрей-СПб, и как это мы не догадались?)) Можно ведь легко сделать 3 линии сверху одним лишь свойством border-top. Только вот, может Вы просветите нас, как?
0
Андрей-СПб
27 / 27 / 0
Регистрация: 21.12.2011
Сообщений: 92
22.05.2013, 15:00 10
Ёрничать не обязательно))
CSS
1
2
3
4
#line1{
    height: 10px;
    border-top: 1px #5a5a5a solid;
    border-bottom: 1px #5a5a5a solid;
Добавлено через 16 минут
Кстати, если тянется фон, то height в процентах указать
0
Forastero
543 / 325 / 82
Регистрация: 15.05.2013
Сообщений: 794
Записей в блоге: 1
22.05.2013, 15:01 11
Андрей-СПб, и третий повесить на саму обертку!
Так еще куда не шло.))


Цитата Сообщение от Андрей-СПб Посмотреть сообщение
Ёрничать не обязательно))
Сарказм
0
Taatshi
22.05.2013, 17:00
  #12

Не по теме:

хех, встретились таки)

0
Андрей-СПб
27 / 27 / 0
Регистрация: 21.12.2011
Сообщений: 92
22.05.2013, 18:11 13
Цитата Сообщение от SoraxWeb Посмотреть сообщение
и третий повесить на саму обертку!
Ну да. Хотя.. Перечитывая первое сообщение
Цитата Сообщение от Itachi261092 Посмотреть сообщение
а центр оставить пустым.
Я бы сделал так --
HTML5
1
<div class="line16"><div class="line25"><div class="line34"></div></div></div>
0
Itachi261092
Веб-Разработчик
79 / 79 / 9
Регистрация: 23.01.2012
Сообщений: 696
22.05.2013, 18:27  [ТС] 14
Андрей-СПб, да. можно было и так. не додумался просто сразу. я новичок и не внимательный
0
Андрей-СПб
27 / 27 / 0
Регистрация: 21.12.2011
Сообщений: 92
22.05.2013, 18:42 15
Надеюсь, что отступы и размеры в css сделать получится)

Добавлено через 7 минут

Не по теме:

Цитата Сообщение от Taatshi Посмотреть сообщение
Не по теме:
хех, встретились таки)
сломал мозг, к чему это было.. :D

0
22.05.2013, 18:42
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
22.05.2013, 18:42

убрать линии css
Добрый день, помогите пожалуйста убрать серые линии (как на картинке) в меню...

Треугольник средствами CSS
как такое сделать? )

Стрелка средствами CSS
Здравствуйте. Подскажите, как сделать подобную стрелку средствами CSS (Я так...


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

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

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