Все представленные шаблоны для своего сайта построены на современных версиях HTML5 и CSS3. Кроме того, авторы применяют такие модные фишки, как плоский дизайн, отзывчивый дизайн, адаптивная верстка, слайдеры на jQuery, анимация на CSS3 и пр. То есть, если вы ищете шаблон мобильного сайта, то можете выбрать любой из представленных. Красивые html5 шаблоны 2017 , хоть и бесплатны, но выглядят на уровне премиум-класса.

Здесь вы найдете более 50 бесплатных адаптивных шаблонов сайтов высокого качества на HTML5 и CSS3, которые можно использовать как для новых сайтов, так и для переделки уже существующих. Стильные шаблоны сайтов html5 - это то, что вам нужно!

Обновлено 12.03.2019 : Так как статья была написана 2 года назад, то многие ссылки стали битыми. Либо владельцы шаблонов слились, либо поменяли статус шаблонов с бесплатных на платные, либо инопланетяне все похерили. Просьба к вам, уважаемые читатели, если нашли такую ссылку, киньте в комментах, я поправлю.

1. Snow - бесплатный шаблон лендинга на HTML5 и CSS3

Шаблон html5 css3 целевой страницы Snow построен на фреймворке Bootstrap. Шаблон очень стильный и классный! Фиксированный фон и громадный Jumbotron - штука, которая показывает главное содержимое сайта. А что на лендинге самое главное? Правильно, призыв к действию. Естественно, шаблон полностью адаптирован под мобильные устройства. Вы можете использовать его даже в качестве основы для собственных шаблонов.

2. Sima - шикарный коммерческий шаблон сайта

Этот шаблон html5 css3 также построен на фреймворке Bootstrap. Вы можете создать на этом шаблоне уникальный сайт с портфолио, вашей командой, ценами, отзывами и всем другим, что будет необходимо. Например, отлично подойдет этот шаблон для сайта клининговых услуг. Анимация в этом шаблоне плавная и эффектная, чистые и хорошо читаемые шрифты. Просто идеальный шаблон!

3. White - прекрасный шаблон одностраничника!

Отличительная особенность шаблона сайта White - два варианта фона в верхней части. На ваш выбор либо слайдер с картинками, либо видео фон. Очень качественный и эффектный шаблон для сайта!

4. Platz - бесплатный HTML5 шаблон сайта на основе сетки

Современный, визуально привлекательный HTML5 шаблон сайта, разработанный на основе сетки (подробнее о сетке читайте ). Красивый и отзывчивый дизайн шаблона для блога или сайта.

5. Mart eCommerce - прекрасный HTML5 и CSS3 шаблон сайта для электронной коммерции

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

6. Nava - эффектный HTML5 и CSS3 шаблон для творческих сайтов

Nava представляет собой современный HTML5 шаблон сайта, который используется в основном для творческих профессионалов, которые хотят показать их работу во всей красе. Множество вариаций настроек шаблона позволяет сделать ваш сайт уникальным. Легкий, красивый и отзывчивый шаблон для сайта.

7. Box Portfolio - уникальный творческий шаблон сайта на HTML5 и CSS3

Шаблон сайта Box Portfolio обладает чистым и современным минималистичным дизайном. Отлично подойдет для профессионалов, желающих эффектно показать свои работы в сети. Как следует из названия, шаблон сайта идеально заточен под портфолио.

8. Mountain King - популярный и функциональный HTML5 и CSS3 шаблон сайта

Горная тема в дизайне сайтов очень популярна в последнее время. Шаблон сайта Mountain King не исключение. Включает 336 векторных иконок от Typicons. Плюс великолепная анимация на CSS3. Шаблон отлично подойдет для сайтов о путешествиях и портфолио.

9. Beauty Spa - классный шаблон сайта на HTML5 и CSS3 для спа-салонов

Beauty Spa - отзывчивый шаблон сайта, имеющий множество функций, идеально подходящих для сайтов спа-салонов, оздоровительных или фитнес-центров, сайтов о йоге или даже парикмахерских. Отличная читаемость шрифтов и ненавязчивый минимализм.

10. Bent – стильный и эффектный лендинг для сайтов на HTML5 и CSS3

Bent - великолепный бесплатный шаблон сайта на html5 и css3. Отзывчивый дизайн, CSS3 анимация, параллакс прокрутка, настраиваемая навигации и прочие вкусняшки. Это чистый дизайн шаблона для сайтов, которые хотят использовать сбалансированную конструкцию, чтобы гарантировать, что посетители будут наслаждаться внешним видом сайта, и в то же время четко видеть его основное содержание.

11. Triangle - бесплатный отзывчивый многоцелевой шаблон на HTML5 и CSS3

Triangle эксклюзивный творческий HTML5 и CSS3 шаблон сайта специально для тех, кто хочет нарулить свой клевый дизайн, но при этом не сделать хуже. В шаблоне есть более 40 предварительно разработанных страниц, которые позволят вам настраивать ваш сайт, как душе угодно.

12. Future Imperfect - блестящий шаблон сайта для творческих людей!

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

13. Bodo - прекрасный шаблон для персонального сайта

Bodo - красивый шаблон сайта на HTML5 и CSS3, который идеально подходит для персонального сайта. Особенно для организации портфолио. Чистая и четкая типографика, карусельный слайдер, всплывающие popup окна для показа работ и многое другое.

14. Lens - идеальный HTML5 шаблон сайта для фотографов

Фотографы всегда ищут идеальный шаблон для своего сайта, чтобы показать работы во всей красе, эффектно и самое главное - крупно! Редкий шаблон сайта отвечает этим требованиям. Lens - один из таких шаблонов сайта фотографа.

15. Spectral - уникальный шаблон сайта ручной работы на HTML5 и CSS3

Если вы ищете бесплатные шаблоны сайтов по теме авто тематика , то Spectral будет идеальным решением. Здесь совершенно уникальный дизайн шаблона одностраничного сайта ручной работы. Дизайн можно менять по своему усмотрению. С помощью этого шаблона можно сделать потрясающий сайт абсолютно на любую тему, будь то впечатляющий блог о путешествиях или фотогалерея, сайт автомобильной тематики или хостинг-провайдера.

16. Oxygen - одностраничный HTML5 и CSS3 шаблон сайта

Oxygen - удобный и уникальный шаблон для бизнес сайта. Современный плоский дизайн, адаптивная верстка. Наример, этот шаблон идеально подойдет для сайта о мобильных приложениях или мобильной технике.

17. Mobirise Bootstrap - совершенный бесплатный шаблон сайта на HTML5 и CSS3

Если вы ищете бесплатный шаблон сайта, то Mobirise Bootstrap будет идеален, чтобы начать работу. Это многофункциональный шаблон с массой дополнений в комплекте. Три, предварительно сделанные, макета главной страницы и блога помогут вам в этом. Mobirise Bootstrap также SEO оптимизирован на 100% и адаптирован под любые размеры экранов.

18. La Casa - красивый и бесплатный HTML5 шаблон для сайта недвижимости

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

19. Drifolio - стильный HTML5 шаблон сайта для портфолио

Стильный и анимированный HTML5 и CSS3 шаблон сайта для организации портфолио. Чистый дизайн, отличная типографика, красивые иконки и многое другое.

20. Pluton - яркий и стильный шаблон для одностраничного сайта

Pluton – яркий и эффектный шаблон сайта на Bootstrap. Современный шаблон сайта, с его уникальным одностраничным макетом и адаптивным дизайном, который отлично подходит для студий, фотографов и творческих дизайнеров.

21. SquadFree - профессиональный шаблон одностраничного сайта на HTML5

Шаблон SquadFree отлично подойдет для создания коммерческого одностраничного сайта. Выглядит шаблон не только профессионально, но и адаптирован под все виды экранов. Шаблон собран на основе Bootstrap.

22. Sublime - завораживающий шаблон сайта на HTML5 и CSS3

Sublime - чистый и потрясающе красивый шаблон сайта на HTML5 и CSS3, идеально подходящий для стартапа, креативного агентства или сайта-портфолио. Отзывчивый дизайн и два варианта страниц на выбор.

23. Timber - необычный и красивый HTML5 и CSS3 шаблон сайта

Timber - свежая, стильная и необычная тема шаблона одностраничного сайта. Диагональ - главная фишка дизайна этого шаблона. Шаблон отлично подойдет для бизнес-сайта или портфолио. Есть встроенная галерея, карта и контактная информация, которые вы легко сможете адаптировать под себя.

24. E-Shopper - лучший шаблон сайта для электронной коммерции

E-Shopper - прекрасный вариант шаблона сайта для электронной коммерции. Построен на основе bootstrap с удивительным набором функций для полноценного и эффективного интернет-магазина.

25. Magnetic - бесплатный HTML5 и CSS3 шаблон для фотосайта

Совершенно потрясающий HTML5 и CSS3 шаблон для создания фотосайта или портфолио дизайнера, иллюстратора или художника. Этот шаблон поднимает планку профессиональных шаблонов на новый уровень! Отзывчивый дизайн, отличная поддержка всех видов устройств отображения, легкая и удобная навигация и многое другое.

26. Mabur Portfolio - прекрасный шаблон сайта в стиле минимализма на HTML5 и CSS3

Плоский дизайн этого шаблона сайта в стиле минимализма отлично подойдет для создания портфолио. В шаблоне все детали выверены идеально!

27. Modern Bootstrap HTML5 - бесплатный одностраничный шаблон сайта

Этот бесплатный одностраничник на основе фреймворка Bootstrap прекрасно подойдет для корпоративных сайтов, как для малых компаний, так и для крупных. Плоский дизайн, адаптивная верстка, все элементы дизайна высокого качества. Шаблон представлен в 4 различных цветах.

28. Infusion - стильный одностраничный шаблон сайта на HTML5 и CSS3

Infusion - это прекрасный пример шаблона сайта в стандартах HTML5 и CSS3, который специально разработан для создания бизнес портфолио. Богатая функциональность этого шаблона позволяет эффективно работать с клиентами и привлекать новых.

29. Yebo - корпоративный шаблон сайта на HTML5 и CSS3

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

30. Twenty - эффектный HTML5 и CSS3 шаблон сайта с параллаксом

Этот уникальный и очень красивый шаблон сайта с эффектом параллакса не оставит никого равнодушным. Одностраничный шаблон построен на чистом HTML5 и CSS3 с адаптивной версткой, впечатляющими фонами, поддержкой социальных медиа и пр.

31. Urbanic – отличный HTML5 и CSS3 шаблон сайта на Bootstrap

Urbanic – свежий и классный HTML5 и CSS3 шаблон сайта, построенный на движке Bootstrap. Прекрасно подходит, чтобы сразу начать создавать свой сайт без особых проблем. Шаблон отлично адаптирован под любые размеры экранов.

32. Design Showcase - HTML5 шаблон сайта для портфолио

Визуально гармоничный и эффектный шаблон сайта на HTML5 для организации вашего портфолио. Шаблон прекрасно адаптирован под мобильные устройства, что для сайтов такого формата очень непросто сделать.

33. Mamba One - простой и стильный шаблон сайта на HTML5 и CSS3

Mamba One - это пример простого, но стильного шаблона сайта для создания одностраничника. Совместим со всеми современными браузерами и везде будет отображаться адекватно.

34. KreativePixel - бесплатный шаблон сайта для фотографов

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

35. Retina Ready Responsive App - бесплатный шаблон лендинга на HTML5 и CSS3

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

36. Brushed - отзывчивый HTML5 и CSS3 шаблон сайта на движке Bootstrap

Brushed - отзывчивый, бесплатный HTML5 и CSS3 шаблон сайта на основе движка Bootstrap. Также оптимизирован для Retina дисплеев (iPhone, IPAD, IPod Touch и MacBook Pro Retina).

37. Big Picture HTML5 и CSS3 шаблон сайта

Добро пожаловать на Big Picture! Этот адаптивный шаблон сайта на HTML5 прекрасно подойдет всем творческим людям, которым есть что показать, и показать это крупно и эффектно на своем сайте. Кроме того, в шаблоне применена отличная анимация.

38. Tesselatte - бесплатный отзывчивый шаблон на HTML5 и CSS3

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

39. Overflow - уникальный шаблон сайта на HTML5 и CSS3

Этот уникальный шаблон сайта на чистом HTML5 и CSS3 прекрасно подойдет любому творческому человеку. Он полностью отзывчивый и совершенно бесплатный.

40. Runkeeper - отзывчивый и очень красивый шаблон сайта

Runkeeper - бесплатный, отзывчивый и очень красивый шаблон сайта. Его можно использовать для сайта любой тематики. Блестящий стиль и четкие шрифты, адаптивный дизайн и впечатляющие детали шаблона. Все работает на вас!

41. Pinball Responsive Grid Style - отличный шаблон сайта на основе сетки

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

42. Prologue - чистый шаблон одностраничного сайта на HTML5 и CSS3

Этот чистый, простой и четкий шаблон сайта на HTML5 и CSS3 прекрасно подойдет для постройки лендинга. Минималистический дизайн не отвлекает от главного. Эффектная боковая панель навигации с прокруткой и четкие линии страницы - просто идеальное сочетание!

43. Helios - современный шаблон сайта на чистом HTML5 и CSS3

Еще один шаблон сайта в стиле минимализма и чистых форм. Специально разработан, чтобы использовать преимущества больших экранов дисплеев, но так же прекрасно адаптирован и под маленькие экраны мобильных устройств.

44. Telephasic - бесплатный и отзывчивый шаблон сайта на HTML5

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

45. Strongly Typed - очень красивый шаблон сайта в стиле полу-ретро

Новый шаблон сайта с минималистичным полу-ретро стилем. Просто ретро уже не в моде, а вот легкий намек на него - очень даже кстати. Этот шаблон сайта полностью отзывчивый, построен на чистом HTML5 и CSS3 и включает все необходимые основные элементы страницы. Шаблон Strongly Typed идеально подойдет для сайтов творческой тематики. Например, для сайта о домашнем декоре .

46. Striped - чистый, красивый и функциональный шаблон сайта HTML5 и CSS3

Свежий и чистый, красивый и функциональный, новый шаблон сайта на HTML5 и CSS3. Имеет в своем арсенале все необходимые элементы страниц, в том числе оформленные цитаты, таблицы и списки, а также адаптированный сайдбар (справа или слева - по вашему желанию).

47. Parallelism - необычный и стильный шаблон сайта на HTML5 и CSS3

Parallelism - стильный шаблон сайта для организации портфолио или фотографий. Необычность его в том, что прокрутка здесь не вертикальная, как обычно, а горизонтальная. Это придает сайту особый шик и запоминаемость.

48. Miniport - полностью отзывчивый HTML5 шаблон сайта в стиле минимализма

Отличный шаблон сайта в стиле минимализма на HTML5. Прекрасно подойдет как для личного сайта/блога, так и для небольшого корпоративного сайта одностраничника или в качестве сайта-визитки.

49. Verti - просторный и свободный отзывчивый шаблон сайта на HTML5

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

50. ZeroFour - впечатляющий и стильный шаблон сайта на HTML5 и CSS3

И последний в списке, но не последний по качеству и внешней эффектности шаблон сайта - ZeroFour. Стильный дизайн, очень красивое меню, идеально выверенные формы и кнопки, красивые иконки и многое другое. И все это абсолютно бесплатно!

Надеюсь, вы нашли для себя что-то подходящее среди этих замечательных шаблонов сайтов на HTML5 и CSS3. Удачи!

Добавьте в закладки, чтобы потом быстро найти.

ПС: Если никак не можете определиться с выбором, прочтите статью «Я не знаю, чего я хочу» . Будет полезно.

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

*Наведите курсор мыши для приостановки прокрутки.

Назад Вперед

12 впечатляющих CSS-возможностей

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

Конечно, вы потом узнаёте, что использовать этот эффект можно в 2 или 3 основных браузерах (естественно IE, как всегда, нервно курит в сторонке и не входит в этот список) и обычно вы решаете подождать.

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

Лирическое отступление: большинство этих эффектов не работают в старых версиях IE (начиная с 9 версии и ниже). Если так сложилось, что в вашей стране эти браузеры используются повсеместно, то боюсь, мне придётся вас расстроить, этот урок не для вас. Но для оставшихся, вот что могут предложить нам современные браузеры:

1. CSS анимация и переходы

CSS-анимация наконец-то доступна для всех основных браузеров, даже для IE! (начиная с 10 версии). Существует 2 способа для создания CSS анимаций. Первый очень простой, и работает он через свойство transition .

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

В качестве демонстрации таких переходов на основе свойства transition , выше приведён пример hover-эффекта с планетой и ракетой. При наведении курсора на планету, ракета вращается ближе к ней.

Второй способ анимирования немного сложнее – он связан с описанием анимации через правило @keyframe , что позволяет вам создавать повторяющуюся или зацикленную анимацию, не зависящую от действий пользователя или триггера яваскрипта.

Код эффекта представлен ниже:

Container{ width: 300px; height:300px; margin: 0 auto; position:relative; overflow:hidden; } .planet{ position:absolute; top:0; left:0; width:100%; height:100%; background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) no-repeat center center; } .rocket{ position:absolute; top:0; left:0; width:100%; height:100%; background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket.png) no-repeat 50px center; /* Хром всё ещё требует префикс -webkit- */ -webkit-animation:orbit 2s linear infinite; animation:orbit 2s linear infinite; transition:background-position 0.8s; } .container:hover .rocket{ background-position:80px center; } /* Задаются кейфреймы для анимации */ @-webkit-keyframes orbit { from { -webkit-transform:rotate(0deg);} to { -webkit-transform:rotate(360deg); } } @keyframes orbit { from { transform:rotate(0deg); /* Я включил свойство -webkit-transform , потому что, Гугл Хром может начать поддерживать кэйфреймы без префиксов в будущем */ -webkit-transform:rotate(0deg);} to { transform:rotate(360deg); -webkit-transform:rotate(360deg); } }

Здесь много всего по CSS анимации, и я предполагаю, что вы начнёте с этой статьи. Если вам любопытно, поддерживает ли ваш браузер данный эффект или нет, то прошу любить и жаловать вот эту таблицу.

2. Подсчитывание значений с помощью свойства calc()

Ещё одна новая клёвая CSS-штуковина – это функция calc() . Она позволяет делать простейшие арифметические вычисления в CSS. Использовать это можно где угодно, где нужно иметь дело с длиной или шириной.

Но что ещё круче, так это то, что вы можете спокойно смешивать различные размерности, будь то пиксели или процентное значение.

Это позволяет создавать огромное количество различных трюков и приёмов (например со слоями и позиционированием), кладущие на лопатки все те ухищрения, к которыми вам, возможно, приходилось прибегать для получения аналогичного результата. Что может быть лучше? А вот что, это работает с IE 9-й (ура!) версии и выше и без дополнительных префиксов.

/* Подсчёт ширины */ .container{ width: calc(100% - 40px); background-color:#CDEBC4; color:#6D8B64; text-align:center; padding:25px 0; margin: 0 auto; }

3. Продвинутые селекторы

Сегодня, если вы подключаете ID к элементам только для того, чтобы применить к ним стилевые свойства, вы поступаете в корне неверно. Начиная с CSS2.1 и CSS3 включено большое количество мощнейших селекторов, которые позволят сделать ваши макеты чище, а ваши таблицы стилей более крутыми.

Это поддерживается всеми основными браузерами, включая IE9 и выше.

Пример:

Неразрывный другим тегами и id-шниками параграф текста, с определённым количество интересных css стилей

/* CSS стили - ничего интересного здесь */ p{ font-size: 16px; width: 420px; margin: 20px auto 0; text-align:center; } .container{ width: 420px; margin:50px auto 0; overflow: hidden; padding:5px; } .elem{ width:30px; height:30px; margin:4px; background-color:#A0DFAC; float:left; } .elem span{ position:absolute; top:5px; left:5px; right:5px; bottom:5px; border:2px solid #fff; } /* Селектор, применяющий свойства к первой букве и для первой строки нашего параграфа */ p::first-letter{ background-color: #666; color: #FFF; font-size: 24px; font-style:normal; display: inline-block; padding: 0 5px; border-radius: 3px; margin-right: 2px; font-family: serif; } p::first-line{ font-size: 18px; text-transform: smallcaps; font-style: italic; text-decoration: underline; } /* Сделать первый и последний элемент фиолетовыми */ .elem:first-child, .elem:last-child{ background-color:#948bd8; } /* Сделать все остальные элементы круглыми */ .elem:nth-child(odd){ border-radius:50%; } /* Сделать каждый 6-й элемент красным */ .elem:nth-child(6){ background-color:#cb6364; } /* Стиль элемента, который содержит тег span */ .elem:not(:empty){ background-color:#444; position:relative; -webkit-transform:rotate(25deg); transform:rotate(25deg); } /* Целевые элементы по атрибуту */ .elem{ background-color:#aaa; } .elem{ background-color:#d7cb89; } /* Значение атрибута должно начинаться с "bar". т.к. это соответствует двум вышеописанным элементам*/ .elem{ width: 16px; height: 16px; margin: 11px; } /* Элемент, следующий после того, у которого прописан в атрибуте data-foo="bar2"*/ .elem + .elem{ background-color:#78ccd2; }

4. Генерируемый контент и счётчики

Генерируемый контент - это мощный инструмент в руках разработчика, который становится доступным после применения псевдоэлементов ::before и ::after .

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

CSS3 также даёт псевдоэлементам доступ к счётчикам, которые могут возрастать за счёт CSS-правил. Так же они могут получать значения атрибутов от родительских элементов, содержащих их. Пример ниже:

Container{ /* Устанавливает счётчик названный cnt равным нулю */ counter-reset: cnt; position:relative; text-align:center; padding:20px 0; width:420px; height: 160px; margin: 0 auto; } /*Вы можете прописать стиль для псевдоэлементов и задать им контент, как если бы они были реальными элементами на странице */ .container::before{ display: block; content:"Hover over these items:"; font-size:18px; font-weight:bold; text-align:center; padding:15px; } .container span{ display:inline-block; padding:2px 6px; background-color:#78CCD2; color:#186C72; border-radius:4px; margin:3px; cursor:default; } /*Создать счётчик с псевдоэлементом*/ .container span::after{ /* Каждый раз, когда будет применимо это правило, значение счётчика будет увеличено на 1 */ counter-increment: cnt; /* Добавить к значению счётчика часть контента */ content:" #" counter(cnt); display:inline-block; padding:4px; } /* Псевдоэлементы могут получить доступ к атрибутам их родителей */ .container span::before{ position:absolute; bottom:0; left:0; width:100%; content:attr(data-title); color:#666; opacity:0; /* Анимация переходов */ -webkit-transition:opacity 0.4s; transition:opacity 0.4s; } .container span:hover::before{ opacity:1; }

Генерируемый контент поддерживается везде , включая IE9 и выше.

Градиенты дают веб-дизайнерам возможность создавать плавные переходы между цветами без использования изображений. CSS-градиенты также смотрятся здорово на ретиновых экранах, потому что они генерируются на ходу.

Они могут быть линейными или радиальными и могут быть заданы на повторение. Какое-то время они были недоступны для всех, но, спустя несколько месяцев и определённое количество изменений в синтаксисе, они стали доступны практически для всех, без дополнительных префиксов.

CS.container{ text-align:center; padding:20px 0; width:450px; margin: 0 auto; } .container div{ width:100px; height:100px; display:inline-block; margin:2px; box-shadow: 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 1px 1px #DDD; border-radius:2px; color:#666; vertical-align: top; line-height: 230px; font-size: 12px; } #el1{ background:linear-gradient(to bottom, #8dd2d9 , #58c0c7); } #el2{ background:radial-gradient(#77d19e,#46c17b); } #el3{ background:repeating-linear-gradient(-45deg, #de9dd4, #de9dd4 5px, white 5px, white 10px); } #el4{ background:repeating-radial-gradient(#b8e7bf, #b8e7bf 5px, white 5px, white 10px); }

Можете ли вы себе представить времена, когда мы были ограничены несколькими ручными шрифтами, которые точно идут на всех браузерах? Сложно поверить, но сегодня благодаря таким сервисам как Google Fonts и typekit , которые позволяют использовать великолепные шрифты, просто подключив их к стилям на своей странице.

Существуют даже шрифты с иконками, как например fontawesome , которые содержат симпатичные векторные иконки вместо букв или чисел. Всё это стало возможным с помощью правила @font-face , позволяющее задавать имя, характеристики и источник шрифта, на которое впоследствии можно ссылаться через свойство font/font-family .

Here is my beautiful font!)

H1{ /* Использование выбранного шрифта мы подключаем к HTML */ font-family: Satisfy, cursive; font-weight:normal; font-size:24px; padding-top: 60px; }

С несколькими обходными путями шрифты работают в браузерах начиная с 6 версии IE. Однако существуют 2 сервиса, которые были описаны выше, поэтому вам и не нужны теперь эти обходные пути.

7. Размер блока. Свойство box-sizing

Единственная большая причина головной боли для новичков в CSS - это блочная модель .

Были определённые весомые причины, дабы стандартизировать эту модель, однако она оставалось интуитивно непонятной, например, в случаях когда вы устанавливаете высоту и ширину блока, но они менялись в зависимости от значения padding или border .

Это мелкое упущение ломает вообще всё, но наконец-таки у нас есть путь восстановить здравомыслие и избавиться от головной боли. Встречайте правило box-sizing ! Теперь вы можете задать border-box , благодаря которому элементы остаются именно такими, какими вы бы хотели их видеть. Посмотрите сами:

Container{ text-align:center; } .container div{ /*Установка метода box-sizing */ box-sizing:border-box; /*Firefox у нас особенный, поэтому всё ещё требует префиксов*/ -moz-box-sizing:border-box; width:120px; height:120px; display:inline-block; vertical-align:top; } /*Благодаря правилу box-sizing мы можем устанавливать значения padding и border какими угодно, и элементы будут оставаться такого же размера, как и были*/ #el1{ color:#524480; background-color:#B2A4E0; } #el2{ padding:8px; border:10px solid #9ec551; background-color:#fff; } #el3{ padding:32px; background-color:#ccc; }

8. Изображения в качестве границ или свойство border-image

Свойство border-image позволяет выводить специально разработанные вами изображения вокруг элементов, в качестве обводки. Определённые границы, содержащиеся в изображении или в спрайте, отвечают или соответствуют определённым границам блочных элементов. Посмотрите пример, чтобы более наглядно понять это:

Поприветствуем симпатичные обводки блоков в виде картинок!

P{ text-align:center; padding:20px; width:340px; margin: 0 auto; /*Задать свойства для границы и для изображения, используемого в качестве границы*/ border:30px solid transparent; border-image:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/border.png) 30 30 round; }

Для более детального изучения посмотрите эту страницу и этот абзац . Поддерживаются всеми основными браузерами и IE 11.

Медиа-запросы обязательны к изучению, если вы собираетесь заниматься веб-дизайном на серьёзном уровне. Они уже какое-то время в ходу, однако о них стоит упомянуть, т.к. они изменили наш подход к созданию сайтов.

Используется это тогда, когда вам нужно чтобы веб-сайт выглядел одинаково корректно на разных устройствах (например мобильные устройства - планшеты, смартфоны, ноутбуки и др.) с различной шириной экрана. На сегодняшний день мы создаём сайты, которые должны уметь адаптироваться под тип устройства, его ориентацию и разрешение его монитора.

Медиа-запросы невероятно просто использовать: всё что вам нужно - это заключить ваши CSS-стили в блок содержащий правило @media. Каждый @media блок активируется, когда выполняется одно или более условий.

/* Стиль для основного контента и сайдбара */ .container{ width:900px; margin: 0 auto; overflow:hidden; } .main-section{ background-color:#CDEBC4; color:#6D8B64; width:520px; float:left; height:500px; } .sidebar{ background-color:#ccc; width:350px; float:right; height:400px; } .container p{ padding-top:100px; text-align:center; } .note{ text-align:center; padding-top:60px; font-style:italic; } /* Эти простые медиа запросы позволяют адаптироваться блокам под ширину вашего экрана */ @media (max-width:900px){ .container{ width:100%; } .main-section, .sidebar{ width:auto; margin-bottom:20px; float:none; } }

Медиа запросы могут содержать проверки на разрешение экрана устройства, его ориентацию, глубину цвета и многое другое. Обо всём этом можно почитать а посмотреть таблицу совместимости .

10. Фоны на разных слоях

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

Каждый такой слой (изображение) может двигаться и анимироваться по своему, например как демо, что ниже (наведите курсор мышки на картинку и посмотрите что получится). Все бэкграунд-свойства в CSS теперь могут принимать список свойств разделённых запятыми, для каждого отдельного слоя:

Space{ /* Установка разделённого запятыми списка бэкграундов */ background:url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket_big.png") no-repeat center 70px, url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/space.jpg") no-repeat bottom center; width:200px; height:200px; margin: 0 auto; border-radius:3px; /* Анимированная позиция для обоих бэкграундов */ transition:background-position 1s; } .space:hover{ /* То же самое для свойств? таких как background-position и repeat */ background-position:35% 20px, top right; }

Для получения дополнительной информации смотрим сюда . Очень хорошая поддержка браузерами - все современные браузеры поддерживают данное правило. .

Макеты, основанные на колонках, были серьёзной проблемой для тех кто занимался CSS. Обычно в этом принимал участие сервер или яваскрипт, чтобы разбить текст на равные части/колонки. Это нереально усложняло задачу а также убивало кучу ценного времени разработчиков. Наконец-то теперь это просто делается с помощью CSS-правила columns .

Container{ width: 500px; margin: 0 auto; } /* Вот так вот просто создаём колонки */ .container p{ -moz-columns:3; -webkit-columns:3; columns:3; }

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

12. 3D CSS трансформации

Нет ничего более привлекательного и замечательного в вебе, чем впечатляющее 3D CSS демо. Хотя полезность этого вне демо и вне портфолио несколько сомнительна, 3D CSS предлагает несколько мощнейших особенностей для дизайнеров и разработчиков, которые могут покорить сердца пользователей, если их правильно использовать.

Посмотрите на код примера ниже:

Container{ /* Как должны быть выражены 3D эффекты */ perspective: 800px; -webkit-perspective: 800px; background: radial-gradient(#e0e0e0, #aaa); width:480px; height:480px; margin:0 auto; border-radius:6px; position:relative; } .iphone-front, .iphone-back{ /* Подключение 3D трансформации */ transform-style: preserve-3d; -webkit-transform-style: preserve-3d; /*Мы используем 2 разных дива для передней и задней части телефона. Это свойство прячет див когда он поворачивается, таким образом будет показываться противоположная сторона*/ backface-visibility: hidden; -webkit-backface-visibility: hidden; width:200px; height:333px; position:absolute; top:50%; left:50%; margin:-166px 0 0 -100px; background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/iphone.png) no-repeat left center; /* Анимация переходов */ transition:0.8s; } .iphone-back{ /*Задняя сторона поворачивается на 180 градусов по умолчанию*/ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); background-position:right center; } .container:hover .iphone-front{ /*Когда на контейнер происходит наведение мышкой и срабатывает hover, повернуть переднюю часть и спрятать её */ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); } .container:hover .iphone-back{ /*... в то же время повернуть заднюю часть и сделать видимой*/ transform:rotateY(360deg); -webkit-transform:rotateY(360deg); }

Этот код был смоделирован после этого урока, с которым я рекомендую ознакомиться.

Если вы хотите узнать больше о 3D CSS, взгляните на детальное введение . Если вы не нацелены на старые браузеры IE, то поддержка браузерами у 3D CSS тоже весьма хорошая.

Другие полезности, о которых стоит упомянуть

Если вы ещё используете префиксы к border-radius и box-shadow , то теперь можете спокойно забыть об этом.

Также вы можете теперь начать использовать data-uri для изображений бэкграунда, для всех браузеров.

Свойство opacity теперь доступно и поддерживается везде, также будет очень полезным знать свойство background-size .

Ещё пройдёт некоторое время, прежде чем появится кросс браузерная поддержка к flexbox , @supports , фильтров , и CSS масок, но я уверен это стоит того, чтобы подождать!

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

Еще оформление элементов на сайте:

Описание эффекта: у блока есть скрытая часть и видимая. Видимая часть — это иконка и название выгоды, а скрытая часть — это подробное описание выгоды, которое появляется при наведении. Также при наведении добавляется активному блоку для создания эффекта объема.

Чтобы увидеть эффекты перейдите на страницу с примером:

Скачать

Если у Вас есть трудности с созданием лендинга, тогда начните с данного мини-курса: .

Вот как выглядит блок при наведении:

Как сделать красивое оформление для своего продающего сайта?

1 HTML структура

Сперва подключаем иконки от FontAwesome между тегами , которые будем использовать для описания:

1	<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" >

У нас есть один общий блок, в котором находятся все 3 блока с описанием и иконками:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div class = "bulletsBlock" > <div class = "bullet-item" > <span class = "iconBullet fa fa-cog" > <p class = "titleBullet" > Выгода 1</ p > <p class = "hideText" > Дополнительный<br > скрытый текст 1</ p > </ div > <div class = "bullet-item" > </ div > <div class = "bullet-item" > </ div > </ div >

Несколько слов по структуре:

• Строки: с 1 по 15 — общий блок, который содержит 3 блока с описанием.
• Строки: со 2 по 6 — один отдельный блок с описанием выгоды.
• Строка: 3 — иконка блока.
• Строка: 4 — видимая часть с описанием выгоды.
• Строка: 5 — скрытая часть с подробным описанием выгоды.

Структура прозрачна и проста. Переходим к оформлению и создании анимации.

2 CSS стили

Для создания анимации нам понадобится лишь CSS3 и никакого Javascript.

Прописываем общие стили для 3-х блоков:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

.bulletsBlock :after { content : "" ; display : table ; clear : both ; } .bulletsBlock > div { width : 30% ; float : left ; background : rgba(0 , 0 , 0 , 0.3 ) ; margin-left : 5% ; text-align : center ; position : relative ; padding-bottom : 31.7% ; cursor : pointer ; -webkit-transition : all 0.35s linear ; transition : all 0.35s linear ; } .bulletsBlock > div:first-child { margin-left : 0 ; } /*Тень снизу у блока при наведении*/ .bulletsBlock > div:hover { -webkit-box-shadow : 0 35px 35px -35px #000000 ; -moz-box-shadow : 0 35px 35px -35px #000000 ; box-shadow : 0 35px 35px -35px #000000 ; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

.bullet-item span{ line-height : 1.5em ; font-size : 12.5em ; color : #fff ; position : absolute ; top : 0 ; left : 0 ; display : block ; width : 100% ; -webkit-transition : all 0.35s ease; transition : all 0.35s ease; } /*Анимация иконки при наведении - уменьшение и сдвиг вверх*/ .bulletsBlock > div:hover span.iconBullet{ line-height : 1.35em ; font-size : 10.625em ; top :-2 .7% ; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

.titleBullet , .hideText { position : absolute ; left : 0 ; bottom : 0 ; text-align : center ; width : 100% ; margin : 0 ; color : #fff ; -webkit-transition : all 0.35s ease; transition : all 0.35s ease; } .titleBullet { line-height : 2.5em ; font-size : 2.1875em ; background : #3B3B3B ; z-index : 10 ; } .hideText { line-height : 1.3em ; font-size : 1.25em ; padding : 1em 0 ; background : #3B3B3B ; font-weight : 300 ; z-index : 8 ; height : 50px ; -webkit-transition : all 0.35s linear 0.2s; transition : all 0.35s linear 0.2s; } /*Анимация при наведении видимого текстового блока*/ .bulletsBlock > div:hover p.titleBullet{ bottom : 80px ; } /*Анимация при наведении скрытого текстового блока*/ .bulletsBlock > div:hover p.hideText{ background : #454545 ; }

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

Осуществить данную задачу можно тремя способами:

• Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.
• Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).
• Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.

Давайте более подробно рассмотрим каждый вариант, а заодно познакомимся с правилами синтаксиса написания CSS.

Атрибут style.

Практически каждый HTML тег имеет атрибут style , который говорит о том, что к этому тегу применяется некое стилевое описание.

Пишется так:

style="" >

Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента

Ну например:

style="color: #ff0000; font-size:12px" > это параграф с индивидуальным стилем

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

По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента.

style="background-color: #c5ffa0" >

style="color: #0000ff; font-size:18px" >Всё о слонах

Купить слона

style="color: #ff0000; font-size:14px" >

style="color: #0000ff; font-size:16px" >Взять слона на прокат

style="color: #ff0000; font-size:14px" >

Но еще раз повторюсь такой способ внедрения CSS хорош лишь в том случае если требуется задать определенный стиль малому числу HTML элементов.

Тег (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.

Взгляните на пример, ниже к нему будут комментарии.

Всё о слонах

На этом сайте Вы найдёте любую информацию о слонах.

Купить слона

У нас Вы можете по выгодным ценам приобрести лучших слонов!!

Взять слона на прокат

Только у нас Вы можете взять любых слонов на прокат!!

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

,

- будут синими а параграфы

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

Теперь обещанные комментарии:

Тег идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:

Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.

CSS в отдельном внешнем файле.

Долго ли коротко ли, подошли мы к главному, на мой взгляд, достоинству CSS, а именно возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.

Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:

Body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h1 {color: #0000ff; font-size:18px}
h2 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}

О том, что это такое странное мы написали, постараюсь подробно рассказать в последующих главах этого учебника.

Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.

Делается это с помощью тега (связь). Тег многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами и не выводится браузерами на экран.

Тег имеет атрибуты:

href - Путь к файлу.
rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.

• shortcut icon - Определяет, что подключаемый файл является .
• stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
• application/rss+xml - Файл в формате XML для описания ленты новостей.

type - MIME тип данных подключаемого файла.

Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:

Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"

Теперь вставляем эту строчку в заголовки страниц нашего сайта и наслаждаемся результатом..

Файл mystyle.css
body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h1 {color: #0000ff; font-size:18px}
h2 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}
Файл index.html

Меню:

Всё о слонах.
Купить слона.
Взять слона на прокат.

---

Всё о слонах

На этом сайте Вы найдёте любую информацию о слонах.

Файл elephant.html

Меню:

Всё о слонах.
Купить слона.
Взять слона на прокат.

---

Купить слона

У нас Вы можете по выгодным ценам приобрести лучших слонов!!

Файл elephant1.html

Меню:

Всё о слонах.
Купить слона.
Взять слона на прокат.

---

Взять слона на прокат

Только у нас Вы можете взять любых слонов на прокат!!

В примере выше, "сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом - mystyle.css. Таким образом, мы значительно его "разгрузили" и сделали дизайн всего сайта "мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?

В этой главе мы рассмотрели три способа внедрения CSS в HTML документ. Какой же лучше использовать?

• Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
• Используйте тег