Лучших работников в сфере IT РАБОТА-КА Вам поможет найти! о нас ✈
Я ищу работу в IT сфере ✈ Я ищу резюме в IT сфере ✈
Инженер схемотехник! 80000-100000 руб. ТК. соц.пак. Подробнее ✈

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

How To Create Depth And Nice 3D Ribbons Only Using CSS3
Просмотреть демо или скачать файлы CSS3 кода →

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

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

Урок для создания знаменитого меню Apple.com на CSS3.
The Apple.com navigation menu created using only CSS3
Просмотреть демо или скачать файлы CSS3 кода →

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

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

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

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

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

Отличный урок с 7 примерами анимированных креативных кнопок.
ANIMATED BUTTONS WITH CSS3
Просмотреть демо или скачать файлы CSS3 кода →

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

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

2.6. Circle Navigation Effect with CSS3

Необычный эффект при наведении на выбранный пункт навигации в виде круга с изображением. Берем на заметку!
CIRCLE NAVIGATION EFFECT WITH CSS3
Просмотреть демо или скачать файлы CSS3 кода →

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

Урок для реализации простого выпадающего меню с подуровнями на CSS3.
CSS3 Dropdown Menu
Просмотреть демо или скачать файлы CSS3 кода →

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

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

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

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

CSS3 Tooltip with Animation NO jQuery
Просмотреть демо или скачать файлы CSS3 кода →

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

Данный урок научит делать эффект стикеров на вашем сайте с помощью CSS3 и HTML5.
Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5
Просмотреть демо или скачать файлы 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 кода →

Поиск IT персонала , python, perl, java, js, erlang, ARM и т.д. Давайте решать задачи вместе! rabota@rabota-ka.ru

Блог Работа КА Каталог Резюме Каталог Вакансии Горячие вакансии Freelance удаленная работа IT FreeSoft бесплатный софт Python news IT НовинкиФото нравится

Rambler's Top100HotLog
Отправить комментарий