Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

43 примера css3

Все слышали про язык разметки css, с помощью которой верстальщику просто не обойтись. До недавнего времени с помощью этого языка возможно было только сделать разметку страницы (разместить блоки, задать шрифты,  цвет текста и тд.), но с появлением новой версии css3, появились и новые возможности. Конечно все об этом слышали  но так до конца и не знают на что он способен. Ведь появилась масса возможностей, для осуществления которых когда то использовался jquery.

Теперь с помощью css3 можно добиться многих эффектов, и вот перечень некоторых из них: анимация с помощью css3, 3d текст, фон с градиентом, закругление углов, тень для текста, внутренняя тень, тень для блока, слайдер с помощью css3, фильтры для изображений и тд.

Конечно самыми популярными и  красивыми являются эффекты анимации и 3d.

Хочу уточнить, что css3 это новый язык разметки, и поэтому большинство старых браузеров некорректно его отображают. Но с новыми браузерами проблем не должно быть.

Как говориться лучше раз увидеть, чем 100 раз услышать. Поэтому переходим к основной части этого поста — примеры и использование css3.

 

1. Информация о продукте с помощью css3

Product Information With CSS3

Есть много способов чтобы при наведении на продукт или изображение показать о нем информацию, здесь представлено этот эффект с помощью 3d куба.

Скачать

Пример

 

2. Блок slideup

slideup

Похожий пример как и в первом примере, только информация показывает с помощью интересного эффекта внутри блока.

Скачать

Пример

 

3. Checkbox в стиле apple

Check Boxes

Анимационный checkbox на css3 в стиле iphone.

Скачать

Пример

 

4. Анимационные кнопки с помощью css3

CSS3 Animated Bubble Buttons

Чтобы сделать анимацию для кнопки, ненужно использовать JavaScript, достаточно выбрать нужный нам фон и несколько строк кода css3.

Скачать

Пример

 

5. Анимационные звезды css3

Animated CSS3 starbursts

Красивые и необычные звезды с анимацией при наведении.

Скачать

Пример

 

6. Красивые и утонченные кнопки BonBon css3

BonBon CSS3 buttons

Очень красивые и необычные кнопки с эффектом 3d, это хорошо видно при нажатии на кнопку.

Пример создания кнопок

 

7. Эффект 3D с помощью css3

3d-css3

Текст в виде 3D, который можно посмотреть с помощью 3D очков.

Скачать

Пример    

 

8. 3d анимация с «чистым» css3

3d animation

Интересная подача блоков в 3d с блоком описания.

Скачать

Пример

 

9. Речевые облака css3

cloud

Подборка речевых облаков для сайта которые выполнены с помощью css2.1 и дополнительно используется css3. И все это без использования javascript.

Скачать

Пример

 

10. Фотографии в стиле Polaroids

Polaroids with CSS3

Делаем фотографии в стиле поляроид, и все это при помощи одного лишь css2.1 и css3.

Скачать

Пример

 

11. Блок со сложенным углом

olded-corner effect

Простые блоки с загнутым углом на css3 в стиле flat. Хорошо отображаются в современных браузерах.

Скачать

Пример

 

12. Тень для блоков с помощью css3

CSS drop-shadows

Тени для блока в разных стилях и на любой вкус с помощью css3 без использования изображений.

Скачать

Пример

 

13. Иконки css3

ico

Иконки для вашего сайта в стиле flat, которые выполнены чистым css3. Иконки корректно отображаются в новых браузерах.

Скачать

Пример 

 

14. Стикеры css3

stiker

Список меню или же просто заметки для вашего сайта в виде стикера.

Скачать

 

15. Солнечная система css3

sun

Модель солнечной системы, выполнена с точными пропорциями и без использования java скриптов и html.

Скачать

Пример

 

16. Иконки соц. сетей

social

Иконки социальных сетей с помощью css3. Это экспериментальные иконки, которые выполнены без единого изображения и java скриптов.

Скачать

Пример

 

17. Крутой Flip эффект

Super Cool CSS3 Flip Effect

Хороший пример на котором можно показать работу rotateY. Смотрится очень эффектно и легко. И все это css3.

Скачать

Пример

 

18. Меню с помощью css спрайтов

Cool Sprites

Меню выполнено при помощи css спрайтов. Корректное отображение на всех популярных браузерах включая IE7+.

Скачать

Пример 

 

19. Красивая и интересная таблица

table

Таблица которая хорошо подойдет для прайс листа на сайте, все выполнено на css2.1 и css3.

Скачать

Пример

 

20. Прозрачные границы с background-clip

 border

Прозрачный border с помощью css3 и с background-clip.

Скачать

Пример

 

21. Размытие фона css3

blur-css3

Простой и красивый эффект для модального окна с эффектом размытия (матового стекла).

Скачать

Пример

 

22. Эффект 3d текста при наведении

3d text

Эффект 3d при наведении с помощью тени, смотрится достаточно интересно.

Скачать

Пример

 

23. Ленты 3d при помощи css3

line css3

3d ленты на основе одного лишь css3. Этого можно добиться с помощью тени и правильном подборе цветовой гаммы.

Скачать

Пример

 

24. Прозрачные накладки css3

Overlays

Красивые и интересные накладки, которые можно использовать как угодно, в виде рекламы или подсказок.

Пример

 

25. Кнопки для сайта css3

buttons css3

Красивые кнопки без использования изображений. Скачать 

Пример

 

26. Вертикальное меню css3

Style Menu with CSS3

Интересная подача вертикального меню с помощью анимации.

Скачать

 

27. Необычный поиск для сайта

search css3

Существуют много подач полей поиска и вот еще одна идея с помощью css3 и jquery с 3d эффектом.

Скачать

Пример

 

28. Слайдер — витрина средством css3

slider css3

Очень эффектная презентационная страница с помощью слайдера выполненного на css3.

Скачать

Пример

 

29. Подсказки css3

tools

Подсказки хорошо подойдут для сайта продажи шаблонов или презентации.

Скачать

Пример

 

30. Слайдер css3 с эффектом Parallax

slider css Parallax

Слайдер с эффектом паралакс. Смотрится слайдер легко и выполнено все при помощи css3.

Скачать

Пример

 

31. Вкладки с анимацией css3

tabs css3

Табы для сайта с помощью css3 и с разными анимациями. В примере представлены 4 вида вкладок.

Скачать

Пример

 

32. Форма входа

login

Форма входа и регистрации с помощью css3 и HTML5. В примере представлены 3 разных анимации при нажатии на кнопку Join us.

Скачать

Пример

 

33. Аккордеон для сайта

Accordion

Аккордеон css3 с разными видами анимации при нажатии на один из пунктов.

Скачать

Пример

 

34. Переход между страницами css3

transition

Эффект перехода между страницами, но в большой степени это напоминает вкладки css3.

Скачать

Пример

 

35. Панель изображений css3

sliding

Переход между изображениями с эффектом «жалюзи» и с разной их подачей.

Скачать

Пример

 

36. Анимационный баннер 

Animated banner

С появлением css3 появилась новая возможность создавать интересные и информативные баннеры с помощью css3.

Скачать

Пример

 

36. Галерея с фильтром на css3

gallery

Галерея с фильтром для изображений, который работает с помощью css3 и html5.

Скачать

Пример

 

37. Эффект для миниатюры средствами css3 и jquery

thumbnail

Интересная подача превью при наведении. Есть интересные идеи и подачи в примере.

Скачать

Пример

 

38. Фоновый слайд шоу на весь экран css3 

CSS3 Fullscreen Slideshow

Слайд шоу для заднего фона на сайте с помощью одного лишь css3. Смотрится это все очень легко и сочно!

Скачать

Пример

 

39. Лайтбокс для изображений css3

light box css3

Лайтбокс для изображений. В примере показаны несколько вариантов, которые точно вам приглянуться.

Скачать

Пример

 

40. Угловые формы с помощью css3

Slopy Elements

С помощью css3 можно сделать многое, тут вы можете увидеть интересные подачи текстовой страницы с помощью кривых линий.

Скачать

Пример

 

41. Эффект «брызги» css3

splach

Эффекты которые напоминают брызги, он достаточно хорошо смотрится и можно использовать на любой вкус. Корректно оно будет работать только в новых браузерах.

Скачать

Пример

 

42. Эффекты типографии css3

Typography Effects

Красивые и необычные эффекты при наведении с помощью css3 и jquery. Пример говорит сам за себя.

Скачать

Пример

 

43. Кнопки с анимацией css3

animation button

Красивые и интересные анимации для кнопок, используя css3.

Скачать

Пример

 

ЕЩЕ ОДНА ПОДБОРКА ПРИМЕРОВ CSS3 —>