Задача невыполнима?

[Bassline]

Реально ли сверстать некий прямоугольный блок с текстом, удовлетворяющий следующим требованиям:

 

1. Закругленные углы

2. Тень со всех сторон

3. Полупрозрачность фона (что бы было видно все, что находится за блоком)

4. Резиновость хотя бы по высоте.

6. Корректное отображение при масштабировании страницы (через ctrl) как в + так и в -

5. Поддержка всех этих пунктов без исключения начиная с IE7+

 

Такой блок мне нужно сверстать независимо от того, возможно это или нет. Этого требуют от меня на работе.

 

Пробовал вариант с прозрачными картинками, все вроде хорошо, но при масшабировании в хроме появляются артефакты в виде смещения в разные стороны бэкграундов на пару-тройку пикселей, врезультате чего блок карежится. В IE8 такая же ерунда. Неприемлимо.

 

Вариант с pie.htc и фильтрами для IE7-8 тоже не катит, так как все они реализуют тень в виде темной подложки под основным блоком, в результате через полупрозрачный фон видно только эту тень.

 

Может есть какое-либо чудо-средство?

Edited April 14, 2014 by Bassline

[Great Rash]

Задача выполнима. Берёте и делаете всё картинками. Совсем уже со своим CSS3 верстать разучились...

[Bassline]

Задача выполнима. Берёте и делаете всё картинками. Совсем уже со своим CSS3 верстать разучились...

Пробовал вариант с прозрачными картинками, все вроде хорошо, но при масшабировании в хроме появляются артефакты в виде смещения в разные стороны бэкграундов на пару-тройку пикселей, врезультате чего блок карежится. В IE8 такая же ерунда. Неприемлимо.

[Great Rash]

http://codepen.io/GreatRash/pen/bsBex - ничо нигде не смещается

[Bassline]

http://codepen.io/GreatRash/pen/bsBex - ничо нигде не смещается

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

 

Ну и вдогонку. При уменьшении масштаба в хроме на 25% нижня рамка смещается и видно как торчат углы.

 

- - - -

Хотя нет, таким макаром получается все нормально, но при масштабировании в хроме вылазят баги. Как я писал выше, я пробовал картинками, но другим способом попроще и тоже все отображается нормально. Но при масшатабировании...

Все равно желательно читать тему внимательно, перед тем как ответить.

Edited April 14, 2014 by Bassline

[antonKar]

1. Закругленные углы 2. Тень со всех сторон 3. Полупрозрачность фона (что бы было видно все, что находится за блоком) 4. Резиновость хотя бы по высоте. 6. Корректное отображение при масштабировании страницы (через ctrl) как в + так и в - 5. Поддержка всех этих пунктов без исключения начиная с IE7+

 

1) border-radius

2) box-shadow

3) background-color: rgba() (для IE<9 выкручиваемся через полупрозрачный png 1*1, можно запилить в виде base64, png изначально будет весить 109 байт, через smush.it будет 70 байт, base64 уже чуть-чуть увеличит размер)

4) да

6) да

5) CSS3PIE

[Bassline]

 

1. Закругленные углы 2. Тень со всех сторон 3. Полупрозрачность фона (что бы было видно все, что находится за блоком) 4. Резиновость хотя бы по высоте. 6. Корректное отображение при масштабировании страницы (через ctrl) как в + так и в - 5. Поддержка всех этих пунктов без исключения начиная с IE7+

 

1) border-radius

2) box-shadow

3) background-color: rgba() (для IE<9 выкручиваемся через полупрозрачный png 1*1, можно запилить в виде base64, png изначально будет весить 109 байт, через smush.it будет 70 байт, base64 уже чуть-чуть увеличит размер)

4) да

6) да

5) CSS3PIE

 

Ну елки-палки. Я же писал, что уже использовал pie, а значит и border-radius, и box-shadow и т.д. Но в IE7-8 при добавлении тени не работает прозрачность, точнее она есть, но от нее нет толку, поскольку тень реализуется путем сплошной подложки в под основной блок, и сквозь блок видно мутное пятно тени. А нужно чтобы была и тень и прозрачность в IE7-8. Сначала нужно попробовать этот способ, а потом советовать. Блин.

[mrnobody]

Может быть поможет http://chikuyonok.ru/2009/10/decor/

Edited April 15, 2014 by mrnobody

[Switch74]

могу предложить способ которым я пользовался когда-то

1. бордер совмещаете с тенью которая вам нужна в картинках

2. нарезать можно однопиксельные бордеры и вставлять через background и repeat а так же уголки как отдельные файлы так и спрайтами

 

ах да, забыл сказать, что в ie7 не очень корректно производится округление из-за чего в данном примере могут появляться однопиксельные белые полосы, чтобы избавиться от этого можно воспользоваться бордером в 2px и расширить область .block_background на 1px во все стороны, если тень во все стороны будет градиентом из не прозрачного цвета, то можно обойтись бордером и в 1px. 

Хотя возможно достаточно будет просто расширить .block_background на 1px во все стороны и не париться

Edited April 15, 2014 by Switch74

[Great Rash]

Где чо смещается?

[Bassline]

Untitled-2.png

Где чо смещается?

 

При масштабе 75%

 

А если у блока тонкие светлые границы с темными тенями, светлым полупрозрачным фоном - эти смещения становятся еще заметнее. Вообще не катит. Это не я придумал, этого от меня требуют. Менеджеры проверяют каждый пиксель, на каждом возможном уровне увеличения и уменьшения масштаба.

Edited April 15, 2014 by Bassline

[Great Rash]

Блин, ну подумайте немного. Очевидно же, что надо просто добавить пространства в спрайт, а не лепить тени прям вплотную.

[Bassline]

Блин, ну подумайте немного. Очевидно же, что надо просто добавить пространства в спрайт, а не лепить тени прям вплотную.

Да никто не лепит, я и отдельными картинками тоже пробовал. Просто в местах стыков образуются пустые промежутки в 1-2px. Или браузер искажает саму картинку чуть-чуть, в результате, например, левая граница чуть толще (размытее), чем верхняя. Хотя при 100% все выглядит идеально.

[Игорь Ермаков]

Совсем уже со своим CSS3 верстать разучились...

 

this!

[rash]

Ну если уж так все сурово и ни пикселя в сторону — может таблицей?

[Switch74]

Блин, ну подумайте немного. Очевидно же, что надо просто добавить пространства в спрайт, а не лепить тени прям вплотную.

Да никто не лепит, я и отдельными картинками тоже пробовал. Просто в местах стыков образуются пустые промежутки в 1-2px. Или браузер искажает саму картинку чуть-чуть, в результате, например, левая граница чуть толще (размытее), чем верхняя. Хотя при 100% все выглядит идеально.

 

 

А эти искажения в любом браузере будут, причем возможно везде разные.

[Bassline]

Может быть поможет http://chikuyonok.ru/2009/10/decor/

 

При такой раскладке искажения минимальны, попытаюсь протолкнуть этот вариант. Спасибо.