Web разработка. Границы в CSS3.

6 октября, 2007

Стандарт CSS3 на сегодняшний день ещё находится в разработке. Но уже можно поэкспериментировать с некоторыми новыми возможностями. Одной из таких возможностей является поддержка закруглённых углов границ.

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

Для создания границы используется свойство border-radius, которое задаёт радиус закругления углов. Например, border-radius: 5px.
Кроме того, предусмотрены свойства, позволяющие закруглить любой из углов блока отдельно. Например, для верхнего правого угла используется свойство border-top-right-radius. Если для этого свойства будут заданы два числа, то граница будет эллиптической.
Подробнее почитать о закруглённых границах (и не только о них) можно на официальном сайте.

Также советую посмотреть примеры на css3.info.

К сожалению, пока все эти возможности работают далеко не во всех браузерах. Если говорить конкретнее, то нужен или Firefox или Safari 3. Пользователям IE, скорее всего, придётся ждать новую версию браузера (хорошо если одну :-) ).
Так что, широкое использование этих технологий мы увидим ещё не скоро. Но, все таки приятно, что CSS развивается, а разработчики стандарта учитывают тенденции в современном web дизайне (хоть и с опозданием).

P.S. Люди, пользуйтесь нормальными браузерами :-)

Постовой

Французский бульвар – выдержанное вино и шампанское

Понравилась статья? Подписывайтесь на продолжение rss link !

Или на мой твиттер twitter link

]]>

Добавьте эту страницу в google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

]]>

Опубликовано в CSS View Comments

]]>
  • Betaboy
    Подскажите, как сделать наклонный градиент, заданный в градусах, для webkit, как здесь? http://emfire.ru/
  • Для угла 45 градусов
    -webkit-gradient(linear, left top, right bottom, from(#00abeb), to(#fff));

    Вместо констант (left, top, right, bottom) можно использовать числа - координаты начальной и конечной точки градиента. Для каждой точки задается два числа, которые разделяются пробелом.

    Подробнее здесь.
  • Betaboy
    Спасибо за ответ Владимир! Я это читал, но удивился что нет градусов, в ФФ то они есть! )) С числами сделать не получается... градиент не идет как в примере...
  • Попробуйте так:
    background: -webkit-gradient(
    linear,
    left 100,
    150 10,
    color-stop(0.34, rgb(134,102,237)),
    color-stop(0.5, rgb(135,255,187)),
    color-stop(0.84, rgb(255,160,255))
    );

    Вообще есть хороший сервис
    http://gradients.glrzad.com/
  • Betaboy
    Не, не то )) Зря они так намудрили, с ФФ пример нужно брать. Произвольный градус не задать. Максимум что вышло похожего - это словами left bottom, right top, но это не то, это бред если чесно, для прямых градиентов если только...

    Сервис видел, он и надоумел заморочиться. ))
  • Это еще вопрос у кого правильно. Когда вы создаете градиент, например,
    в Photoshop'е, то указываете начальную и конечную точку, а не угол.
    Чтобы пересчитать градусы в координаты точек, нужно записать уравнение
    прямой по которой строится градиент.
  • Betaboy
    Градиент всегда задается в градусах, в Шопе, Флеше, Иллюстраторе... Если даже вы задаете его точками в ручную лайв инструментом, во всех панелях и программно он указан в градусах. В Шопе это свойства слоя...

    По методу webkit -- невозможно задать конкретный градус градиента, учитывая что размер контейнера в основном всегда изменяется.
  • Насчет размера контейнера вы правы. Придется динамически пересчитывать
    (с помощью JS).
  • Betaboy
    Ага )) Хотя webkit тоже не дураки, уверен их вариант чем-то обоснован.

    На соседнем форуме ссылку подкинули про градиенты: http://www.westciv.com/tools/gradients/index.html

    Вроде интересный конструктор, попробую покрутить.
  • Betaboy
    П.С. Какой же крутой этот disqus!
  • Наконец, заколебался бороться с закруглениями, методов 20 перепробовал, и сирано не то.
  • cassand
    Прикольно ) интересно, как можно его применить, чтобы не просто сделать скругление, а красиво его сделать?
  • Задать можно радиус и форму уголка (сделать его эллиптическим). Насколько это будет красиво - зависит от вас ;)
blog comments powered by Disqus ]]>