Разработка сайтов для СРО

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Создание и раскрутка сайтов в Интернете

Что нужно для SEO?

Текст & Всемирная Паутина

Инструмент веб-строителя

HTML - язык гипертекста

CSS - каскадные таблицы стилей

Поисковая оптимизация

Что такое раскрутка сайта?

Контекстная реклама

Что такое обмен ссылками?

Почтовые рассылки

Соблюдайте правила

Что препятствует рейтингу?

Что такое CMS?

Краткий словарь терминов

Полезные книги

Карта сайта

Этапы создания сайта

Десять важных шагов

Разработка семантического ядра

Обновление информации

Заголовки

Проверка ссылок

Проверка ошибок в коде

Шрифтовое оформление

Навигация по сайту

Метаданные

Выбор кодировки

Ключевые слова

 
Разработка сайтов под ключ

Ссылки по теме

Blogger: Создайте блог БЕСПЛАТНО

WordPress: Платформа для ведения блога

Online-переводчик :: Компания ПРОМТ

Поисковая оптимизация – все дело в написании текстов

Стратегия продвижения сайтов

Новые исследования поискового поведения пользователей

Орфографические словари

Словарь русских синонимов Абрамова

Орфографический словарь Лопатина

Современный словарь иностранных слов

Толковый словарь русского языка Ожегова

Архивы форума "Говорим по-русски"

FAR — программа управления файлами и архивами

FCKEditor - текстовый редактор для браузера

NotPad++ - текстовый редактор

PSPad — текстовый редактор

UltraEdit-32 - текстовый редактор

Nvu - HTML редактор

CoffeeCup - HTML редактор

 

Прямоугольники с закругленными углами на основе CSS

Главная « Уроки Web-мастерства « Прямоугольники с закругленными углами на основе CSS

версия для печати

Способы закругления углов прямоугольника …

Закругленные углы весьма модны в современном Web-дизайне. Из-за того, что Web-дизайн в основе своей - прямоугольный, закругленные углы с помощью графики, которая имеется в составе структурной разметки получить нельзя.

Однако до появления CSS единственным способом создания расширяемого прямоугольника с закругленными углами являлось создание таблицы с девятью ячейками.

Тот же эффект можно получить при помощи CSS-стилей и логической разметки (и конечно, без всяких таблиц).

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

 

Простой прямоугольник с закругленными углами …

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

 
  (рис. 1) Простой прямоугольник с закругленными углами.
 

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

Такие отдельные изображения можно объединять в один файл изображения и применять в разных местах к разным углам прямоугольников. Преимущество здесь в том, что вам нужно загружать только одно изображение, а не четыре.

На (рис. 2) показаны файлы изображений, используемые в примере:

 
top_left.gif

top_right.gif



bottom_left.gif


bottom_right.gif
  (рис. 2) Графические изображения углов для простого прямоугольника.
 

Хитрость в том, чтобы в разметке были четыре элемента, к которым можно было бы применить эти фоновые изображения. Именно это CSS-дизайнеры обычно называют поиском «зацепок» в разметке, к которым можно применить стили.

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

Код:
/* Логическая разметка */

<div class="box">
   <div class="top">
      <div></div>
   </div>
   <div class="content">
      <p>Простой прямоугольник с закругленными углами</p>
   </div>
   <div class="bottom">
      <div></div>
   </div>
</div>

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

Вам, как дизайнеру и разработчику, нужно учесть все «за» и «против» и реализовать решение на основе своих собственных приоритетов и особенностей проекта.

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

Код:
/* Таблица стилей */

.box {
  background: #c6351c;
  /* указываем фоновые изображения для углов */
}
.top div {
  background: url(top_left.gif) no-repeat top left;
}
.top {
  background: url(top_right.gif) no-repeat top right;
}
.bottom div {
  background: url(bottom_left.gif) no-repeat bottom left;
}
.bottom {
  background: url(bottom_right.gif) no-repeat bottom right;
}
/* подробно указываем высоту и ширину */
/* каждый div с изображением будет шириной во весь контейнер */
.top div, .top, .bottom div, .bottom  {
  width: 100%;
  height: 22px;
  /* соответствует ширине изображений углов */
}
.content {
  margin: 0 22px;
  /* соответствует ширине изображений углов */
}
.box {
  width: 30em;
  /* прямоугольник может быть любой ширины * /
}
 

Более красивые прямоугольники …

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

Ниже я привожу пример, который формирует расширяющийся прямоугольник, показанный на (рис. 3).

 
  (рис. 3) Красивые изображения углов прямоугольника.
  Чтобы получить графические эффекты со всех четырех сторон прямоугольника, я начну с набора изображений, приведенных на (рис. 4).  
top_left.gif

top_right.gif





right_side.gif




bottom_right.gif


bottom_left.gif
 
  (рис. 4) Графические изображения углов для красивого прямоугольника.
 

В данном примере разметка должна содержать пять зацепок для стилей фоновых изображений. На этот раз вместо нескольких элементов div я использую имеющиеся в разметке элементы P, а элементы DIV будут добавляться только по необходимости.

Вот разметка, используемая в данном примере:

Код:
/* Логическая разметка */

<div class="sidebar">
 <p>ЗАГОЛОВОК</p>
 <div class="content">
   <p>Красивые изображения углов прямоугольника</p>
 </div>
 <div class="footer">
  <p>ПОДВАЛ</p>
 </div>
</div>

Таблица стилей, которая сводит все это вместе, применяет изображения к элементам div и элементу-абзацу р.

Также в таблице стилей используется вертикальное поле размером 2em для компенсации разрыва, вносимого возвратом каретки в абзацах.

Это значение вам, возможно, нужно будет изменить, в зависимости от размера вашего шрифта и высоты строки, так что обязательно протестируйте несколько браузеров, особенно Internet Explorer.

Обратите внимание, что этот метод не поддерживается браузером Netscape 4.

Код:
/* Таблица стилей */

div.sidebar {
  background: url(top_left.gif) top left no-repeat;
  width: 35%;
}
div.sidebar p {
  background: url(top_right.gif) top right no-repeat;
  padding: 20px;
  margin: 0;
}
div.content p {
  background: url(right_side.gif) top right repeat-y;
  margin: 0;
  margin-top: -2em;
  padding: 20px;
}
div.footer {
  background: url(bottom_left.gif) bottom left no-repeat;
}
div.footer p {
  background: url(bottom_right.gif) bottom right no-repeat;
  display: block;
  padding: 20px;
  padding-bottom: 30px;
  margin: -2em 0 0 0;
}

Этот пример приводится в статье «CSS Design: Creating Custom Corners & Borders», автор Сорен Мэдсен (Soren Madsen), опубликованной на «A List Apart».

Я рекомендую прочитать оригинальный текст, где приводятся пошаговые инструкции, объясняющие, как была написана таблица стилей.

Там же, на сайте «A List Apart», посмотрите также статью Дэна Цедерхолма (Dan Cederholm), посвященную расширяющимся прямоугольникам с закругленными углами, которая озаглавлена «Mountaintop Corners».

 
Урок № 11: | Дата: 22.01.2008 | Автор: Коровенков Юрий

Обсудить на форуме…

 
Valid XHTML 1.0! Valid CSS!
Как устроены поисковые системы?

Облик поисковиков

Поисковые системы

Индекс поисковой системы

Полнотекстовый поиск

Учет морфологии

Релевантность

Методы регистрации

Индекс цитирования

 
Заголовки разделов текущей страницы…

Оглавление

Простой прямоугольник с закругленными углами…

Более красивые прямоугольники…

 
Уроки Web-мастерства

Уроки Web-мастерства

Управление web-проектом

Как более эффективно писать для Сети?

Как сделать сайт максимально удобным?

Особенности структуры текста на Web-сайте

Создание компонентов интерфейса в XHTML

Создаем CSS-меню

Основные типы CSS-макетов

Раскрывающиеся CSS-меню

Создание многоуровневых раскрывающихся CSS-меню

CSS-методы замены текста изображениями

CSS-методы центрирования web-страницы

CSS-эффекты наведения указателя мыши

CSS-стили для шрифтов и текста

Навигационные CSS-панели на основе списков

Свободное размещение в CSS

Создание эффекта mouseover при помощи CSS

Таблицы для верстки - это не обязательно зло

Внедрение ролика Windows Media на Web-страницу

Добавление Flash на Web-страницу

 

NotPad++ - текстовый редактор…

 

наверх

 
Контактная информация

Пишите:
Звоните: + 7 (916) 597-36-78

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Copyright (©) 2004— by Yuriy Korovenkov