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

Слишком большая активная область рекламного блока 

На сайте ScriptSrc.net активная область углового рекламного блока — квадрат, так как все элементы HTML – квадраты или прямоугольники. Это отмечено на изображении ниже:

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

Применение трансформаций CSS3 

Вы, вероятно, знаете, что с помощью трансформаций CSS3 можно повернуть элемент. Мы можем использовать эту возможность, чтобы сделать угловой рекламный блок более удобным. Вот код CSS:

#corner-ad {
        display: block;
        width: 200px;
        height: 200px;
        position: absolute;
        top: -100px;
        right: -100px;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
}

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

Чтобы свойство трансформации работало во всех современных версиях браузеров, нужно добавить его с приставкой производителя для движка Webkit. Если Вам нужно поддерживать и Internet Explorer версии 9, добавьте еще приставку производителя для движка Trident.

Посмотрите демонстрацию работы по ссылке ниже:

Демонстрация работы

Описание демонстрации:

Демонстрация работы углового рекламного блока

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

Автор урока Louis Lazaris

Перевод — Дежурка

Смотрите также:

• Интересные эффекты с использованием свойства CSS3 тени блока
• Создание счетчиков CSS и игры Реверси с использованием CSS3
• Создание плавных анимаций с использованием состояния воспроизведения анимации