PDA

Просмотр полной версии : Скругленные углы блоков в Css


smOleg
28.02.2008, 23:45
Нашел скриптик на ЖС но он очень шото. Он скругляет добавляя в конец и вначало блока несколько блоков в 1пх.. иллюзия скругления.

Не подходит восновном т.к. эти добавочние блоки становатся сразу сначала и вконец контента внутри блока. Ну задал height и границы блока стают нужной высоты а скругления бегают за текстом.
(канеш можна внутр. отступами както но нада шоб контент менялся а скругления на месте были..)

А картинки не хочу использовать (это мое тестовое задание на работу хочу покруче :D )

Вобщем подскажите решение, если оно есть канеш %)

Чтоб на бекграунд както кинуть динамически созданный прямоугольний со скругленными углами со сторонами как ширина и высота блока %)

Вобщем кто с этим имеет дело поделитесь може у вас есть нестандартный способ

Ох уж эта мода на висту :rolleyes: У меня вот например оформление все квадратное и меня устраивает :D . И нах им эти кругляки и градиенты.

Кстати може можна градиент сделать не картинкой? :D

scrat
29.02.2008, 00:07
Вот (http://dimox.name/smooth_rounded_corners_no_images/) к примеру метод.Я так понимаю твой js-скрипт реализует именно его.Насколько мне известно можно только с помощью CSS/изображений

smOleg
29.02.2008, 00:12
Да. Тоже самое. Только я нашел чел на англиском писал. И главно все пишут от первого имени будто это их идея :rolleyes:

astrologer
29.02.2008, 00:37
это мое тестовое задание на работу хочу покручемда...
Всё очень просто.
Без графики совсем обойтись не удастся, если нужен кроссбраузерный вариант.

С помощью JS можно сгенерировать векторную графику SVG. В данном случае понадобится один-единственный кружок, ненужные части которого обрезаются CSS-свойством "clip".

т.к. формат SVG - суть простая разметка, проблем с этим возникнуть не должно.
За исключением IE, который вместо SVG поддерживает VML. Остаётся только написать на JS код абстракции над SVG и VML и тебя возьмут на работу.

Midas
29.02.2008, 03:26
Границы в CSS3
6 октября, 2007

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

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

Для создания границы используется свойство border-radius, которое задаёт радиус закругления углов. Например, border-radius: 5px.
Кроме того, предусмотрены свойства, позволяющие закруглить любой из углов блока отдельно. Например, для верхнего правого угла используется свойство border-top-right-radius. Если для этого свойства будут заданы два числа, то граница будет эллиптической.
Подробнее почитать о закруглённых границах (и не только о них) можно на официальном сайте (http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-radius).

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

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

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

http://www.simplecoding.org/granicy-v-css3.html

Дикс
29.02.2008, 08:13
Для создания границы используется свойство border-radius, которое задаёт радиус закругления углов. Например, border-radius: 5px.
...
Если говорить конкретнее, то нужен или Firefox или Safari 3.

чет пи*дёж и провокация. ниче ff не скругляет, только что проверил.

etc
29.02.2008, 09:54
Украдите CSS из phpBB3 :) Я лично их кссами пользуюсь

astrologer
29.02.2008, 16:37
чет пи*дёж и провокация. ниче ff не скругляет, только что проверил.
-moz-border-radius
-khtml-border-radius ;)
Украдите CSS из phpBB3 Я лично их кссами пользуюсьНехорошо

scrat
29.02.2008, 17:33
Нехорошо
Вообщето открытость исходников это подрузумевает.Просто нужно указать от куда ты это взял.

DIAgen
29.02.2008, 17:50
Читать тута
http://habrahabr.ru/blog/webdev/36812.html

astrologer
29.02.2008, 18:13
Вообщето открытость исходников это подрузумевает.Просто нужно указать от куда ты это взял.Ну если он пишет "украдите" - то это без указания источника, что есть нехорошо.