Как сверстать такой блок.

[Светлана Г.]

Каким лучше способом сверстать такое модальное окошко? Оно должно быть резиновым.

[iKNG]

border-image + JS?

[Светлана Г.]

border-image + JS?

 

js для чего? 

[cyklop77]

transform: scale не? там правда толщина рамки тоже будет изменяться. но в некоторых случаях может подойти и такое решение

[iKNG]

Оно должно быть резиновым.

js для чего?

 

Или имеется в виду, что не пользователь может его растягивать, а оно может быть любого размера? Тогда просто border-image

Edited December 21, 2013 by iKNG

[npofopr]

Резина тут совсем не причем. 

А как бордеры сделать, вам сказали. 

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

Хотя нельзя. Картинка будет ломаться

[Светлана Г.]

Пока так, но не работает даже в IE10 - только черная рамка.

Надо что-то делать с этой ужасной 7px черной рамкой.

 border-style: solid;border-width: 7px;-moz-border-image: url(order-modal.gif) 7 7 7 7 round;-webkit-border-image: url(order-modal.gif) 7 7 7 7 round;-o-border-image: url(order-modal.gif) 7 7 7 7 round;border-image: url(order-modal.gif) 7 7 7 7 fill round;

Edited December 21, 2013 by Светлана Г.

[klierik]

• :pseudo-element
• бордер картинкой
• background-size

[Светлана Г.]

background-size не подходит - рамка меняет свою ширину при изменении ширины блока.

[klierik]

ну так чем не подходит то? фон растянуть по ширине на 100%

[Светлана Г.]

Фоновое изображение: 

Стили такие:

#modal-basket{position:relative;width:70%;padding:10px;background:url(design/order-modal.gif) no-repeat;background-size:100% 100%;

Результат: 

Edited December 22, 2013 by Светлана Г.

[iKNG]

Фоновое изображение: 

Стили такие:

#modal-basket{position:relative;width:70%;padding:10px;background:url(design/order-modal.gif) no-repeat;background-size:100% 100%;

Результат: 

Сказали уже сто раз: border-image

[Светлана Г.]

Сказали уже сто раз: border-image

 

Делала и border-image: не устраивает черная рамка шириной в 7px в IE, начиная с 10 и ниже. Хотя бы от нее как-то избавиться. Очень мрачно с ней...

Edited December 22, 2013 by Светлана Г.

[klierik]

Очень даже правильно, ибо IE тех версий попросту не знает о существование таких CSS правил.

Тут или под современные или никак.

 

ps: под IE можно воспользоватся "conditionals comments"

[Zverushka]

Ну сделать два тега - один modal другой внутри Modal wrap - каждому задать по 2 псевдоэлемента - итого их будет 4 - это будут 4 границы - просто задать задний повторяющийся фон каждому псевдоэлементу - а ширину и высоту равную самому modal.

Это если изящная деградация не подходит - от ие8 будет везде одинаково выглядеть.

Edited December 22, 2013 by Zverushka

[Светлана Г.]

Ну сделать два тега - один modal другой внутри Modal wrap - каждому задать по 2 псевдоэлемента - итого их будет 4 - это будут 4 границы - просто задать задний повторяющийся фон каждому псевдоэлементу - а ширину и высоту равную самому modal.

Это если изящная деградация не подходит - от ие8 будет везде одинаково выглядеть.

Вот этот вариант - самый подходящий. Спасибо!