вопрос
Добрый день :)
Хотелось бы узнать, как можно сделать скругление углов картинки из дополнительного поля, при уменьшенных размерах в короткой новости (т.к картинка из доп. поля берется для топ новостей), по средствам css.
Новичок в этом.
Хотелось бы узнать решение по средствам css, если же такое имеется.
Не хотелось бы использовать jQuery Corner, шаблон уже имеет 100кб дж.
Но набросок куска кода примерно следующий...
Хотелось бы узнать, как можно сделать скругление углов картинки из дополнительного поля, при уменьшенных размерах в короткой новости (т.к картинка из доп. поля берется для топ новостей), по средствам css.
Новичок в этом.
Хотелось бы узнать решение по средствам css, если же такое имеется.
Не хотелось бы использовать jQuery Corner, шаблон уже имеет 100кб дж.
Но набросок куска кода примерно следующий...
[full-link]{title}[/full-link] | {news-id}
[xfgiven_image][full-link][xfgiven_image][/full-link][/xfgiven_image]
{short-story}
.imgw img {border:1px solid #000;width:184px;height:253px;border-radius:10px;-moz-border-radius: 8px;-webkit-border-radius: 8px;}Это хорошо, что картинка фиксированного размера, это упрощает задачу.
Для начала рисуем в ФШ картинку нужного размера с прозрачной серединкой с закруглёнными углами (внутри), а непрозрачные части - под цвет фона сайта.
HTML будет примерно так:
Далее пишем в css чтото вроде этого:
Пробуйте, я не проверял.
Для начала рисуем в ФШ картинку нужного размера с прозрачной серединкой с закруглёнными углами (внутри), а непрозрачные части - под цвет фона сайта.
HTML будет примерно так:
[xfgiven_image][full-link][xfgiven_image]<div class="imgb"></div>[/full-link][/xfgiven_image]
Далее пишем в css чтото вроде этого:
.imgw a {
display: block;
overflow:hidden;
position: relative;
width:184px;
height:253px;
}
.imgw img {
width:184px;
height:253px;
border: none;
}
.imgb {
position: absolute;
top: 0;
left: 0;
width:184px;
height:253px;
background: url(../images/imgb.png) no-repaet 0 0; /*наша картинка*/
}Пробуйте, я не проверял.
