Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.96/26: Рейтинг темы: голосов - 26, средняя оценка - 4.96
Веб-Разработчик
82 / 82 / 9
Регистрация: 23.01.2012
Сообщений: 701
1

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

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

Здравствуйте господа. есть такая задача - нарисовать фоном 6 линий. например есть div размером 600х50px, мне нужно сверху подряд 3 линии разного цвета и снизу тоже. и всё это фоном. а центр оставить пустым. это возможно? а то у меня что то не получается =(
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
22.05.2013, 10:49
Ответы с готовыми решениями:

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

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

На фоне экрана построить случайным образом две линии
На фоне экрана построить случайным образом две линии с помощью процедур LINE, LINETO.

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

14
560 / 337 / 87
Регистрация: 15.05.2013
Сообщений: 812
Записей в блоге: 1
22.05.2013, 13:05 2
Если я правильно понял что Вам нужно, то можно использовать для линий: border, outline, box-shadow.
Либо кинуть изображение на фон блоку и растиражировать по оси X.
0
-6 / 14 / 0
Регистрация: 05.02.2013
Сообщений: 131
22.05.2013, 13:10 3
Itachi261092, можно сделать так. Берете ваши линии (3 сверху и 3 снизу) и в фотошопе объединяете в одну картинку размером вод ваш див т.е 600 на 50. А потом ставите бэкграундом эту картинку в ваш блок и все. Этот вариант подойдет если у вас будет блок фиксированной высоты. Если же у вас будет блок тянуться то тут можно посоветовать сделать внутри вашего дива еще два дива под размер ваших двух картинок и в каждый див закинуть по картинке бэкграундом. А можно сделать еще так: поставить позишн релатив на ваш блок 600 на 50 а внутри его два блока в каждом по картинки и их посишн абсолют. И одному блоку давать значения топ:0 а дрогому боттом:0
0
Веб-Разработчик
82 / 82 / 9
Регистрация: 23.01.2012
Сообщений: 701
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
560 / 337 / 87
Регистрация: 15.05.2013
Сообщений: 812
Записей в блоге: 1
22.05.2013, 13:30 5
Itachi261092, позвольте полюбопытствовать почему не катят варианты с изображениями?
К примеру, вот так: http://jsbin.com/evevuv/2/
0
Веб-Разработчик
82 / 82 / 9
Регистрация: 23.01.2012
Сообщений: 701
22.05.2013, 13:42  [ТС] 6
SoraxWeb,
  1. Изображение больше объёмом чем текст - чем меньше объём сайта тем быстрее грузится
  2. А если блок динамический? нужно настраивать кучу параметров для правильного отображение этой картинки на фоне
  3. Вариант когда дизайн сайта верстается с минимальным применением картинок - самый предпочтительный
  4. Если понадобится изменить цвета то нужно переделывать картинку
  5. Если понадобится по событию менять цвета этих линий - придётся делать много картинок со всеми вариантами расцветок
  6. Я могу много продолжать говорить почему вариант с картинкой хуже. Все опытные люди подтвержят это
0
560 / 337 / 87
Регистрация: 15.05.2013
Сообщений: 812
Записей в блоге: 1
22.05.2013, 13:47 7
Itachi261092, Ну, первым, и единственным пунктом, который нужно было указывать - Если понадобится изменить цвета то нужно переделывать картинку.
В остальном же, старая школа в некоторых моментах лучше. Размер моего изображения 940 байт. Это при условии, что я не сжимал его. Там 100% качество.
ИМХО - 6 блоков div для одних лишь линий - это как-то громоздко и неудобно.
0
28 / 28 / 0
Регистрация: 21.12.2011
Сообщений: 92
22.05.2013, 13:51 8
А зачем 6 div то?
border-bottom и border-top использовать
0
560 / 337 / 87
Регистрация: 15.05.2013
Сообщений: 812
Записей в блоге: 1
22.05.2013, 14:15 9
Андрей-СПб, и как это мы не догадались?)) Можно ведь легко сделать 3 линии сверху одним лишь свойством border-top. Только вот, может Вы просветите нас, как?
0
28 / 28 / 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
560 / 337 / 87
Регистрация: 15.05.2013
Сообщений: 812
Записей в блоге: 1
22.05.2013, 15:01 11
Андрей-СПб, и третий повесить на саму обертку!
Так еще куда не шло.))


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

Не по теме:

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

0
28 / 28 / 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
Веб-Разработчик
82 / 82 / 9
Регистрация: 23.01.2012
Сообщений: 701
22.05.2013, 18:27  [ТС] 14
Андрей-СПб, да. можно было и так. не додумался просто сразу. я новичок и не внимательный
0
28 / 28 / 0
Регистрация: 21.12.2011
Сообщений: 92
22.05.2013, 18:42 15
Надеюсь, что отступы и размеры в css сделать получится)

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

Не по теме:

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

0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
22.05.2013, 18:42

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

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

Отрисовка на Image линии средствами GDI+
Занимаюсь написанием класса, который использует GDI+ и столкнулся с проблемами. Смоделировал свой...

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

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


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

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

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