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

Владимир | | CSS.

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

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

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

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

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

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

Постовой

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

  • cassand

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

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

  • cassand

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

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

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

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

  • 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!

  • Siki

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

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

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

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

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

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

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