VPF::что лучше использовать для закруглённых краёв

supervladislav

Дата 14.3.2008, 09:05 (ссылка)

(нет голосов)

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9

зы народ бьюсь над такой проблемой как закруглённые края ,подскажите как лучше это сделать?
Я имею ввиду ,что лучше использовать какой софт ,я использовал корел12 ,в фотошопе я такой функции не нашол,а есть ли небольшие программы для подобного.И как лучше сверстать подобное ,можно ли например в каждом углу таблицы дивами расположить закруглённые края дивами ,а цвет ячейки поставить цвет рамок.

NDenis

Дата 14.3.2008, 10:08 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

В фотошопе есть функция Select-Modify-Smooth, которая хорошо закругляет уголки (правда не так плавно, пиксели все-равно видны).
По поводу верстки блоков с закругленными краями уже не раз говорилось. Поиск по форуму, гуглю вам поможет

bars80080

Дата 14.3.2008, 10:11 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

Цитата

можно ли например в каждом углу таблицы дивами расположить закруглённые края дивами

можно,
закладываете четыре дива друг в друга, растягивая по всей ячейке, и для каждого

Код


#div1 { background-image: url(top-left.png); background-position: top left; background-repeat: no-repeat; }
#div1 { background-image: url(top-right.png); background-position: top right; background-repeat: no-repeat; }
#div1 { background-image: url(bottom-left.png); background-position: bottom left; background-repeat: no-repeat; }
#div1 { background-image: url(bottom-right.png); background-position: bottom roght; background-repeat: no-repeat; }

Цитата

цвет ячейки поставить цвет рамок.

Код


div { border: solid 1px #ff0000; background: #ff0000; }

supervladislav

Дата 14.3.2008, 13:01 (ссылка)

(нет голосов)

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9

спасибо

SelenIT

Дата 14.3.2008, 13:07 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

В 7-м и последующих фотошопах есть векторные формы (Shapes, по-моему), одна из них - прямоугольник с закругленными углами. Плюс всегда можно нарисовать круг и разрезать на четыре сектора...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

WebDisaster

Дата 14.3.2008, 16:55 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

Цитата(SelenIT @ 14.3.2008, 13:07

)

фотошопах есть векторные формы (Shapes, по-моему),

Совершенно верно. Инструмент Rounded Rectangle Tool вызывается нажанием Shift+U. В панели свойств инструмента можно выставить любой радиус скругления.

_alias

Дата 14.3.2008, 17:28 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 11.3.2008

Репутация: нет
Всего: нет

Есть масса способов сделать заокругленные края у элемента, используя для этого исключительно CSS.

SelenIT

Дата 14.3.2008, 18:04 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

"Используя исключительно CSS" способ только один, и работает он пока только в мозилловском семействе. Все остальное требует как минимум или графики, или дополнительной разметки (а чаще того и другого вместе).

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

_alias

Дата 14.3.2008, 18:29 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 11.3.2008

Репутация: нет
Всего: нет

Цитата(SelenIT @ 14.3.2008, 18:04

)

"Используя исключительно CSS" способ только один, и работает он пока только в мозилловском семействе

Вот этот прекрасно работает и в майкрософтовском семействе, начиная с 6 поколения.

Добавлено через 3 минуты и 48 секунд
А насчет "исключительно CSS", это я и вправду погорячился: конечно же, все требуют разметки и большинство - javascript

Добавлено через 7 минут и 41 секунду
Кстати, может кому полезно будет - вот нашел онлайн-генератор скругленных блоков. Вы указываете нужные цвета и радиус уголков, он создает нужные картинки, html и css.

bars80080

Дата 14.3.2008, 19:06 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

Цитата

вот нашел онлайн-генератор скругленных блоков

преотличная штука,
чтоб такое найти для автономного пользования?

SelenIT

Дата 14.3.2008, 20:00 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Кстати, раз уж зашла речь о майкрософтовском семействе, то у него еще с 5-го поколения есть еще более занятная штука под названием VML (пример).

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

KonstRuctor

Дата 14.3.2008, 20:05 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 245
Регистрация: 31.3.2006
Где: Россия, Санкт-Пет ербург

Репутация: нет
Всего: нет

ребята, вот классическая статья про закругление краев.
использовал этот метод, отлично работает IE6, IE7, FF, Opera.
http://designformasters.info/posts/round-corners-no-image/

supervladislav

Дата 14.3.2008, 20:13 (ссылка)

(нет голосов)

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9

Цитата(bars80080 @ 14.3.2008, 10:11)

Цитата

можно ли например в каждом углу таблицы дивами расположить закруглённые края дивами

можно,
закладываете четыре дива друг в друга, растягивая по всей ячейке, и для каждого

Код


#div1 { background-image: url(top-left.png); background-position: top left; background-repeat: no-repeat; }
#div1 { background-image: url(top-right.png); background-position: top right; background-repeat: no-repeat; }
#div1 { background-image: url(bottom-left.png); background-position: bottom left; background-repeat: no-repeat; }
#div1 { background-image: url(bottom-right.png); background-position: bottom roght; background-repeat: no-repeat; }

Цитата

цвет ячейки поставить цвет рамок.

Код


div { border: solid 1px #ff0000; background: #ff0000; }

чего-то неработате
простите за тупизьм а сколько дивов должно быть в самом коде?
И ведь всёрано где они будут находиться?

Это сообщение отредактировал(а) supervladislav - 14.3.2008, 20:29

supervladislav

Дата 14.3.2008, 20:34 (ссылка)

(нет голосов)

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9

что я не так делаю

Код


#ram{background-image:url(levoverh.png);background-position:top left;background-repeat:no-repeat;width:45px;height:47px;}
#ram{background-image:url(pravoverh.png);background-position:top right;background-repeat:no-repeat;width:47px;height:45px;}
#ram{background-image:url(pravoniz.png);background-position:battom right;background-repeat:no-repeat;width:47px;height:45px;}
#ram{background-image:url(levooverh.png);background-position:battom left;background-repeat:no-repeat;width:45px;height:47px;}

в тексте стоит вот такое

Код


<div id="ram"></div>

ilyaILF

Дата 14.3.2008, 20:53 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 70
Регистрация: 8.11.2006

Репутация: 6
Всего: 6

К сожалению только спецификация CSS-3 поддерживает "прикрепление" нескольких бэкгроундов к одному элементу http://www.w3.org/TR/css3-background/#the-background-image
В вашем же случае придется создавать целых четыре вложенных элемента, каждый из которых будет содержать отдельный бэкгроунд:

Код


<div id="ram1">
<div id="ram2">
<div id="ram3">
<div id="ram4">

</div>
</div>
</div>
</div>

Код


#ram1{background-image:url(levoverh.png);background-position:top left;background-repeat:no-repeat;width:47px;height:47px;}
#ram2{background-image:url(pravoverh.png);background-position:top right;background-repeat:no-repeat;width:47px;height:47px;}
#ram3{background-image:url(pravoniz.png);background-position:battom right;background-repeat:no-repeat;width:47px;height:47px;}
#ram4{background-image:url(levooverh.png);background-position:battom left;background-repeat:no-repeat;width:47px;height:47px;}

И скорее всего значения габаритов должны быть одинаковыми у этих элементов, если не достигается иной эффект.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »