Рамка с помощью градиента

[decode]

Всем привет

Столкнулся с небольшой проблемой, надеюсь на вашу помощь, т.к сам решения не нашел

 

Требуется сделать рамку вот такого типа с помощью CSS. (Серый узор высотой 5px)

 

На крайний случай можно и фоном просто.

Возможно такое сделать?

 

P.S пробовал всякие генераторы градиентов, но что-то через них вообще никак не получилось

Плюсану в репу за помощь

Edited May 5, 2014 by decode

[Galaxy]

обрезать кусок картинки чтоб он повторялся и http://htmlbook.ru/css/border-image

[decode]

обрезать кусок картинки чтоб он повторялся и http://htmlbook.ru/css/border-image

нужно на чистом CSS, без картинок к сожалению

[DivMan]

http://jsfiddle.net/xV8F5/

[decode]

http://jsfiddle.net/xV8F5/

Спасибо, но такой вариант мне не подходит, слишком много кода и смахивает на стеб

[DivMan]

такие рамки делаются картинками border-image

Edited May 5, 2014 by DivMan

[decode]

такие рамки делаются картинками border-image

Я вроде видел где-то, что делают еще и градиентом на css

[swandev]

http://jsfiddle.net/xV8F5/

жесть

[McLotos]

1.Топаем сюда

2. Создаем макет черного цвета и расставляем на нём белые палочки (для этого нужно по очереди добавлять по 1 квадратику с нижней части 1 черный 1 белы 1 черный и т.д.)

3. Справа сгенерируется css код.

У меня получилось вот так

background: #000000; /* Old browsers */background: -moz-linear-gradient(-45deg,  #000000 0%, #000000 11%, #ffffff 12%, #ffffff 12%, #ffffff 12%, #000000 13%, #ffffff 14%, #050505 15%); /* FF3.6+ */background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#000000), color-stop(11%,#000000), color-stop(12%,#ffffff), color-stop(12%,#ffffff), color-stop(12%,#ffffff), color-stop(13%,#000000), color-stop(14%,#ffffff), color-stop(15%,#050505)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(-45deg,  #000000 0%,#000000 11%,#ffffff 12%,#ffffff 12%,#ffffff 12%,#000000 13%,#ffffff 14%,#050505 15%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg,  #000000 0%,#000000 11%,#ffffff 12%,#ffffff 12%,#ffffff 12%,#000000 13%,#ffffff 14%,#050505 15%); /* Opera 11.10+ */background: -ms-linear-gradient(-45deg,  #000000 0%,#000000 11%,#ffffff 12%,#ffffff 12%,#ffffff 12%,#000000 13%,#ffffff 14%,#050505 15%); /* IE10+ */background: linear-gradient(135deg,  #000000 0%,#000000 11%,#ffffff 12%,#ffffff 12%,#ffffff 12%,#000000 13%,#ffffff 14%,#050505 15%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#050505',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Но это только 2 белые полоски на черном фоне.

Т.е. вы понимаете что при большом количестве полосок этот код немного увеличится =)

[decode]

1.Топаем сюда

2. Создаем макет черного цвета и расставляем на нём белые палочки (для этого нужно по очереди добавлять по 1 квадратику с нижней части 1 черный 1 белы 1 черный и т.д.)

3. Справа сгенерируется css код.

У меня получилось вот так

background: #000000; /* Old browsers */background: -moz-linear-gradient(-45deg,  #000000 0%, #000000 11%, #ffffff 12%, #ffffff 12%, #ffffff 12%, #000000 13%, #ffffff 14%, #050505 15%); /* FF3.6+ */background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#000000), color-stop(11%,#000000), color-stop(12%,#ffffff), color-stop(12%,#ffffff), color-stop(12%,#ffffff), color-stop(13%,#000000), color-stop(14%,#ffffff), color-stop(15%,#050505)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(-45deg,  #000000 0%,#000000 11%,#ffffff 12%,#ffffff 12%,#ffffff 12%,#000000 13%,#ffffff 14%,#050505 15%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg,  #000000 0%,#000000 11%,#ffffff 12%,#ffffff 12%,#ffffff 12%,#000000 13%,#ffffff 14%,#050505 15%); /* Opera 11.10+ */background: -ms-linear-gradient(-45deg,  #000000 0%,#000000 11%,#ffffff 12%,#ffffff 12%,#ffffff 12%,#000000 13%,#ffffff 14%,#050505 15%); /* IE10+ */background: linear-gradient(135deg,  #000000 0%,#000000 11%,#ffffff 12%,#ffffff 12%,#ffffff 12%,#000000 13%,#ffffff 14%,#050505 15%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#050505',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Но это только 2 белые полоски на черном фоне.

Т.е. вы понимаете что при большом количестве полосок этот код немного увеличится =)

Спасибо)

Видимо из доступных вариатов только трешак)) Жаль...

Нагуглил еще вот такое свойство, если вдруг кому нужно будет repeating-linear-gradient - позволяет решить мою проблему, но там с шириной в 1px очень отстойно работает

[McLotos]

сделайте ширину 3 px просто нужно будет делать не 1 цвет, а 2 например серый-белый-серый

[Николя223]

мда. если фоном делаешь - проще - фоновый цвет, а на него png - несколькопиксельный паттерн и репить его наздоровье

точнее 3 пикселя на 3 пикселя

Edited May 5, 2014 by Николя223

[decode]

мда. если фоном делаешь - проще - фоновый цвет, а на него png - несколькопиксельный паттерн и репить его наздоровье

Картинки не модно 

Edited May 5, 2014 by decode

[Николя223]

Картинки не модно

че это?)) а велосипед, который навряд ли будет работать везде - модно?

 

Если хочешь - можешь на канвасе яваскриптом нарисовать   будет модно))) но это тоже самое что из C-300 по воробьям палить))

Edited May 5, 2014 by Николя223

[McLotos]

че это?)) а велосипед, который навряд ли будет работать везде - модно?

велосипеды - двигатели прогресса!

Я вот 3d слайдшоу с прогрессбаром на чистом css написал - просто не люблю js и тем более библиотеки типа jQuery

Раньше про такое бы сказали что-то вроде "жигулем,конечно,можно буксировать автобус, но это какбы не его дело", а теперь когда JS наглеет:

клиентская сторона, серверная часть, базы данных, прослойка между клиентом и сервером.

то почему-бы и не поробовать забить на js и сделать всё на css?

Так и здесь. Зачем замедлять сайт картинкой, когда можно всё сделать в коде.

Кстати интересный момент получается:

адекватные браузеры могут почти все сделать в коде - они хорошо понимают css,

IE не может и половины этого, в результате для него нужно делать всё картинками.

В финале получается что для одинакового отображения во всех браузерах нужны разные подходы что в свою очередь приводит к тому что нормальные браузеры грузят страницы быстрее, а IE мало того что сам тормоз так ещё и картинки вынужден грузить что ещё больше его замедляет =)))))

Edited May 5, 2014 by McLotos

[Николя223]

Я вот 3d слайдшоу с прогрессбаром

поздравляю)

jQuery по тихоньку отходит )) но надо должное отдать - это одно из открытий weba, к нему на смену много чего нового пришло))

 лично мне - незаменим в десятки раз работу ускоряет

 

 

клиентская сторона, серверная часть, базы данных, прослойка между клиентом и сервером.

 

))) Это вы ещё не до конца понимаете как там всё устроено))

 

 

то почему-бы и не поробовать забить на js и сделать всё на css?

Смысл из CSS делать JS?

Вы наверно с реальными задачами не сталкивались))) JS - это JS а CSS - это CSS)))))))))))

CSS хорош тем, что некотрые плюхи аппаратно обрабатываются) 

К сведенью)) CSS - стилизация. А у js динамика(если точнее - у него полно дел) 

 

IE не может и половины этого, в результате для него нужно делать всё картинками

уже несовсем) не нужно сравнивать динозавров с крокодилами 

 

 

а IE мало того что сам тормоз так ещё и картинки вынужден грузить что ещё

С IE 9 он уже не такой простачок. IE10 - получше)) А 11 видели?)))

для восьмерки - почитайте про изящную деградацию. и то жирно ему уже.

 

Но вы не забывайте, что если делаете крупный проект, то придется все риски учитывать, иначе потеряете клиентов, деньги. Так и под IE8 писать будете если заказчик упрётся

Edited May 5, 2014 by Николя223

[decode]

Если вдруг кого-то волнует моя судьба, то я сделал картинкой в итоге)

[McLotos]

Если вдруг кого-то волнует моя судьба

 

Честно? В смысле Вы правда хотите знать интересно нам или нет? =))))

тут разговор уже совсем в другом направлении ушёл. А вообще-то Вам ещё в начале говорили что лучше делать картинкой. И я на это тоже намекал