Оформляем блоки с помощью jQuery

Оформляем блоки с помощью jQuery

Довольно часто можно встретить на сайтах скругленные края у блоков. Но все ли знают как можно это сделать?

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

Идея создания урока у меня возникла, когда мне пришло письмо от одной медиа-группы. Там они просили выполнить тестовое задание, что бы в дальнейшем пригласить меня на собеседование. Я конечно сомневаюсь в истинных мотивах их просьбы, но это к делу не относиться :)

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

1. Итак, начнем. Подключаем фреймворк jQuery.

<script type="text/javascript" src="jquery. js"></script>

<script type="text/javascript"> jQuery(document).ready(function() {

$('.nth-corners').append('<span class="top-right"></span>

<span class="top-left"></span>

<span class="bot-right"></span>

<span class="bot-left"></span>');

});

</script>

2. Для любителей ИЕ вставляем следующий код:

<!--[if lte IE 6]>

<style type="text/css">

.nth-corners span {font-size:10px; line-height:10px}

.top-right {right: expression( this. parentNode && this. parentNode. offsetWidth % 2 ? -2 : -1 );}

.bot-right {bottom:expression( this. parentNode && this. parentNode. offsetHeight % 2 ? -2 : -1 ); right: expression( this. parentNode && this. parentNode. offsetWidth % 2 ? -2 : -1 );}

.bot-left {bottom:expression( this. parentNode && this. parentNode. offsetHeight % 2 ? -2 : -1 );}

</style>

<![endif]-->

Он нужен для правильного отображения в ИЕ.

3. Подключаем стили.

<link href="css. css" rel="stylesheet" type="text/css">

Не забудьте указать в стилях полный путь к картинке!

4. Вставляем блок.

<div class="nth-corners">

Содержимое блока</div>

В примере использовался текст рыбы одной известной дизайн студии.

Как видите - минимум тегов. Но только учтите что фреймворк jQuery весит 54кб. С выходом CSS3 это будет проще сделать и легче по объему, но сейчас из всех браузеров полностью поддерживают css3 это только safari, частично - opera, firefox, не поддерживает - ИЕ


Карта сайта


Информационный сайт Webavtocat.ru