T@NKIST

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

Recommended Posts

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

opacity: 0.5

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

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

z-index: -1

и все стили

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

Edited by ctpz

Share this post


Link to post
Share on other sites

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

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

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


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

Share this post


Link to post
Share on other sites

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

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

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


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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

Кстати, верно ли я понимаю, что с 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) А можно ли задавать свои изображения?

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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


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

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

Share this post


Link to post
Share on other sites

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

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

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


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 делал.....

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


Link to post
Share on other sites
а вместо тени можно как нить свою картинку вставлять?

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

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

Share this post


Link to post
Share on other sites
а вместо тени можно как нить свою картинку вставлять?

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

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

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

Share this post


Link to post
Share on other sites

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

Edited by ViStefan

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
где bg.png - картинка 1x1 пиксель с прозрачностью. Это реально кроссбраузерно.

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

Edited by SelenIT

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,333
    Total Members
    3,128
    Most Online
    sohaibkhalid614
    Newest Member
    sohaibkhalid614
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.