Гарне оформлення сайту - оформляємо красиво, утворять єдиний сайт

Будь-яка продає сторінка будується з певних блоків, завдяки яким у відвідувача складається загальна думка про продукт, який на ній пропонується. Кожен з цих блоків можна оформити красиво і в підсумку вся продає сторінка буде виглядати як щось унікальне. У цьому уроці я оформив на чистому CSS красивий блок з вигодами. Тому що даний елемент зустрічається на будь-якому одностранічнік і його необхідно виділити.

Ще оформлення елементів на сайті:

• Створення таблиці зі легкими елементами
• Як зробити відео фоном сайту + відеостокі
• Анімація для Лендінзі - створення анімації на Лендінзі

Опис ефекту: у блоку є прихована частина і видима. Видима частина - це іконка і назва вигоди, а прихована частина - це докладний опис вигоди, яке з`являється при наведенні. Також при наведенні додається активному блоку для створення ефекту обсягу.

Щоб побачити ефекти перейдіть на сторінку з прикладом:

Подивитися прімерСкачать

Якщо у Вас є труднощі зі створенням Лендінзі, тоді почніть з даного міні-курсу: "Лендінгем за 60 хвилин".

Ось як виглядає блок при наведенні:

Як зробити красиве оформлення для свого сайту, що продає?

1 HTML структура

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

Відео: Як створити свій сайт безкоштовно на конструкторі сайтів wix com

1

lt;link rel="Stylesheet" href="Http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"gt;

У нас є один загальний блок, в якому знаходяться всі 3 блоку з описом і іконками:

Відео: Тренди веб-дизайну 2015 і 2016 рік. Навчися робити красиві сайти!

123456789101112131415

lt;div class="BulletsBlock"gt;lt;div class="Bullet-item"gt;lt;span class="IconBullet fa fa-cog"gt; lt;/spangt;lt;p class="TitleBullet"gt; Вигода 1lt;/pgt;lt;p class="HideText"gt; Додатковийlt;brgt; прихований текст 1lt;/pgt;lt;/divgt;lt;div class="Bullet-item"gt;lt;/divgt;lt;div class="Bullet-item"gt;lt;/divgt;lt;/divgt;

Кілька слів по структурі:

• Рядки: з 1 по 15 - загальний блок, який містить 3 блоку з описом.
• Рядки: з 2 по 6 - один окремий блок із описом вигоди.
• Рядок: 3 - іконка блоку.
• Рядок: 4 - видима частина з описом вигоди.
• Рядок: 5 - прихована частина з докладним описом вигоди.

Структура прозора і проста. Переходимо до оформлення і створення анімації.

2 CSS стилі

Для створення анімації нам знадобиться лише CSS3 і ніякого javascript.

Відео: Урок 2. Гарне оформлення сайту - оформлення тексту на сайті

Прописуємо загальні стилі для 3-х блоків:

1234567891011121314151617181920212223242526272829

.bulletsBlock: after {content: ""-display: table-clear: both-}.bulletsBlock gt; 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 gt; div: First-child {margin-left:0-}/ * Тінь знизу у блоку при наведенні * /.bulletsBlock gt; 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-}

Далі йде іконка і її анімація при наведенні:

+12345678910111213141516171819

.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 gt; div: hover span.iconBullet{line-height: 1.35em-font-size: 10.625em-top: -2.7%-}

Далі напишемо стилі для блоків з текстовим описом:

12345678910111213141516171819202122232425262728293031323334353637383940

.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 gt; div: hover p.titleBullet{bottom:80px-}/ * Анімація при наведенні прихованого текстового блоку * /.bulletsBlock gt; div: hover p.hideText{background:# 454545-}

На цьому все!

Відео: Як правильно малювати дизайн сайту?

висновок

Анімація "оживляє" сайт і робить його більш сучасним. Не можна переборщити із анімацією, інакше Ваш сайт виглядатиме не зовсім красиво і ефекти будуть лише відлякувати відвідувачів. Ви сміливо можете завантажити вихідні файли і змінити їх під свій проект.

УВАГА: я розумію що не у всіх виходить встановити ефекти, скрипти і плагіни, які знаходяться на сайті, тому я зробив можливість проконсультуватися з будь-якого питання в Сайтобудування тут: SKYPE Консультація!

Успіхів!

З повагою, Юрій Німець