Несомненно, одним из самых ярких трендов 2012 является разработка на CCS3, HTML5. Сегодня мы предлагаем большой и очень полезный обзор примеров «20+: креативные и полезные уроки на CSS3″, предложенных на SpeckyBoy. Все примеры сделаны на чистом CSS3 без JavaScript, в представленных уроках есть демо и готовые файлы CSS3 для скачивания.
Уверены, что данные приемы и техники будут полезны для веб-разработчиков!
Кроме того, советуем ознакомиться с обзором 10 онлайн-генераторов CSS3.
Уроки css3 :
1. CSS3 фотогалереи, слайдеры, эффекты с изображениями
1.1.Слайдер на CSS3
Не верится, но данный слайдер с разными эффектами сделан исключительно на CSS3, очень эффектно.
Просмотреть демо или скачать файлы CSS3 кода →
1.2. Фон для сайта на полный экран с эффектом слайдера на CSS3
Веб-дизайнеры уже давно экспериментируют с различными фонами для сайта, но до сих пор на чистом CSS можно было сделать очень мало, приходилось использовать JS. Теперь CSS3 дает возможность поступить с фоном вашего сайта как вы пожелаете — можно один фон с большой качественной фотографией, можно менять несколько фонов с разными эффектами, причем с маштабируемостью фона в зависимости от параметров экрана. Вообщем, потрясающая возможность для креативных сайтов.
Просмотреть демо или скачать файлы CSS3 кода →
1.3. Лайтбокс на CSS3
С помощью этого урока можно научиться создавать лайтбокс (Lightbox) с разнообразными эффектами на чистом CSS.
Просмотреть демо или скачать файлы CSS3 кода →
1.4. Свойства изображения на CSS3
Данный урок демонстирует новые возможности на CSS3 для свойств изображений, таки как закругленные уголки, тени и прочие эффекты.
Просмотреть демо или скачать файлы CSS3 кода →
1.5. Анимированный баннер на CSS3
Удивительно, но рекламный анимированный баннер можно теперь сделать только средствами CSS3. Подробно изучаем в этом уроке как это сделать.
Просмотреть демо или скачать файлы CSS3 кода →
1.6.Панель загрузки на CSS3
Просмотреть демо или скачать файлы CSS3 кода →
1.7. 3D лента на CSS3
Просмотреть демо или скачать файлы CSS3 кода →
2. CSS3 меню, навигация и кнопки
2.1. Меню Apple.com на CSS3
Урок для создания знаменитого меню Apple.com на CSS3.
Просмотреть демо или скачать файлы CSS3 кода →
2.2. Анимированное горизонтальное меню на CSS3
Простой урок, который показывает как сделать анимированное меню на CSS3 с разными эффектами.
Просмотреть демо или скачать файлы CSS3 кода →
2.3. Анимированное вертикальное меню на CSS3
Просмотреть демо или скачать файлы CSS3 кода →
2.4. Анимированные кнопки на CSS3
Отличный урок с 7 примерами анимированных креативных кнопок.
Просмотреть демо или скачать файлы CSS3 кода →
2.5. Креативное анимированное меню с изображениями на CSS3
В данном уроке просто глаза разбегаются от представленных 10 примеров. Такие непростые креативные меню раньше создавались исключительно с помощью JS. Впечатляет!
Просмотреть демо или скачать файлы CSS3 кода →
2.6. Circle Navigation Effect with CSS3
Необычный эффект при наведении на выбранный пункт навигации в виде круга с изображением. Берем на заметку!
Просмотреть демо или скачать файлы CSS3 кода →
2.7. Выпадающее меню на CSS3
Урок для реализации простого выпадающего меню с подуровнями на CSS3.
Просмотреть демо или скачать файлы CSS3 кода →
2.8. CSS3 навигация с анимированными переходами
Просмотреть демо или скачать файлы CSS3 кода →
3. Разные эффекты на CSS3
3.1. Анимированная всплывающая подсказка (tooltip) на CSS3 без jQuery
Просмотреть демо или скачать файлы CSS3 кода →
3.2. Анимированные стикеры на CSS3
Данный урок научит делать эффект стикеров на вашем сайте с помощью CSS3 и HTML5.
Просмотреть демо или скачать файлы CSS3 кода →
3.3. Эксперимент со свойством Background-Clip: Text
Данный урок показывает как можно экспериментировать с возможносями фона в CSS3, в данном случае со свойством background-clip: text.
Просмотреть демо или скачать файлы CSS3 кода →
3.4. Функциональный фильтр на CSS3
В данном уроке тоже не верится, что используется исключительно CSS3 без каких-либо скриптов. Суть тут в том, что можно сделать фильтр в зависимости от прописанных свойств элементов. Например, выбирается из портфолио только веб-дизайн, или иллюстрации, причем все это с анимированными эффектами.
Просмотреть демо или скачать файлы CSS3 кода →
3.5. Интересный эффект при наведении на ссылку
Впечатляющий ховер-эффект (hover) при наведение на объект, ссылку. Например, дополнительная информация при наведении на уменьшенную картинку товара.
Просмотреть демо или скачать файлы CSS3 кода →
—
перевод ТопОбзор по материалам speckyboy.com
