все самое интересное о веб-дизайне

20 впечатляющих возможностей технологии CSS3 с примерами за ноябрь

9

21-12-2011

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

1. Анимированная типографика
Перейти на Анимированная типографика

2. Карусель из кртинок с предпросмотрами
Перейти на Карусель из кртинок с предпросмотрами

3. Меню-аккордеон
Перейти на Меню-аккордеон

4. Меню с эффектом размытия
Перейти на Меню с эффектом размытия

5. Анимированное меню
Перейти на Анимированное меню

6. Эффект навигации с кругом
Перейти на Эффект навигации с кругом

7. Галерея превью-картинок
Перейти на Галерея превью-картинок

8. Эффект при наведении на картинку
Перейти на Эффект при наведении на картинку

9. Анимированные кнопки
Перейти на Анимированные кнопки

10. Динамически эффект блика
Перейти на Динамически эффект блика

11. Динамические табы
Перейти на Динамические табы

12. Google Maps слайдер
Перейти на Google Maps слайдер

13. Zoom для картинки и текста
Перейти на Zoom для картинки и текста

14. Динамический счетчик значений
Перейти на Динамический счетчик значений

15. Динамический аккордеон
Перейти на Динамический аккордеон

16. Табы динамическим контентом
Перейти на Табы динамическим контентом

17. Эффект магнитного указателя в меню
Перейти на Эффект магнитного указателя в меню

18. Простейшее выпадающее меню
Перейти на Простейшее выпадающее меню

19. Контент-слайдер
Перейти на Контент-слайдер

20. Вращающийся по орбите объект
Перейти на Вращающийся по орбите объект

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

  • Понравился пост? Поддержите DesingNonstop рублём!

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

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

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

Комментариев 9 комментариев

Tympanus.net — однозначно в закладки 🙂

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

Соглашусь с предыдущим комментатором, на Tympanus.net подписан, там всегда интересно и ново.

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

@Yury:
@SwaEgo:
Согласна, сайт просто отличный! ))

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

Супер. Спасибо огромное! Всё планирую перейти на HTML5 и CSS3 но что-то никак руки не дойдут, скорее всего сделаю это летом, когда время будет))

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

@Роберт:
Кстати правильно, лето самое то время, когда нужно что-то освоить. Успехов вам и с наступающим Новым годом! ))

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

@Наташа Клевер: Ещё бы люди некоторые обновляли бы браузеры, и совсем хорошо бы было, эта банальная вещь тормозит развитие.
С праздником всех!!!

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

@SwaEgo:
Ты абсолютно прав! Я за автоматическое обновление )) С праздником!

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

А кто-нибудь знает наиболее оптимальную библиотеку js, чтобы заставить CSS3 корректно работать во всех браузерах? Насколько я знаю есть modernazr, но он по-моему не очень хорошо справляется.
PS. С новым годом!

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

@Yury:
СПасибо! Вас также с наступающим! ))

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

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

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