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 Комментарии (18) »

]]>

Вы можете оставить комментарий. Трекбеки закрыты.

  • cassand

    Прикольно ) интересно, как можно его применить, чтобы не просто сделать скругление, а красиво его сделать?

    • http://www.simplecoding.org/ Владимир

      Задать можно радиус и форму уголка (сделать его эллиптическим). Насколько это будет красиво – зависит от вас ;)

  • cassand

    Прикольно ) интересно, как можно его применить, чтобы не просто сделать скругление, а красиво его сделать?

    • http://www.simplecoding.org/ Владимир

      Задать можно радиус и форму уголка (сделать его эллиптическим). Насколько это будет красиво – зависит от вас ;)

  • http://cgr-volga.ru/ Владимир

    Наконец, заколебался бороться с закруглениями, методов 20 перепробовал, и сирано не то.

  • http://cgr-volga.ru/ Владимир

    Наконец, заколебался бороться с закруглениями, методов 20 перепробовал, и сирано не то.

  • Betaboy

    Подскажите, как сделать наклонный градиент, заданный в градусах, для webkit, как здесь? http://emfire.ru/

  • http://www.simplecoding.org Владимир

    Для угла 45 градусов
    -webkit-gradient(linear, left top, right bottom, from(#00abeb), to(#fff));

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

    Подробнее здесь.

  • Betaboy

    Спасибо за ответ Владимир! Я это читал, но удивился что нет градусов, в ФФ то они есть! )) С числами сделать не получается… градиент не идет как в примере…

  • http://www.simplecoding.org Владимир

    Попробуйте так:
    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, но это не то, это бред если чесно, для прямых градиентов если только…

    Сервис видел, он и надоумел заморочиться. ))

  • http://www.simplecoding.org Владимир

    Это еще вопрос у кого правильно. Когда вы создаете градиент, например,
    в Photoshop'е, то указываете начальную и конечную точку, а не угол.
    Чтобы пересчитать градусы в координаты точек, нужно записать уравнение
    прямой по которой строится градиент.

  • Betaboy

    Градиент всегда задается в градусах, в Шопе, Флеше, Иллюстраторе… Если даже вы задаете его точками в ручную, во всех панелях и программно он указан в градусах. В Шопе это свойства слоя…

    По методу webkit — невозможно чётко задать градус градиента, учитывая что размер контейнера всегда может изменится.

  • http://www.simplecoding.org Владимир

    Насчет размера контейнера вы правы. Придется динамически пересчитывать
    (с помощью JS).

  • Betaboy

    Ага )) Хотя webkit тоже не дураки, уверен их вариант чем-то обоснован.

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

    Вроде интересный конструктор, попробую покрутить.

  • Betaboy

    П.С. Какой же крутой этот disqus!

  • Siki

    Владимир, а как сделать такой эффект у панели (шапки) – http://www.urealty.ru ? КСС?

    • http://www.simplecoding.org Владимир

      Красиво получилось.

      Используется и CSS и JavaScript.
      Работает примерно так.
      Основная картинка (со зданиями) установлена в качестве фона для body.
      В самом начале страницы идут два пустых div'а с жестко заданной высотой в пикселах.

      При нажатии на кнопку "Вверх" для второго div'а (#headBg) устанавливается правило display:none и он исчезает со страницы. При этом остальная часть страницы (таблица с основным содержимым) двигается вверх.

      Одновременно изменяется с помощью JS фоновая картинка для кнопки (т.е. кнопка Вверх превращается в кнопку Вниз).

      При нажатии на кнопку Вниз для #headBg устанавливается правило display:block и он появляется на странице, т.е. содержимое уходит вниз.

      Самый первый div используется чтобы оставить зазор от верхнего края страницы.

]]>
Tweet