20+: креативні і корисні уроки на CSS3

0
1

Shares

Безсумнівно, одним із найяскравіших трендів 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

Схоже

Share on Facebook Share
4
Share on TwitterTweet
0
Share on Google Plus Share
Share on Pinterest Share
0
Share on LinkedIn Share
Share on Digg Share
4
Total Shares
comments powered by HyperComments!

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here