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

Тема в разделе "Веб-дизайн", создана пользователем bork75, 23 апр 2011.

Модераторы: zek24
  1. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.450
    Симпатии:
    717
    Результат применения:
    [​IMG]


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

    У кого есть IE9, посмотрите, работает?
     
    Bizzaro нравится это.
  2. alica

    alica

    Регистр.:
    28 июл 2008
    Сообщения:
    243
    Симпатии:
    76
    IE9 поддерживает border-radius, в метах указываем
    Код:
    <meta http-equiv="X-UA-Compatible" content="IE=9" />

    или для всех IE < 9 используем что-то вроде этого
    http://css3pie.com
     
    t3s, AleksWhite, porsche2 и ещё 1-му нравится это.
  3. bork75

    bork75 The Team

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

    zek24

    Moderator
    Регистр.:
    14 ноя 2009
    Сообщения:
    778
    Симпатии:
    233
    а 20px зависит от размера картинки, или это стандартный размер?
     
  5. sergik74

    sergik74

    Регистр.:
    19 апр 2007
    Сообщения:
    295
    Симпатии:
    68
    Размер скругления зависит уже от тебя ) Выстави другое значение и посомтри на картинку )

    Рекомендую вот тут почитать:
    http://designzo.com/2010/03/css3-border-radius/
     
  6. Bizzaro

    Bizzaro Постоялец

    Регистр.:
    1 фев 2010
    Сообщения:
    79
    Симпатии:
    17
    Ну если уж затронули css3, надо написать еще и про градиенты, заливки там плавные, переходы цветов и прочие плюшки :) Или все вместе с красивой рамкой :)
    Картинки Не используются.
    [​IMG]
    Код:
    .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)
    }
    
     
  7. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    776
    Симпатии:
    153
    Bizzaro
    в опере не работают градиенты.
     
  8. Bizzaro

    Bizzaro Постоялец

    Регистр.:
    1 фев 2010
    Сообщения:
    79
    Симпатии:
    17
    Вот тут почитай на офф сайте разработчиков Оперы -
    http://dev.opera.com/articles/view/css3-linear-gradients/

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

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

     
  9. zzzkabanzzz

    zzzkabanzzz Создатель

    Регистр.:
    15 июн 2011
    Сообщения:
    56
    Симпатии:
    4
    В 9 IE пашет, но как то кривенько!
     
  10. kos1986

    kos1986 Постоялец

    Регистр.:
    29 окт 2007
    Сообщения:
    118
    Симпатии:
    61

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


    Перейти по ссылке