как сделать полупрозрачный border

[T@NKIST]

как сделать полупрозрачный border как на этом сайте http://css-tricks.com/ вот -

исходный код смотрел и этого там нет

[ctpz]

1 шаг: делаешь блоку

opacity: 0.5

рамка вместе с блоком станет полупрозрачной

2 шаг: делаешь второй блок и пишешь ему

z-index: -1

и все стили

Нижний блок будет работать как рамка, а верхний будет как обычный контент-блок.

Edited August 16, 2011 by ctpz

[Seva1986]

как сделать полупрозрачный border как на этом сайте http://css-tricks.com/ вот -

исходный код смотрел и этого там нет

А фаербаг слабо открыть?

    border: 8px solid transparent;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);

[SelenIT]

Кстати, верно ли я понимаю, что с box-shadow без размытия теперь к любому элементу можно пририсовать абсолютно любое количество "бордеров" абсолютно произвольной расцветки?

[psywalker]

как сделать полупрозрачный border как на этом сайте http://css-tricks.com/ вот -

исходный код смотрел и этого там нет

А фаербаг слабо открыть?

    border: 8px solid transparent;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);

А если человеку нужны ИЕ6-8, то твой код не поможет.

Кстати, верно ли я понимаю, что с box-shadow без размытия теперь к любому элементу можно пририсовать абсолютно любое количество "бордеров" абсолютно произвольной расцветки?

Прикольно кстати. Слушай, а вместо тени можно как нить свою картинку вставлять?

[sigma77]

Кстати, верно ли я понимаю, что с box-shadow без размытия теперь к любому элементу можно пририсовать абсолютно любое количество "бордеров" абсолютно произвольной расцветки?

Да и с размытием можно - http://jsfiddle.net/fainz777/WN8vL/1/

В Мозилле можно в принципе, если толщина границы больше 1px закрашивать каждую линию в свой цвет - http://jsfiddle.net/fainz777/WN8vL/2/

Не помню, есть ли аналоги в других браузерах.

[psywalker]

Кстати, верно ли я понимаю, что с box-shadow без размытия теперь к любому элементу можно пририсовать абсолютно любое количество "бордеров" абсолютно произвольной расцветки?

Да и с размытием можно - http://jsfiddle.net/fainz777/WN8vL/1/

В Мозилле можно в принципе, если толщина границы больше 1px закрашивать каждую линию в свой цвет - http://jsfiddle.net/fainz777/WN8vL/2/

Не помню, есть ли аналоги в других браузерах.

Оксан, спасибо. А объясни плиз, как работает вот эта вещь?

1) -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;

2) А можно ли задавать свои изображения?

[sigma77]

Оксан, спасибо. А объясни плиз, как работает вот эта вещь?

1) -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;

У каждой границы, толщиной более 1px можно задать цвет для каждого отдельного пикселя. Цвета перечисляются начиная с внешней стороны границы. Каждый цвет соответствует своему пикселю. Последний заданный цвет распространяется на оставшееся количество пикселей (это если значений меньше, чем толщина границы). Цвет можно задавать в любом формате, в т.ч. может принимать и transparent.

2) А можно ли задавать свои изображения?

Для границ ввиде изображений есть - border-images (плюс префиксы: -webkit, -moz, -o).

[psywalker]

sigma77, Спасибо Оксан, хорошо объяснила прям

На счёт бордер-имедж слышал, ага

[T@NKIST]

как сделать полупрозрачный border как на этом сайте http://css-tricks.com/ вот -

исходный код смотрел и этого там нет

А фаербаг слабо открыть?

    border: 8px solid transparent;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);

да нет неслабо только сначала css выучи а потом говори http://htmlbook.ru/css/box-shadow

[Seva1986]

как сделать полупрозрачный border как на этом сайте http://css-tricks.com/ вот -

исходный код смотрел и этого там нет

А фаербаг слабо открыть?

    border: 8px solid transparent;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);

да нет неслабо только сначала css выучи а потом говори http://htmlbook.ru/css/box-shadow

Я его знаю лучше любого из Вас, покрайней мере многих....

Пример я тебе с ихнего же сайта скопипастил...

И что? что по этой ссылке нового? что отличаеться от примера?

А если человеку нужны ИЕ6-8, то твой код не поможет.

А где в вопросе было про устаревшие браузеры написанно? Мне просто в голову не могло придти что нужно писать будет чтобы он это с помощью png делал.....

[psywalker]

А где в вопросе было про устаревшие браузеры написанно? Мне просто в голову не могло придти что нужно писать будет чтобы он это с помощью png делал.....

А для твоих заказчиков ИЕ8 уже считается устаревшим браузером? Блин, повезло тебе дружище!

[sigma77]

А для твоих заказчиков ИЕ8 уже считается устаревшим браузером? Блин, повезло тебе дружище!

Да тут это не причем

Вопрос-то стоял, как сделать как на http://css-tricks.com/

А сделано там именно так как написано, ИЕ8 и ниже там в пролете.

[Seva1986]

Бан на две недели за мат и оскорбление участников форума.

Edited August 16, 2011 by psywalker

[sigma77]

Seva1986,

[psywalker]

А для твоих заказчиков ИЕ8 уже считается устаревшим браузером? Блин, повезло тебе дружище!

Да тут это не причем

Вопрос-то стоял, как сделать как на http://css-tricks.com/

А сделано там именно так как написано, ИЕ8 и ниже там в пролете.

Ааа, тогда ясненько)

[SelenIT]

а вместо тени можно как нить свою картинку вставлять?

Боюсь, что с условием "чтоб работало в IE8" — разве что как-то так

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

[psywalker]

а вместо тени можно как нить свою картинку вставлять?

Боюсь, что с условием "чтоб работало в IE8" — разве что как-то так

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

Блин, ну ты даёшь! И надо же было так извратиться. Спасибо дружище, круто!

[ViStefan]

Дану, практически все перечисленные методы - некроссбраузерный геморрой. Я бы если верстал, действительно сделал бы 2 дива с z-index`ом, и абсолютным позиционированием, чтоб наползал один на другой, а у последнего backgroung: url('bg.png') repeat; , где bg.png - картинка 1x1 пиксель с прозрачностью. Это реально кроссбраузерно.

Edited August 17, 2011 by ViStefan

[psywalker]

Дану, практически все перечисленные методы - некроссбраузерный геморрой. Я бы если верстал, действительно сделал бы 2 дива с z-index`ом, и абсолютным позиционированием, чтоб наползал один на другой, а у последнего backgroung: url('bg.png') repeat; , где bg.png - картинка 1x1 пиксель с прозрачностью. Это реально кроссбраузерно.

Да при чём тут это? Я и не планирую использовать приёмы, которые продемонстрировал тот же SelenIT. Суть в другом. Что главное - это идея! Т.е. материал - из которого можно извлечь пользу. Меня например восхищают извращения, обожаю их, что поделать. Я извлекаю из них знания, опыт. Это для меня главное.

[SelenIT]

где bg.png - картинка 1x1 пиксель с прозрачностью. Это реально кроссбраузерно.

По сравнению с комбо из rgba-заливки + градиентный фильтр с ARGB-цветом — минус IE6, плюс Опера 9. Что кроссбраузернее — еще бабуля надвое сказала . А еще лишний запрос на сервер...

Edited August 17, 2011 by SelenIT

[T@NKIST]

всем спасибо! я решил этот вопрос

SelenIT, извини, ты был прав просто у меня стоит хром а для него нужно

-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);

[ViStefan]

Дану, практически все перечисленные методы - некроссбраузерный геморрой. Я бы если верстал, действительно сделал бы 2 дива с z-index`ом, и абсолютным позиционированием, чтоб наползал один на другой, а у последнего backgroung: url('bg.png') repeat; , где bg.png - картинка 1x1 пиксель с прозрачностью. Это реально кроссбраузерно.

Да при чём тут это? Я и не планирую использовать приёмы, которые продемонстрировал тот же SelenIT. Суть в другом. Что главное - это идея! Т.е. материал - из которого можно извлечь пользу. Меня например восхищают извращения, обожаю их, что поделать. Я извлекаю из них знания, опыт. Это для меня главное.

Я, несомненно уважаю и твою точку зрения, и "извращения" меня тоже восхищают, но согласись в форуме "проблемы вёрстки" люди скорее всего ищут чего-то более конкретного и универсального...

[Carbonara]

не знаю, поможет или нет, но я делала так:

border-color: rgba(255, 255, 255, 0.5);

последнее прозрачность, в данном случае 50% (для тех, кто не знает)