Перекрывающий слой с аннотациями для изображений

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

Разметка HTML

Структура состоит из заголовка, описания и части предварительного просмотра. Часть предварительного просмотра использует покрывающий слой. Для него добавляем чекбокс, изображение и элементы для аннотаций. содержащих элементы span. Чекбокс размещается сверху всех элементов и остается доступным для переключения. Он будет первым элементом в структуре, чтобы быть доступным для селекторов соседей:

<div class="ao-item">
    <div class="ao-details">
        <h2>Заголовок</h2>
        <p>Описание</p>
    </div>
    <div class="ao-preview">
        <input type="checkbox" id="ao-toggle" class="ao-toggle" name="ao-toggle" />
        <img src="/images/image01.jpg" alt="image01" />
        <div class="ao-annotations">
            <span>Поддержка локализации</span>
            <span>Виджет пользовательского изображения</span>
            <span>Виджет блога и контактной формы</span>
            <span>Простые опции темы</span>
            <span>Виджет нижнего колонтитула с  колонками</span>
        </div>
    </div>
</div>

Может быть любое количество элементов span. Каждый позиционируется индивидуально.

 

CSS

В коде урока исключены префиксы браузеров для наглядности. В исходниках код CSS представлен полностью.

Элемент div с классом ao-item имеет ширину 80%:

.ao-item {
    width: 80%;
    margin: 0 auto;
    padding: 35px 0;
    position: relative;
    clear: both;
}

Два внутренних элемента div будут плавающими:

.ao-item:before,
.ao-item:after {
    content:"";
    display:table;
}
 
.ao-item:after {
    clear:both;
}
 
.ao-item {
    zoom:1; /* Для IE 6/7 */
}

Определим стили для заголовка и описания. Они будут смещаться вправо и иметь ширину 40%. Также слева добавляется отступ. Такое действие не требует никаких дополнительных вычислений, так как используется модель размеров, определяемая свойством box-sizing: border-box, для всех элементов в файле normalize.css. Поэтому элемент будет иметь размер точно 40% по ширине, а отступ будет располагаться "внутри" элемента и не изменит размеров.

.ao-details {
    float: right;
    width: 40%;
    padding-left: 20px;
}

Затем добавляем стили для текстовых элементов:

.ao-details h2 {
    color: #498EA5;
    margin-top: 0;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
    padding-bottom: 10px;
    box-shadow:
        0 1px 0 #DFDEDC,
        0 2px 0 rgba(255,255,255,0.5);
}
 
.ao-details p {
    color: #999;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 22px;
}
 
.ao-details p a{
    font-weight: bold;
    color: #498EA5;
}
 
.ao-details p a:hover{
    color: #2A3344;
}

Секция предварительного просмотра будет немного больше и смещается влево:

.ao-preview {
    width: 60%;
    float: left;
    position: relative;
}

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

.ao-item img {
    margin: 0 auto;
    max-width: 100%;
    display: block;
    opacity: 0.8;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease-in-out;
}

Элемент с аннотацией является перекрывающим слоем, поэтому мы дуем позиционировать его абсолютно. Он будет невидимым за счет установки непрозрачности в значение 0. Также здесь будет использоваться трансформации: нужно делать его непрозрачным и увеличиваться в масштабе при нажатии на чекбокс.

.ao-annotations {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: rgba(33,62,68,0.3);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
    opacity: 0;
    z-index: 5;
    transform: scale(0.8);
    transition: all 0.3s ease-in-out;
}

Элемент span в аннотации будет иметь абсолютное позиционирование (для каждой метки задаются координаты top и left), и для него устанавливается свойство min-width равным 140 px, хотя ширина определяется в процентах. Трансформация будет заключаться в уменьшении масштаба и проявлении (opacity: 1):

.ao-annotations span {
    display: block;
    position: absolute;
    padding: 10px 25px;
    width: 33%;
    min-width: 140px;
    text-align: center;
    background: rgba(255,255,255,1);
    color: rgba(20,40,47,0.9);
    font-size: 16px;
    font-style: italic;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
    box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
    opacity: 0;
    transform: scale(1.3);
    transition: all 0.3s ease-in-out;
}

Для каждого элемента span используется небольшая стрелка, для добавления которой используется псевдо-класс :after.

.ao-annotations span:after {
    position: absolute;
    background: transparent url(../images/arrow.png) no-repeat center center;
    width: 32px;
    height: 33px;
    top: 50%;
    left: 100%;
    margin: -16px 0 0 -16px;
    content: '';
}

Две из меток будут иметь стрелки с левой стороны:

.ao-annotations span:nth-child(3):after,
.ao-annotations span:nth-child(4):after {
    left: auto;
    right: 100%;
    margin: -16px -16px 0 0;
    background-image: url(../images/arrow_left.png);
}

Теперь устанавливаем положение для каждого элемента span. Мы снова используем проценты чтобы позиционирование действовало при изменении размеров:

.ao-annotations span:nth-child(1) {
    top: 5%;
    left: 5%;
}
 
.ao-annotations span:nth-child(2) {
    top: 20%;
    left: -13%;
}
 
.ao-annotations span:nth-child(3) {
    top: 37%;
    right: 2%;
}
 
.ao-annotations span:nth-child(4) {
    top: 53%;
    right: -8%;
}
 
.ao-annotations span:nth-child(5) {
    bottom: 18%;
    left: -4%;
}

Теперь займемся нашим чекбоксом. Фокус заключается в размещении его надо всеми остальными элементами и установке высоты и ширины 100%, чтобы он занимал все доступное пространство. Поэтому нажатие на любом участке элемента будет включать эффект.  Чекбокс будет скрыт, так его непрозрачность будет установлена в 0. Но он продолжает воспринимать нажатия. Свойство z-index должно иметь самое высокое значение, чтобы чекбокс размещался поверх остальных элементов:

input.ao-toggle {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0;
    padding: 0;
    opacity: 0;
    z-index: 100;
    border: none;
    cursor: pointer;
}

Теперь определяем, что будет происходить с соседними элементами при нажатии на чекбокс. Изображение будет уменьшаться, измениться тень и прозрачность:

input.ao-toggle:checked + img {
    box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
    opacity: 1;
    transform: scale(0.8);
}

Так как мы не можем использовать img:hover (чекбокс перекрывает все), то будем использовать чекбокс для включения эффектов изображения:

input.ao-toggle:hover + img{
    opacity: 1;
}

Перекрывающий слой с классом ao-annoations и его элементы span будут увеличиваться в масштабе и становиться непрозрачными:

input.ao-toggle:checked ~ .ao-annotations,
input.ao-toggle:checked ~ .ao-annotations span{
    opacity: 1;
    transform: scale(1);
}

Для организации изюминки, каждый элемент span будет выводиться с некоторой задержкой:

input.ao-toggle:checked ~ .ao-annotations span:nth-child(1) {
    transition-delay: 0.3s;
}
 
input.ao-toggle:checked ~ .ao-annotations span:nth-child(2) {
    transition-delay: 0.4s;
}
 
input.ao-toggle:checked ~ .ao-annotations span:nth-child(3) {
    transition-delay: 0.5s;
}
 
input.ao-toggle:checked ~ .ao-annotations span:nth-child(4) {
    transition-delay: 0.6s;
}
 
input.ao-toggle:checked ~ .ao-annotations span:nth-child(5) {
    transition-delay: 0.7s;
}

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

@media screen and (max-width: 730px){
    .ao-item .ao-details,
    .ao-preview {
        float: none;
        width: 100%;
        padding: 0;
        text-align: left;
    }
    .ao-annotations span {
        font-size: 11px;
    }
}

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/LDIKaap9oOQ/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Перекрывающий слой с аннотациями для изображений | | 2012-06-19 11:57:53 | | Статьи Web-мастеру | | В данном уроке мы сделаем эффект для вывода небольших аннотаций на изображении с использованием CSS (псевдо-класса :checked и комбинаторов). Идея заключается в организации вывода покрывающего слоя с | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: