Чудовий ефект для анотацій на css3 - анотації в css

Відео: Анотації YouTube # 1 - як створити анотацію?

Відео: Анотації на YouTube! Анотації = більше передплатників!

Коли створюєш статтю, часто є необхідність показати на зображенні якісь важливі місця. І хочеться зробити це найбільш красиво, зручно і зрозуміло. І в цій статті ми розглянемо як за допомогою CSS3 можна створити гарний ефект анотацій з накладенням.

Приклад анотацій можна побачити тут:

Подивитися прімерСкачать

HTML частина анотацій CSS

Вся конструкція складається із зображення, яке показується спочатку і елементів, які з`являються при кліці:

123456789101112131415161718

lt;div class="Ao-item"gt;lt;div class="Ao-details"gt;lt;h2gt; Класний ефект для анотацій на CSS3lt;/h2gt;lt;pgt; За допомогою анотацій можна виділяти, підкреслювати при показі якісь місця, яким необхідно приділити більше вніманія.Клікніте на зображення щоб побачити ефект.lt;/pgt;lt;/divgt;lt;div class="Ao-preview"gt;lt;input type="Checkbox" id="Ao-toggle" class="Ao-toggle" name="Ao-toggle" /gt;lt;img src="Images / Anariel_BlentonTemplate.jpg" alt="Image01" /gt;lt;div class="Ao-annotations"gt;lt;spangt; Шапка сайтуlt;/spangt;lt;spangt; Слайдерlt;/spangt;lt;spangt; Популярні новиниlt;/spangt;lt;spangt; Основні новиниlt;/spangt;lt;spangt; Нижня частина сайту або футерlt;/spangt;lt;/divgt;lt;/divgt;lt;/divgt;

Відео: YouTube | Як зробити анотації на відео?

CSS частина анотацій

Я не буду вставляти весь CSS код (т.к. Він немаленький), його можна взяти в исходниках, а лише скажу де змінювати позицію блоків з описами:

123456789101112131415161718192021222324

.ao-annotations span: nth-child(1) {top: 15%-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%-}

Відео: Анотації YouTube # 2 - як оформити анотацію?

висновок

Дуже корисний спосіб виділити місця на зображенні і не тільки. Якщо вам доводиться часто щось показувати і пояснювати, рекомендую придивитися до даного способу. Таким чином ми створили чудові анотації в CSS.

Успіхів!

джерело: tympanus.net