Jump to content
  • 0

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


Bassline
 Share

Question

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

 

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

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

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

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

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

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

 

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

 

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

 

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

 

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

Edited by Bassline
Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0
  On 4/14/2014 at 2:19 PM, Great Rash said:

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

  On 4/14/2014 at 1:39 PM, Bassline said:
Пробовал вариант с прозрачными картинками, все вроде хорошо, но при масшабировании в хроме появляются артефакты в виде смещения в разные стороны бэкграундов на пару-тройку пикселей, врезультате чего блок карежится. В IE8 такая же ерунда. Неприемлимо.
Link to comment
Share on other sites

  • 0
  On 4/14/2014 at 2:25 PM, Great Rash said:

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

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

 

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

 

- - - -

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

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

Edited by Bassline
Link to comment
Share on other sites

  • 0
  On 4/14/2014 at 1:39 PM, Bassline said:
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

Link to comment
Share on other sites

  • 0
  On 4/14/2014 at 8:15 PM, antonKar said:

 

  On 4/14/2014 at 1:39 PM, Bassline said:
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. Сначала нужно попробовать этот способ, а потом советовать. Блин.

Link to comment
Share on other sites

  • 0

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

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

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

 

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

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

Edited by Switch74
Link to comment
Share on other sites

  • 0
  On 4/15/2014 at 7:12 AM, Great Rash said:

attachicon.gifUntitled-2.png

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

 

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

3d60c1295c3f554746a8d7994890f22c.jpg

 

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

Edited by Bassline
Link to comment
Share on other sites

  • 0
  On 4/15/2014 at 7:25 AM, Great Rash said:

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

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

Link to comment
Share on other sites

  • 0
  On 4/15/2014 at 7:34 AM, Bassline said:
  On 4/15/2014 at 7:25 AM, Great Rash said:

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

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

 

 

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

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy