Как сверстать такую красотульку

[Andyk]

В три дива с бордерами? Это нормально или можно более изящно?

[swetlana]

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

[psywalker]

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

Вот это уже другое дело, спортивный интерес+поиск интересного решения - это то, что нам нужно. Только уже поздно и хочется спать

[swetlana]

Свет, эта игра не стоит свеч, поверь, ты заигрываешься. Минимализм хорошо, но когда его в меру. Тут я вижу на лицо много минусов. Фильтры для ИЕ есть, да, можно использовать например теже тени, НО это влечёт за собой много проблем, а например...

- я сомневаюсь, что тень можно нарисовать внутри элемента, т.е. типа внутренние.

- при использовании фильтров, тех же теней, другие вещи могут перестать работать.

- ИЕ увеличивает блок из-за теней

- тень в ИЕ смотрится по другому, она другой формы.

Дальше перечислять?

так точно, минусы есть.

Вот сможет ли ие внутреннюю тень — меня как раз больше всего смущает.

Влияние фильтра на всё, что внутри, тоже не стоит недооценивать.

Но в данном конкретном частном случае тень в ие не будет иметь другую форму.

[psywalker]

так точно, минусы есть.

Вот сможет ли ие внутреннюю тень — меня как раз больше всего смущает.

Влияние фильтра на всё, что внутри, тоже не стоит недооценивать.

Но в данном конкретном частном случае тень в ие не будет иметь другую форму.

Предлагаю остановиться на том, что нам просто нужно найти минимальное решение. Максимум можно использовать один див. Два - уже много, т.е. нам не подходит. Всё должно работать одинаково начиная с ИЕ6+, пойдёт?

[swetlana]

Вот это уже другое дело, спортивный интерес+поиск интересного решения - это то, что нам нужно. Только уже поздно и хочется спать

да мне тоже ужа спать охота.

Не иду только потому что параллельно общение идёт с потенциальным заказчиком.

Предлагаю остановиться на том, что нам просто нужно найти минимальное решение. Максимум можно использовать один див. Два - уже много, т.е. нам не подходит. Всё должно работать одинаково начиная с ИЕ6+, пойдёт?

ну да, об этом и речь.

[psywalker]

да мне тоже ужа спать охота.

Не иду только потому что параллельно общение идёт с потенциальным заказчиком.

ну да, об этом и речь.

Ну да, тогда предлагаю перенести мини-конкурс на завтра)))

[swetlana]

кстати, а про большой конкурс забыли?

Что-то какое-то молчание странное.

[psywalker]

кстати, а про большой конкурс забыли?

Что-то какое-то молчание странное.

Наверное затишье перед бурей. Но это известно только одному великому и ужасному...

[Serlutin]

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

Как-то так: http://serlutin.nxt.ru/example/rss-button/

Извиняюсь за картинки, лень было красиво вырезать, поэтому там какие-то артефакты на картинке с RSS.

В IE6 и 7 не отображается одна полосочка. Неужели это настолько важно, чтобы добавлять лишний контейнер?

[psywalker]

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

Как-то так: http://serlutin.nxt.ru/example/rss-button/

Извиняюсь за картинки, лень было красиво вырезать, поэтому там какие-то артефакты на картинке с RSS.

В IE6 и 7 не отображается одна полосочка. Неужели это настолько важно, чтобы добавлять лишний контейнер?

Прикольно. Ну вот да, эта сраная полоска в ИЕ испортила весь кайф((( Может есть решение для её замены, нужно подумать ещё.

[swetlana]

Serlutin, если б так, то не было б никакого спора, мини-конкурса, и прочей шумихи.

Такое делается очень просто.

У автора темы задача чуть иная. Белая и серая рамки пересекаются.

[psywalker]

Вот вам всем

http://psywalker.ru/IMG/forum/3.html

Вот вам кстати и минимализм по максимуму по-моему)))

<div>

[swetlana]

Макс, а ведь белая рамка только сверху и слева.

Теперь ещё интересно почему.

[swetlana]

Ну и вот, собственно, тот вариант, о котором я говорила.

Минимализм, конечно, имеется, но в рамках разумного. Код самой странички чуть приближен к тому, что может быть в действительности. <div>(один, как и было обещано) содержит картинку и текст.

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

С IE всё чуть хуже. У меня, правда, была слабая надежда что-нибудь раскопать в msdn, но она не оправдалась. Пришлось конструкцию подпереть в IE парой костылей (впрочем, весьма крепких).

Как и обещано, одинаково отображается в современных FF, Opera, Webkit и в устаревших IE 6-7-8.

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

[Andyk]

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

Как-то так: http://serlutin.nxt.ru/example/rss-button/

Извиняюсь за картинки, лень было красиво вырезать, поэтому там какие-то артефакты на картинке с RSS.

В IE6 и 7 не отображается одна полосочка. Неужели это настолько важно, чтобы добавлять лишний контейнер?

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

Ну и вот, собственно, тот вариант, о котором я говорила.

Минимализм, конечно, имеется, но в рамках разумного. Код самой странички чуть приближен к тому, что может быть в действительности. <div>(один, как и было обещано) содержит картинку и текст.

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

С IE всё чуть хуже. У меня, правда, была слабая надежда что-нибудь раскопать в msdn, но она не оправдалась. Пришлось конструкцию подпереть в IE парой костылей (впрочем, весьма крепких).

Как и обещано, одинаково отображается в современных FF, Opera, Webkit и в устаревших IE 6-7-8.

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

Ну как бы супер. В IE посмотреть сейчас возможности нет, но я вам верю Отличное решение, спасибо всем за старания. Я получил тучу рамок себе на форум без втыкивания лишних дивов, а вы надеюсь, небольшой кусочек опыта. Ведь красиво выглядит, согласитесь?

ЗЫ а text-shadow будет работать аналогичным образом? Я про IE.

[swetlana]

именно text-shadow в IE работать не будет, но опять же есть фильтры.

[Clubberry]

именно text-shadow в IE работать не будет, но опять же есть фильтры.

Или же подставлять изображения, а если тень однопиксельная, то вторую копию текста смещённую на 1px.

[Andyk]

Или же подставлять изображения, а если тень однопиксельная, то вторую копию текста смещённую на 1px.

не дубли это перебор

пускай уж лучше без тени

[Clubberry]

не дубли это перебор

пускай уж лучше без тени

Моё дело было предложить. В этом ничего плохого нет, имхо, знакомые буржуи сейчас так иногда делают для ослика. Ну или же Вам придётся искать фильтры.

[swetlana]

ну здрасьте!

зачем ещё какие-то дубли?

да, помню, так делали в лохматые девяностые.

Но делали от незнания.

[Clubberry]

ну здрасьте!

зачем ещё какие-то дубли?

да, помню, так делали в лохматые девяностые.

Но делали от незнания.

Я предложил как один из выходов. Фильтры могут иногда криво срабатывать. Например у меня фильтр прозрачности не работал иногда в IE.

[Andyk]

Прицепил я фильтр на форум и проверил наконец в IE По непонятным причинам дивы, которыми я сверстал шапку разъехались, элементы, текст в которых имел свойство text-shadow (до этого IE свойство игнорировал и меня это устраивало) получили бордеры в 4-5 пикселей, текст кстати тоже А парочка дивов просто не хотели отображать "вторую" рамку, никак. После недолгих попыток как-нибудь это поправить, решил, что в два дива гораздо проще да и надежней. Но, не тут-то было.

Конструкция типа

<div class="a1">
		  <div class="a2">
		  </div>
</div>

a1 {
border-color: #AAAAAA #FEFEFE #FEFEFE #AAAAAA;
border-style: solid;
border-width: 1px;
}

a2 {
border-color: #FEFEFE #AAAAAA #AAAAAA #FEFEFE;
border-style: solid;
border-width: 1px;
}

воспринимается браузерами следующим образом:

Firefox сразу понял, что я хочу

Opera решила почему-то внутреннюю рамку вынести на передний план

IE как ни странно сделал все правильно

а Chrome вообще зафигачил "область перекрытия" полупрозрачным пикселем

Казалось бы ну рамка простая, а фиг сделаешь.

[swetlana]

да ну.

Сделать можно.

Ссылку на страницу покажи.

Интересует вариант с фильтрами, где всё разъехалось.

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

И ещё про фильтры.

Надо было мне сразу сказать. Если пользовать фильтры, то обязательно указывать фон. Иначе возможны нежелательные эффекты внутри блока с фильтрами.

[Serlutin]

Можно сделать проще, но не железно: http://serlutin.nxt.ru/example/rss-button/index2.html (пока проверял, навернулась ностальгическая слеза)

Интересует вариант с фильтрами, где всё разъехалось.

Меня больше интересует в чём преимущество фильтров перед дополнительным дивом?

[swetlana]

Можно сделать проще, но не железно: http://serlutin.nxt.ru/example/rss-button/index2.html (пока проверял, навернулась ностальгическая слеза)

А ведь именно это как раз и есть идеологически верное решение.

Меня больше интересует в чём преимущество фильтров перед дополнительным дивом?

в отсутствии мусора в разметке

Но это уже достаточно обсуждали выше.