Прошлый год заметно сместил акценты веб-дизайна в сторону использования веб-технологий. То, что раньше можно было сделать исключительно с помощью графики, сегодня реализуется на основе CSS3 технологий. Плюс ко всему веб-дизайн обогатился огромным количеством невероятных эффектов, так впечатляющих пользователя. Давайте вспомним 20 самых любопытных вещей, которые стали возможны с помощью CSS3 технологий.
1. Закругленные углы Замечательный эффект закругленных углов для объекта. Причем скруглять углы можно выборочно и с разной степенью округлости.
2. Тень у текста Очень любимый мной эффект. Используя тень для текста можно легко задать объем или с помощью белой тени создать иллюзию тиснения.
3. Выпадающее меню С помощью CSS3 можно создать современное, многоуровневое выпадающее меню с различными эффектами.
4. Диалоговое окошко А так выглядит диалоговый модуль на основе CSS3 с произвольным текстом сообщения, появляющийся поверх основного контента.
5. Разговорные блоки Можно оригинально оформить текст с помощью разнообразных разговорных блоков, которые, опять таки, сделаны на основе CSS3 технологий.
6. Навигация на вкладках Нажимая на пункт меню, образуется вкладка с текстом, объединенная с самим пунктом меню. Есть множество вариантов оформления.
7. Кнопки Наконец-то можно отказаться от графических кнопок и сделать разнообразные симпатичные кнопки с помощью CSS3.
8. Галерея картинок Можно создать оригинальную галерею картинок с необычными эффектами при наведении курсора.
9. Загнутые края ленты Замечательный эффект, создающий иллюзию завернутой за края ленты. Всегда смотрится очень симпатично.
10. ON/OFF переключатель С помощью CSS3 можно легко сделать ON/OFF переключатель для панели настроек, а также панель для выбора одного из нескольких вариантов.
11. Полупрозрачные блоки Такие полупрозрачные всплывающие блоки имеют ряд преимуществ. Можно донести вспомогательную информацию не заслоняя контент.
12. Эффект тиснения С помощью такого эффекта тиснения объект выглядит как бы вдавленным в поверхность. Смотрится очень здорово.
13. Многоколоночный текст Теперь стало очень просто форматировать текст в виде колонок текста. Можно задать количество колонок, расстояние между ними.
14. Вертикальная выпадающая панель С края монитора можно поместить полезную информацию, которая будет появляться в виде выпадающей панели.
15. 3D эффект для картинки Потрясающий эффект, в котором из картинки можно создать трехмерное изображение, реагирующее на движение мышки.
16. 3D Куб Еще один вариант использования трехмерного эффекта. Информацию можно представить в виде куба c тремя гранями.
17. Вертикальный аккордеон Так называют вертикальное выпадающее меню с динамическим эффектом, когда используемый пункт раскрывается.
18. Несколько бэкграундов Передовые технологии CSS3 позволяют использовать несколько фоновых изображений в одном контейнере.
19. Аналоговые часы Эту красоту тоже можно сделать с помощью CSS3. В результате получатся настоящие аналоговые часы, показывающие реальное время.
20. Мультиязычность Технологии CSS3 обеспечивают поддержку не только латинских шрифтов, что открывает впечатляющие возможности интеграции людей.
PS. Постовой. В сфере кровельного настила металлочерепица занимает почетное место. Крыша и выглядит аккуратно, и от климатического воздействия защищена. Поэтому вас наверняка заинтересует СПЕЦПРЕДЛОЖЕНИЕ от компании formico.ru, которая поможет вам купить металлочерепицу в Москве.
Очень здорово! Большое спасибо за подборку! Надеюсь, когда- нибудь научусь сам делать такие вещи.
Было бы здорово, если бы к этому материалу была подборка примеров HTML5.
Технологии не стоят на месте.С появлением CSS3 и HTML5 флэш спокойно можно хоронить.Есть масса примеров,подтверждающее это.
Подборка отличная,уже многое использую у себя,чего и всем желаю.
Ответить
Наташа Клевер26-03-2011 . 11:35
#
4
@Nek:
Я так и думаю потихоньку давать некоторые уроки. Они все есть, но на инглише.
@Naikom blog:
гуд
@SwaEgo:
Спасибо!
Некоторые, кстати изо всех сил борются за флеш. Хотя наверное тяжело отходить от флеша, если ты его хорошенько изучил. Но новые технологии наступают…
Ответить
Сергей26-03-2011 . 12:37
#
5
Спасибо огромное!
Давно искал подобную информацию, наверно Вы умеете читать мысли…
Ответить
Наташа Клевер26-03-2011 . 13:11
#
6
@Сергей:
Отлично! Рада что помогла ))
Я просто сама за последнее время настолько погрузилась в эту тему, что даже систематизировала все полученные знания в этой статье…
Ответить
Леонидыч29-03-2011 . 08:07
#
7
@SwaEgo: Флэш хоронить надо только по одной простой причине. Он не индексируется нормально
Спасибо за подборку. Не могу не согласиться с предыдущим комментом, но все-таки флеш был и всегда будет флешем.
CSS 3 реально облегчает жизнь нашим программерам при верстке — можно избежать кучи ненужных изображений, тех же кнопок, которые только увеличивают вес страницы. К тому же идет шикарная адаптация под мобильные устройства: на компе сайт один, на мобиле — другой.
Пост отличный, спасибо за примеры.
Ответить
Наташа Клевер17-02-2012 . 13:55
#
11
@Вадим:
Пожалуйста!
Я думаю, если кто любит флеш, то эта любовь навсегда. А мобильная тема действительно сейчас весьма и весьма актуальна ))
Очень здорово! Большое спасибо за подборку! Надеюсь, когда- нибудь научусь сам делать такие вещи.
Было бы здорово, если бы к этому материалу была подборка примеров HTML5.