T@NKIST

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

Рекомендованные сообщения

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

opacity: 0.5

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

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

z-index: -1

и все стили

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

Изменено пользователем ctpz

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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


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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

как сделать полупрозрачный 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 без размытия теперь к любому элементу можно пририсовать абсолютно любое количество "бордеров" абсолютно произвольной расцветки?

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

как сделать полупрозрачный 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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

как сделать полупрозрачный 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 делал.....

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Изменено пользователем psywalker

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
а вместо тени можно как нить свою картинку вставлять?

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
а вместо тени можно как нить свою картинку вставлять?

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Изменено пользователем ViStefan

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
где bg.png - картинка 1x1 пиксель с прозрачностью. Это реально кроссбраузерно.

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

Изменено пользователем SelenIT

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Статистика пользователей

    46 180
    Всего пользователей
    3 128
    Рекорд онлайна
    evgengold
    Новый пользователь
    evgengold
    Регистрация
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.