20 впечатляющих примеров возможностей и функций CSS3 технологий

13

Уроки / HTML CSS25-03-2011

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

1. Закругленные углы
Замечательный эффект закругленных углов для объекта. Причем скруглять углы можно выборочно и с разной степенью округлости.Посмотреть демо Rounded Corners with CSS3

2. Тень у текста
Очень любимый мной эффект. Используя тень для текста можно легко задать объем или с помощью белой тени создать иллюзию тиснения.Посмотреть демо CSS3 Text Shadows

3. Выпадающее меню
С помощью CSS3 можно создать современное, многоуровневое выпадающее меню с различными эффектами.Посмотреть демо Dropdown Menu

4. Диалоговое окошко
А так выглядит диалоговый модуль на основе CSS3 с произвольным текстом сообщения, появляющийся поверх основного контента.Посмотреть демо Beautiful Looking Custom Dialog Box

5. Разговорные блоки
Можно оригинально оформить текст с помощью разнообразных разговорных блоков, которые, опять таки, сделаны на основе CSS3 технологий.Посмотреть демо Speech bubbles

6. Навигация на вкладках
Нажимая на пункт меню, образуется вкладка с текстом, объединенная с самим пунктом меню. Есть множество вариантов оформления.Посмотреть демо Tabbed navigation

7. Кнопки
Наконец-то можно отказаться от графических кнопок и сделать разнообразные симпатичные кнопки с помощью CSS3.Посмотреть демо Buttons

8. Галерея картинок
Можно создать оригинальную галерею картинок с необычными эффектами при наведении курсора.Посмотреть демо Image Gallery

9. Загнутые края ленты
Замечательный эффект, создающий иллюзию завернутой за края ленты. Всегда смотрится очень симпатично.Посмотреть демо 3D Ribbons

10. ON/OFF переключатель
С помощью CSS3 можно легко сделать ON/OFF переключатель для панели настроек, а также панель для выбора одного из нескольких вариантов.Посмотреть демо TOGGLES AND OPTIONS

11. Полупрозрачные блоки
Такие полупрозрачные всплывающие блоки имеют ряд преимуществ. Можно донести вспомогательную информацию не заслоняя контент.Посмотреть демо Awesome Overlay

12. Эффект тиснения
С помощью такого эффекта тиснения объект выглядит как бы вдавленным в поверхность. Смотрится очень здорово.Посмотреть демо Create a Letterpress Effect

13. Многоколоночный текст
Теперь стало очень просто форматировать текст в виде колонок текста. Можно задать количество колонок, расстояние между ними.Посмотреть демо Stunningly Easy Text Columns

14. Вертикальная выпадающая панель
С края монитора можно поместить полезную информацию, которая будет появляться в виде выпадающей панели.Посмотреть демо vertical sliding panel

15. 3D эффект для картинки
Потрясающий эффект, в котором из картинки можно создать трехмерное изображение, реагирующее на движение мышки.Посмотреть демо CSS 3d Meninas

16. 3D Куб
Еще один вариант использования трехмерного эффекта. Информацию можно представить в виде куба c тремя гранями.Посмотреть демо 3D Cube

17. Вертикальный аккордеон
Так называют вертикальное выпадающее меню с динамическим эффектом, когда используемый пункт раскрывается.Посмотреть демо Vertical Accordion

18. Несколько бэкграундов
Передовые технологии CSS3 позволяют использовать несколько фоновых изображений в одном контейнере.Посмотреть демо Multiple backgrounds

19. Аналоговые часы
Эту красоту тоже можно сделать с помощью CSS3. В результате получатся настоящие аналоговые часы, показывающие реальное время.Посмотреть демо Analogue Clock

20. Мультиязычность
Технологии CSS3 обеспечивают поддержку не только латинских шрифтов, что открывает впечатляющие возможности интеграции людей. Посмотреть демо International Languages

 
 

PS. Постовой. В сфере кровельного настила металлочерепица занимает почетное место. Крыша и выглядит аккуратно, и от климатического воздействия защищена. Поэтому вас наверняка заинтересует СПЕЦПРЕДЛОЖЕНИЕ от компании formico.ru, которая поможет вам купить металлочерепицу в Москве.

Поделиться:      Короткая ссылка на этот пост: http://www.designonstop.com/?p=2728

Подписаться на обновления:

 
 
 

Написать комментарий с помощью формы ВКонтакте

Написать комментарий с помощью формы Facebook

Комментариев (13)

Очень здорово! Большое спасибо за подборку! Надеюсь, когда- нибудь научусь сам делать такие вещи.
Было бы здорово, если бы к этому материалу была подборка примеров HTML5.

ОтветитьОтветить

nice

ОтветитьОтветить

Технологии не стоят на месте.С появлением CSS3 и HTML5 флэш спокойно можно хоронить.Есть масса примеров,подтверждающее это.
Подборка отличная,уже многое использую у себя,чего и всем желаю.

ОтветитьОтветить

@Nek:
Я так и думаю потихоньку давать некоторые уроки. Они все есть, но на инглише.

@Naikom blog:
гуд

@SwaEgo:
Спасибо!
Некоторые, кстати изо всех сил борются за флеш. Хотя наверное тяжело отходить от флеша, если ты его хорошенько изучил. Но новые технологии наступают…

ОтветитьОтветить

Спасибо огромное!

Давно искал подобную информацию, наверно Вы умеете читать мысли…

ОтветитьОтветить

@Сергей:
Отлично! Рада что помогла ))
Я просто сама за последнее время настолько погрузилась в эту тему, что даже систематизировала все полученные знания в этой статье…

ОтветитьОтветить

@SwaEgo: Флэш хоронить надо только по одной простой причине. Он не индексируется нормально

ОтветитьОтветить

да, статья хорошая…рекламная)))скорей бы уже вышла готовая конечная версия стандарта!и да, IE, чтобы побольше следовал ему)))

ОтветитьОтветить

@Толкунов Сергей:
При IE поддерживаю ))

ОтветитьОтветить

Спасибо за подборку. Не могу не согласиться с предыдущим комментом, но все-таки флеш был и всегда будет флешем.
CSS 3 реально облегчает жизнь нашим программерам при верстке – можно избежать кучи ненужных изображений, тех же кнопок, которые только увеличивают вес страницы. К тому же идет шикарная адаптация под мобильные устройства: на компе сайт один, на мобиле – другой.
Пост отличный, спасибо за примеры.

ОтветитьОтветить

@Вадим:
Пожалуйста!
Я думаю, если кто любит флеш, то эта любовь навсегда. А мобильная тема действительно сейчас весьма и весьма актуальна ))

ОтветитьОтветить

шикарно. Просто потрясающе. Много видела фокусов с CSS. Но ничего подобного не видела. И даже не представляла, что можно ТАКОЕ сделать.
Спасибо.

ОтветитьОтветить

@DivaDii:
Пожалуйста! ))

ОтветитьОтветить

Написать комментарий с помощью обычной формы блога

Не пишите пожалуйста всякую ерунду и критику, все-равно все удалю. Спасибо за комментарий!