Делаем закругленные уголки с помощью псевдоэлементов - Сайтостроительство .:: CodingRUS ::. программирование по-русски на Delphi, C++, PHP, Prolog, GPSS

Услуги

• Автоматическое добавление статей на сайты на Wordpress, Joomla, DLE
• Заказать продвижение сайта
• Программа для рисования блок-схем
• Инженерный калькулятор онлайн
• Таблица сложения онлайн

Популярные статьи

OpenGL и Delphi...		65535
Форум на вашем ...		65535
21 ошибка прогр...		65535
HACK F.A.Q		65535
Бип из системно...		65535
Гостевая книга ...		65535
Invision Power ...		65535
Пример работы с...		65535
Содержание сайт...		65535
ТЕХНОЛОГИИ ДОСТ...		65535
Организация зап...		65535
Вызов хранимых ...		65535
Создание отчето...		65535
Имитационное мо...		65535
Программируемая...		65535
Эмулятор микроп...		65535
Подключение Mic...		65535
Создание потоко...		65535
Приложение «Про...		65535
Оператор выбора...		65535

Сейчас на сайте

Гостей: 8
На сайте нет зарегистрированных пользователей

Пользователей: 13,370

новичок: dogoco6

Новости

Выполняем курсовые и лабораторные по разным языкам программирования
Подробнее - курсовые и лабораторные на заказ
Delphi, Turbo Pascal, Assembler, C, C++, C#, Visual Basic, Java, GPSS, Prolog, 3D MAX, Компас 3D
Заказать программу для Windows Mobile, Symbian

Моделирование литейного цеха на GPSS + Пояснительная записка

Расчет размера дохода на одного человека в Turbo Pascal

Программа тестирования (тест) - вступительные экзамены (математика, физи...

Делаем закругленные уголки с помощью псевдоэлементов

Но есть способ уже сейчас избежать подобных вещей.

html-код:

Текст

Задаем голубой фон врезки:

.incut{background: #dff7ff;padding: 20px;}

Четыре уголка навешиваем на элементы :before и :after

.incut:before{
content:url(i/border_tl.gif);
background: url(i/border_tr.gif) no-repeat 100% 0;
height: 7px;
display: block;
margin: -20px -20px 13px -20px;
}

.incut:after{
content:url(i/border_bl.gif);
background: url(i/border_br.gif) no-repeat 100% 0;
height: 7px;
display: block;
margin:13px -20px -20px -20px;
}

Это работает во всех современных браузерах кроме IE (проверялось в Firefox 1–2, Opera 7–9, Safari 3). Для IE аналогичный функционал навешиваем с помощью JS (лучше помещать в отдельный файл CSS, специальный для IE):

.incut{
zoom:1;
behavior:expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '

' + this.innerHTML + '

') : '');
}

Работает в IE 6—7. При отключеных скриптах пользователь ie увидит голубой фон у врезки, т.е. ничего не сломается.

В результате имеем «пуленепробиваемую» врезку с минимумом html-кода. Заметьте, что вы можете указать ещё одну картинку у врезки, которая будет её бэкграундом.

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

Источник: noinimod.

Опубликовал Kest October 27 2008 09:39:25 · 1 Комментариев · 7736 Прочтений ·

• Не нашли ответ на свой вопрос? Тогда задайте вопрос в комментариях или на форуме! •

Комментарии

Vovan April 10 2010 11:38:37
всё это фигня!!

для закруглённых уголков делается 9-тиклеточная таблица. И 9 рисунков к ней.
центральную ячейку можно объединить с двумя боковыми или с верхней и нижней.
PS: что не работает в ie, то не нужно никому!

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

Рейтинги

Рейтинг доступен только для пользователей.

Пожалуйста, залогиньтесь или зарегистрируйтесь для голосования.

Нет данных для оценки.

Гость

Вы не зарегистрированны?
Нажмите здесь для регистрации.

Забыли пароль?
Запросите новый здесь.

Поделиться ссылкой

• Фолловь меня в Твиттере! • Смотрите канал о путешествиях • Как приготовить мидии в тайланде?

Загрузки

Новые загрузки

Случайные загрузки

Ics

ICQ

Топ загрузок

Приложение Клие...	100774
Delphi 7 Enterp...	97836
Converter AMR<-...	20268
GPSS World Stud...	17014
Borland C++Buil...	14191
Borland Delphi ...	10291
Turbo Pascal fo...	7374
Калькулятор [Ис...	5984
Visual Studio 2...	5207
Microsoft SQL S...	3661