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

13

Уроки / HTML CSS
Наташа Клевер
12-07-2011

20 впечатляющих возможностей технологии CSS3 с примерами за июньВ сегодняшней подборке ссылки на следующие CSS3 уроки с примерами: как сделать анимированное меню средствами CSS, создаем цветовой круг, делаем стильную форму поиска. Оказывается бэкграунд в виде ретро полосок тоже можно сделать на CSS. Мне понравилась техника создания оформительских флажков и кнопок с эффектом пузырьков. Далее следует интерфейс плейера и минималистическое меню с выдвигающимися элементами. Хорошо смотрятся объемные кнопки и скругленные углы у картинок. Впечатляет постер из геометрических фигур, сделанных исключительно на CSS3.

1. Анимированное меню
Посмотреть урокАнимированное меню

2. Цветовой круг
Посмотреть урокЦветовой круг

3. Форма поиска
Посмотреть урокФорма поиска

4. CSS решетка
Посмотреть урокCSS решетка

5. Флажки
Посмотреть урокФлажки

6. Кнопки с эффктом пузырьков
Посмотреть урокКнопки с эффктом пузырьков

7. Музыкальный плейер
Посмотреть урокМузыкальный плейер

8. Стильная кнопка
Посмотреть урокСтильная кнопка

9. Минималистическое меню
Посмотреть урокМинималистическое меню

10. Объемные кнопки — урок удален автором
Посмотреть урокОбъемные кнопки

11. Закругленные углы у картинок
Посмотреть урокЗакругленные углы у картинок

12. Геометрический постер
Посмотреть урокГеометрический постер

13. Двигающееся меню
Посмотреть урокДвигающееся меню

14. Всплывающие подсказки
Посмотреть урокВсплывающие подсказки

15. 3D эффект
Посмотреть урок3D эффект

16. Сравнительная таблица
Посмотреть урокСравнительная таблица

17. Меню навигации
Посмотреть урокМеню навигации

18. Декоративное оформление картинок
Посмотреть урок Декоративное оформление картинок

19. Контактная форма — Урок удален автором
Посмотреть урок Контактная форма

20. Анимированный пейзаж
Посмотреть урок Анимированный пейзаж

Оцените, пожалуйста, статью!
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)
  • 11332
  • Короткая ссылка на этот пост: http://www.designonstop.com/?p=3833
  • Получать обновления:

  • Поддержать DesingNonstop рублём!

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

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

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

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

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

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

часть мануалов у меня в переводе есть)

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

@Pavello:
Пожалуйста! Думаю эта рубрика будет постоянной ))

@Руслан:
Спасибо!

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

yami yami!!!! Вот это да! Ну разве так можно? Больше года назад я только впервые услышал про CSS 3, а тут уже такое!

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

@Иван:
Да, для тех, кто выпал из веб-дизайна на какой-то срок, придется много наверстывать ))

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

Thx.
Пойду срочно флажки делать,даже знаю куда внедрить.

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

Кстати,заметил что не только у меня виджет 2leep.com не показывает периодически.сменил опять на LinkWithin

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

Нельзя такое смотреть, скразу хочется переделать всё у себя, и так постоянно, когда вижу подобный классные штучки))
Спасибо за всплывающие подсказки, вот, их, может, и внедрю. Давно как-то ещё хотела что-то подобно сотворить, да и нужны были))

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

@SwaEgo:
Я тоже подумываю отказаться от тулип и воспользоваться возможностями стандартного вордпресс плагина. У меня такое ощущение, что он на показатель отказов влияет не лучшим образом.

@Юлия Риа:
Я тоже, когда вижу подобные штучки, сразу думаю «О, хочу это, хочу это». Но на практике, я заметила, применяю только несколько приемов 🙂

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

@Наташа Клевер: у меня нет миниатюр,так бы я использовал стандартную функцию Вордпресс,без всяких плагинов,у tiaurus много написано на эту тему http://n-wp.ru/tag/similar

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

@SwaEgo:
Вот и у меня не прикреплены миниатюры. Попробую разобраться, может их как-то оптом можно прикрепить…
Спасибо за ссылку на интересный сайт.

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

@Наташа Клевер: Это не просто сайт,это кладезь 🙂

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

@SwaEgo:
Это точно! 🙂

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

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

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

169 queries in 0,744 seconds.