Главная » CSS » Закругляем углы

Закругляем углы

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

Существует несколько способов решения данной проблемы (точнее будет сказать задачи):
 

 

  • можно использовать заранее подготовленные кусочки (нарезку) сглаженных уголков, и при отображении страницы склеивать эту нарезку при помощи таблиц
  • тоже самое, что и Выше, но с использованием Блоков
  • можно использовать не уголки, а целые куски со сглаженными углами и прозрачным фоном для верхней части и для нижней, для отображения и склеивания использовать таблицы
  • тоже что и в пункте выше, но с использованием блоков
  • можно воспользоваться трюком, и вставлять несколько пустых блоков высотой в 1 пиксель до контента, и после, причем, каждый из последующих либо шире предыдущих (для верхней части), либо уже предыдущих блоков (для нижней части).
  • и конечно же, различные комбинации из приведенного выше


Предлагаю обсудить достоинства и недостатки всех перечисленных выше способов.

 

 

 

 

1.Использовать заранее подготовленную нарезку, содержащую изображения всех четырех уголков.

У этого способа есть несколько существенных недостатков:

 

  • вы занимаете используете сразу четыре изображения
  • для склеивания и отображения на экране Вы будете использовать таблицы, а это громоздко и лишний код
  • если же Вы будете использовать блоки, то для склеивания Вам понадобится абсолютное позиционирование, а это тоже достаточно много лишних строк


Способ рабочий, однако не практичный, слишком много строк кода

 

2.Можно использовать не уголки по отдельности, а целые блоки со сглаженными углами.

У этого способа тоже есть пару менее существенных, чем у предыдущего, но все же, весомых недостатков:

  • при создании такого блока, у Вас получится три блока:
    - Верхний, содержащий верхнюю часть сглаженного участка
    - Средний, содержащий основной контент
    - Нижний, содержащий нижнюю сглаженную часть
    А это в свою очередь делает Ваш код достаточно большим
  • если будете использовать таблицы, то это слишком громоздко на мой взгляд
  • если использовать блоки, то это уже не плохо

Код может выглядеть вот так:

<DIV class="news">
<div class="head">Новости</div>
<div class="content"></div>
<div class="footer"></div>
</div>

CSS код будет выглядеть вот так:

 

<STYLE TYPE="TEXT/CSS">
.news{margin:0;padding:0;}
.head{background:#ea6883 URL(top.gif) no-repeat 0 0; width:200px;height:23px}
.content{background-color:#8f8ddb;width:200px;height:200px}
.footer{background:#ea6883 URL(foot.gif) no-repeat 0 0; 
width:200px;height:21px}
</STYLE>

Но эта конструкция не совсем оптимальна, можно кое-что убрать, например:

Самая оптимальная на мой взгляд конструкция, это сделать заголовок такого блока в теге <H1>, а основной контент в <P>, нижнюю же часть Вы можете поместить в <SPAN>или <B>, и в итоге:

<DIV class=”news”>
<H1>Новости</H1>
<P></P>
<B class="footer"></B>
</DIV>

Графически все это создается при помощи CSS свойств, т.е.:

<STYLE TYPE="TEXT/CSS">
.news{margin:0;padding:0;}
.news H1{
background:url('/top.gif') no-repeat 0 0;
width:200px;
height:23px;
margin:0;
padding:0;
text-align:center;
font:15px/23px Verdana}
.news P{
background-color:#8f8ddb;
width:180px;
*width:200px;
height:200px;
margin:0;
padding:0 10px;}
.footer{
background:url('/foot.gif') no-repeat 0 0; 
width:200px;
height:21px;
margin:0;
padding:0}
</STYLE>

 

3.Воспользоваться несколькими пустыми блоками с фоновым цветом и высотой в 1 пиксель, причем уже или шире предыдущих (это зависит, от местоположения этих блоков).

Метод очень простой, чтобы создать иллюзию сглаживания, или, закругления углов блока, Вы делаете:

  • выбираем тег, который будет нашими углами (лучше всего использовать тег в одну букву, чтобы меньше занимал места), например <b>.
  • делаете его блоком с шириной Вашего окна, и фоновым цветом, который Вы хотите видеть в заголовке этого окна
  • дальше проще, вставляете новые блоки один за другим, каждый уже или шире, чем остальные

У этого способа тоже существует недостатки:

  • лишние теги, лишнее место
  • Вы не сможете вставить текст в места сглаживания блоков (и у Вас получается эдакая мертвая зона)

Внешне конструкция может выглядеть так:

<DIV class=”block”>
<b class=”t1”></b><b class=”t2”></b><b class=”t3”></b>
<DIV class=”content”></DIV>
<b class=”t3”></b><b class=”t2”></b><b class=”t1”></b>
</DIV>

.t1,.t2,.t3{display:block;height:1px;background-color:#ea6883}
.t1{margin:0 5px}
.t2{margin:0 3px}
.t3{margin:0 1px}

.content{padding:10px}

На мой взгляд будет правильней использовать второй способ, т.к. можно написать заголовок такого блока в тегах <H1></H1>, а это очень весомо для поисковиков.

В третьем способе Вы тоже можете выделить название заголовка такого блока, но это будет уже еще одним тегом, и, следовательно лишним кодом.

Учитесь стремится к оптимальному коду, это и отделяет нас от всех «знатоков» кодинга, и верстки.

Желаю Вам удачи.




Рекомендуем почитать

 

Добавить комментарий


Ваше имя:


Комментарий:


Введите: Картинка