20+: креативные и полезные уроки на CSS3

28 541 просм. 1
Рубрики: DEV
Метки: , ,
0
0
0
0
Total
0

Несомненно, одним из самых ярких трендов 2012 является разработка на CCS3, HTML5.  Сегодня мы предлагаем большой и очень полезный обзор примеров «20+: креативные и полезные уроки на CSS3″, предложенных на SpeckyBoy. Все примеры сделаны на чистом CSS3 без JavaScript, в представленных уроках есть  демо и готовые файлы CSS3 для скачивания.

Уверены, что данные приемы  и техники будут полезны для веб-разработчиков!

Кроме того, советуем ознакомиться с  обзором 10 онлайн-генераторов CSS3.

Уроки css3 :

1. CSS3 фотогалереи, слайдеры, эффекты с изображениями

1.1.Слайдер на CSS3

Не верится, но данный слайдер с разными эффектами сделан исключительно на CSS3, очень эффектно.

уроки css3

Просмотреть демо или скачать файлы CSS3 кода →

1.2. Фон для сайта на полный экран с эффектом слайдера на CSS3

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

уроки css3

Просмотреть демо или скачать файлы CSS3 кода →

1.3. Лайтбокс на CSS3

С помощью этого урока можно научиться создавать лайтбокс (Lightbox) с разнообразными эффектами на чистом CSS.

уроки css3

Просмотреть демо или скачать файлы CSS3 кода →

1.4. Свойства изображения на CSS3

Данный урок демонстирует новые возможности на CSS3 для свойств изображений, таки как закругленные уголки, тени и прочие эффекты.

уроки css3

Просмотреть демо или скачать файлы CSS3 кода →

1.5. Анимированный баннер на CSS3

Удивительно, но рекламный анимированный баннер можно теперь сделать только средствами CSS3. Подробно изучаем в этом уроке как это сделать.

уроки css3

Просмотреть демо или скачать файлы CSS3 кода →

1.6.Панель загрузки на CSS3

уроки css3

Просмотреть демо или скачать файлы CSS3 кода →

1.7. 3D лента на CSS3

уроки css3

Просмотреть демо или скачать файлы CSS3 кода →

 

2. CSS3 меню, навигация и кнопки

2.1. Меню Apple.com на CSS3

Урок для создания знаменитого меню Apple.com на CSS3.

уроки css3

Просмотреть демо или скачать файлы CSS3 кода →

2.2. Анимированное горизонтальное меню на CSS3

Простой урок, который показывает как сделать анимированное меню на CSS3 с разными эффектами.

уроки css3

Просмотреть демо или скачать файлы CSS3 кода →

2.3. Анимированное вертикальное меню на CSS3

уроки css3

Просмотреть демо или скачать файлы CSS3 кода →

2.4. Анимированные кнопки на CSS3

Отличный урок с 7 примерами анимированных креативных кнопок.

уроки css3

Просмотреть демо или скачать файлы CSS3 кода →

2.5. Креативное анимированное меню с изображениями на CSS3

В данном уроке просто глаза разбегаются от представленных 10 примеров. Такие непростые креативные меню раньше создавались исключительно с помощью JS. Впечатляет!

уроки css3

Просмотреть демо или скачать файлы CSS3 кода →

2.6. Circle Navigation Effect with CSS3

Необычный эффект при наведении на выбранный пункт навигации в виде круга с изображением. Берем на заметку!

уроки css3

Просмотреть демо или скачать файлы CSS3 кода →

2.7. Выпадающее меню на CSS3

Урок для реализации простого выпадающего меню с подуровнями на CSS3.

уроки css3

Просмотреть демо или скачать файлы CSS3 кода →

2.8. CSS3 навигация с анимированными переходами

уроки css3

Просмотреть демо или скачать файлы CSS3 кода →

3. Разные эффекты на CSS3

3.1. Анимированная всплывающая подсказка (tooltip) на CSS3 без jQuery

уроки css3

Просмотреть демо или скачать файлы CSS3 кода →

3.2. Анимированные стикеры на CSS3

Данный урок научит делать эффект стикеров на вашем сайте с помощью CSS3 и HTML5.

уроки css3

Просмотреть демо или скачать файлы CSS3 кода →

3.3. Эксперимент со свойством Background-Clip: Text

Данный урок показывает как можно экспериментировать с возможносями фона в CSS3, в данном случае со свойством background-clip: text.

EXPERIMENTS WITH BACKGROUND-CLIP: TEXT

Просмотреть демо или скачать файлы CSS3 кода →

3.4. Функциональный фильтр на CSS3

В данном уроке тоже не верится, что используется исключительно CSS3 без каких-либо скриптов. Суть тут в том, что можно сделать фильтр в зависимости от прописанных свойств элементов. Например, выбирается из портфолио только веб-дизайн, или иллюстрации, причем все это с анимированными эффектами.

Filter Functionality with CSS3

Просмотреть демо или скачать файлы CSS3 кода →

3.5. Интересный эффект при наведении на ссылку

Впечатляющий ховер-эффект (hover) при наведение на объект, ссылку. Например, дополнительная информация при наведении на уменьшенную картинку товара.

ORIGINAL HOVER EFFECTS WITH CSS3

Просмотреть демо или скачать файлы CSS3 кода →

перевод ТопОбзор по материалам speckyboy.com

0
0
0
0
Total
0
comments powered by HyperComments
comments powered by HyperComments!
Имран
2013-09-25 15:07:13
Отличная подборка, супер!!