Скругленные углы таблицы при помощи CSS

Подпишись на наши RSS Уроки по Фотошоп , просто щелкнув по иконке.

Новинка! Узнайте о Самом Результативном Способе Изучения Фотошопа, Без Посещения Дорогих Курсов, Без Черно-Белых Самоучителей и Без Метода Тыка!

10 Часов Практических Уроков Записанных с Экрана Монитора с Подробными Аудио-Комментариями сделают из Вас настоящего Учителя Фотошоп!

Подробнее..

Создаём новогоднюю поздравительную открытку

Создаём сложное выделение волос

Превращаем современную фотографию в старую

Создаём разноцветную светящуюся спираль

Наносим естественную татуировку в Фотошопе

Уроки по сайтостроению - Рубрика: CSS

Скругленные углы таблицы при помощи CSS

Одна из самых распространённых проблем при вёрстке макетов является создание закруглённых углов у таблиц и блоков на страницах и приходиться их рисовать, а затем, совершая «танцы с бубном» прикреплять их на страницу, да ещё и следить за кроссбраузерностью вёрстки. Попытаемся решить эту проблему только с помощью CSS.

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

Для примера воспользуемся табличной вёрсткой, но тут главное понять сам процесс, тогда и в случае вёрски с помощью слоёв не будет проблем. И так, как уже было сказано, можно делать так:

< table>
< tr>
< td background="corner_left_top.gif">< /td>
< td>< /td>
< td background="corner_right_top.gif">< /td>
< /tr>
< tr>
< td>< /td>
< td>Ваш контент< /td>
< td>< /td>
< /tr>
< tr>
< td background="corner_left_bottom.gif">< /td>
< td>< /td>
< /tr>
< td background="corner_right_bottom.gif">< /td>
< /table>

или

< table>
< tr>
< td>< img src="corner_left_top.gif">< /td>
< td>< /td>
< td>< img src="corner_right_top.gif">< /td>
< /tr>
< tr>
< td>< /td>
< td>Ваш контент< /td>
< td>< /td>
< /tr>
< tr>
< td>< img src="corner_left_bottom.gif">< /td>
< td>< /td>
< td>< img src="corner_right_bottom.gif">< /td>
< /tr>
< /table>

Возьмём div объект и попытаемся создать округлую форму, используя только правила CSS.

По умолчанию, каждый элемент имеет определённую высоту, в зависимости от типа вашего браузера. По этому, очень важное для нас свойство приобретает правило overflow, и для запрета отображения размерности контейнера, ему следует придать значение hidden.

Но можно сделать это всё более продвинуто, избегая использования лишних рисунков, например с помощью JavaScript или CSS. При этом, использование JavaScript, влечёт за собой применение довольно больших и тяжёлых скриптов, так, что уж лучше даже использовать изображения скруглённых углов. А вот вслучае использования CSS представляется достаточно возможностей небольшими затратами построить нужную форму объекта.

Для того, чтобы создать закруглённый угол с помощью CSS, необходимо использовать ряд независимых в плане разметки веб-страниц объектов. Ими могут выступать div, span, b, i и многие другие объекты, которые не имея внутри себя никакого контента, не подчиняются никакому правилу "по умолчанию" и не отображаются на странице.

< style type="text/css">
#block{width:200px}
#1{margin:0}
#2, #3, #4, #5, #6, #7, #8, #9{height:1px;overflow:hidden;background:#0099cc}
#2, #9{margin:0 5 0 5px}
#3, #8{margin:0 3 0 3px}
#4 ,#7{margin:0 2 0 2px}
#5, #6{margin:0 1 0 1px}
#content{padding:5px;background:#0099cc;font:11px Verdana;color:#000}
< /style>
< div id="block">
< div id="1">
< div id="2">< /div>
< div id="3">< /div>
< div id="4">< /div>
< div id="5">< /div>
< div id="5">< /div>
< /div>
< div id="content">

Ваш контент

< /div>
< div id="1">
< div id="6">< /div>
< div id="6">< /div>
< div id="7">< /div>
< div id="8">< /div>
< div id="9">< /div>
< /div>
< /div>

Как видите, всё проще некуда, единственным недостатком данного способа закругления углов в css является не поддерживание данной технологии некоторыми уставшими версиями браузеров. Но как и технологии, так и сами Интернет-навигаторы совершенствуются и будем надеяться в дальнейшем проблем с этим не будет…

Пользуйтесь на здоровье.

C наступающим новым годом !!!

Если хотите не упустить данный урок, добавьте его в закладки:

Хотите освоить весь Фотошоп с нуля?

Рекомендую Вам курс "Учитель Фотошопа в видеоформате", который состоит из 2-х частей: теоретической и практической. Все уроки даны в видеоформате с подробным озвучиванием всех выполняемых действий. Именно такой подход в изучении, позволит Вам в максимально короткие сроки овладеть всеми аспектами работы в Фотошоп.

Узнать подробнее

Рейтинг:

Добавлено: 2008-12-20 Просмотров: 2154 Сайт-источник: photoshop-php.ru

Комментарии (2)

Комментарий by Слава, От 2009-12-09

чет не очень понятный урок!!!!!!!

Комментарий by Александр, От 2010-02-23

чесно, не оч((

Оставить комментарий:

Рассылка - "Лучшие видеоуроки Фотошоп даром". Подписавшись на неё, Вы 2 раза в месяц будете получать на свой почтовый ящик, ссылки на лучшие уроки по работе в программе Adobe Photoshop совершенно бесплатно!

Лучшие уроки по Фотошопу 2 раза в месяц!

Ваше имя на русском: *

Ваш Email адрес: *

Подпишитесь сейчас и получите доступ к разделу "Лучшие уроки Фотошопа".

Если Вы давно мечтаете о создании собственного сайта на движке Drupal, то советую Вам обратить внимание на мой новый видеокурс "Drupal - Как создать профессиональный сайт с нуля". Это более 100 видеоуроков из которых Вы узнаете, как создать 4 сайта различной напрвленности, сложности и функционнальности.

Узнать подробнее

По умолчанию область, которая остается за рамками кадра при использовании инструмента Crop (Кадрирование), затенена, чтобы вы лучше видели конечный результат. Если это кажется вам неудобным, снимите флажок Shield на панели опций, прежде чем растягивать рамку кадрирования.

Узнать больше