Делаем круглые углы картинок при помощи CSS!

bork75

bork75

The Team
Регистрация
21 Июн 2008
Сообщения
1.455
Реакции
734
Результат применения:
y5UEqoBi.jpg


<style type="text/css">
#box {
width:170px;
height:97px;
background: url('http://s1.ipicture.ru/uploads/20110423/thumb/27gd44cG.jpg') top left no-repeat;

/* Opera, IE 9 */
border-radius: 20px;
/* WebKit (Safari/Chrome) */
-webkit-border-radius: 20px;
/* KHTML (Konquerer) */
-khtml-border-radius: 20px;
/* Gecko (Firefox) */
-moz-border-radius: 20px;
}
</style>

<div id="box"></div>
Нажмите для раскрытия...


Параметр CSS3 border-radius видит:
Firefox (начиная с версии 3.0)
Safari (начиная с версии 3.1)
Chrome (начиная с первой версии)
Opera 10 и выше
IE 9 - не известно

У кого есть IE9, посмотрите, работает?
 
IE9 поддерживает border-radius, в метах указываем
Код: 
<meta http-equiv="X-UA-Compatible" content="IE=9" />


или для всех IE < 9 используем что-то вроде этого
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
 
alica написал(а):
или для всех IE < 9 используем что-то вроде этого
*** скрытое содержание ***
Нажмите для раскрытия...

css3 pie очень круто доработали код.
Целый день сегодня играюсь с настройками для ie.
Спасибо alica :ay:
--------------
Для тех, кто захочет добавить возможность делать круглые углы в браузерах ниже 9, нужно добавить всего лишь одну строчку в css
behavior: url(PIE.htc);
И скачать этот файл по ссылке выше.
 
а 20px зависит от размера картинки, или это стандартный размер?
 
zek24 написал(а):
а 20px зависит от размера картинки, или это стандартный размер?
Нажмите для раскрытия...
Размер скругления зависит уже от тебя ) Выстави другое значение и посомтри на картинку )

Рекомендую вот тут почитать:
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
 
Ну если уж затронули css3, надо написать еще и про градиенты, заливки там плавные, переходы цветов и прочие плюшки :) Или все вместе с красивой рамкой :)
Картинки Не используются.
fa9f3e0b154b.jpg

Код: 
.box7{
	margin: 50px;
	width: 320px;
	min-height: 150px;
	padding: 0 0 1px 0;
	position:relative;
	background: #fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}
.box7:before{
	content: '';
	position:absolute;
	width: 130px;
	height: 30px;
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.1);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform:translate(-50px,10px)
						skew(10deg,10deg)
						rotate(-50deg);
	-moz-transform:translate(-50px,10px)
						skew(10deg,10deg)
						rotate(-50deg);
		-o-transform:translate(-50px,10px)
						skew(10deg,10deg)
						rotate(-50deg);
		transform:translate(-50px,10px)
						skew(10deg,10deg)
						rotate(-50deg);
}
.box7:after{
	content: '';
	position:absolute;
	right:0;
	bottom:0;
	width: 130px;
	height: 30px;
	background: rgba(0, 0, 0, 0.1);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform: translate(50px,-20px)
						skew(10deg,10deg)
						rotate(-50deg);
	-moz-transform: translate(50px,-20px)
						skew(10deg,10deg)
						rotate(-50deg);
	-o-transform: translate(50px,-20px)
						skew(10deg,10deg)
						rotate(-50deg);
	transform: translate(50px,-20px)
						skew(10deg,10deg)
						rotate(-50deg)
}
 
Bizzaro
в опере не работают градиенты.
 
UDAV написал(а):
Bizzaro
в опере не работают градиенты.
Нажмите для раскрытия...

Вот тут почитай на офф сайте разработчиков Оперы -
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.


Линейные градиенты поддерживаются, радиальные пока нет.

И вот еще в Опере 11.10 beta с кодовым названием baraccuda

Barracuda improves CSS3 support by adding multi-column layout and gradients — Web 2.0 of the world, rejoice!
Нажмите для раскрытия...
 
В 9 IE пашет, но как то кривенько!
 
bork75 написал(а):
css3 pie очень круто доработали код.
Целый день сегодня играюсь с настройками для ie.
Спасибо alica :ay:
--------------
Для тех, кто захочет добавить возможность делать круглые углы в браузерах ниже 9, нужно добавить всего лишь одну строчку в css
behavior: url(PIE.htc);
И скачать этот файл по ссылке выше.
Нажмите для раскрытия...


Если только круглые уголки нужны - лучше использовать вот такой border-radius.htc, чем PIE.htc - он весит 4.8кб, а PIE - целых 34.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху