осиланнях, ми отримуємо гладкий зрушення вправо, який відбувається на протязі 250 мілісекунд. Ось і власне все. І ми не використовували JavaScript!
12. Вертикальна випадає панель
Дуже часто в шаблонах можна зустріти випадають навігаційні елементи. (Рис 17.) Розробники використовують даний тип прихованих меню для виведення додаткових прихованих посилань, тематично пов'язаних з основним пунктом. Можна знайти приклади вислизати панелей або різних меню в стилів акордеона, які реалізують такий принцип навігації.
Великі меню часто використовуються на сайтах електронної комерції чи просто на обширних порталах. «Мега» меню стають все більш і більш популярні, тому що є ефективним рішенням для відображення великої кількості інформації, не порушуючи при цьому розмітку сторінки .
Практично всі сучасні браузери підтримують основні функції css3, це дозволяє більш гнучко налаштовувати ефекти і зовнішній вигляд навігаційних панелей, без підключення javascript і яких би то не було додаткових файлів зображень, використовуючи в роботі тільки команди CSS3.
Рис. 17.
13. 3D ефект для картинки
Створюючи слайдер або галерею то з'являється питання, про те як оформити навігацію по ній, щоб користувач міг з легкістю вибирати необхідну для нього картинку, при цьому не захаращуючи сам дизайн різними компонентами, на допомогу приходять чудові трансформації css , за допомогою яких ми створимо чудовий вибір мініатюр, які за умовчанням будуть приховані, але при натисканні на кнопку, станеться ефект о??'емного Розкриття панелі з можливістю вибору мініатюр. (Рис 18) Такий ефект відмінно підійде для будь-яких зображень.
Рис 18.
14. 3D Куб
Ще один варіант використання тривимірного ефекту. Інформацію можна представити у вигляді куба c трьома гранями. (Рис 19)
Рис. 19.
. Кілька бекграундом
Раніше в CSS 2 бекгрануд (фонове зображення) для блоку міг бути заданий тільки один:
# box {background: url (1.png) no-repeat center;}
Тепер же фонові зображення можна перераховувати через кому:
# box {background: url (1.png) top left no-repeat, url (2.png) top right no-repeat, url (3.png) bottom right no-repeat, url (4.png) bottom left no-repeat;}
Параметри позиціонування: top, bottom, right, left і параметри для визначення повтору елемента: repeat-x, repeat-y, no-repeat перейшли з попередньої специфікації без змін.
16. Аналоговий годинник
Творці своїх веб-ресурсів часто люблять встановлювати такі гаджети як годинник, (рис 21.) Ключовою особливістю є те, що годинник враховують часовий пояс встановлений у Вас на комп'ютері, а як ви знаєте, деякі використовують віджети в яких вже зафіксовано часовий пояс для певної країни, тобто виходить що я, житель України, заходжу на р...
