Exore LTD » CSS3 » Красивое оформление сайта — оформляем красиво одностраничный сайт
Лого SiteHere.ru

Август 15, 2021 Запись была обновлена

Время чтения: 3 мин. Прочитать позже

Красивое оформление сайта — оформляем красиво одностраничный сайт

Красивое оформление сайта

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

Узнай подробнее о профессии UX/UI дизайнер, пройди обучение и создавай крутые дизайн для сайтов и мобильных приложений!

В этом уроке я оформил на чистом CSS красивый блок с выгодами. Потому что данный элемент встречается на любом одностраничнике и его необходимо выделить.

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

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

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

Посмотреть примерСкачать

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

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

Красивое оформление сайта

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

1 HTML структура

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

HTML КОД
1

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

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

HTML КОД
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"></span>
        <p class="titleBullet">Выгода 1</p>
        <p class="hideText">Дополнительный<br>скрытый текст 1</p>
    </div>
 
    <div class="bullet-item">
        <!-- Содержимое 2-го блока -->
    </div>
 
    <div class="bullet-item">
        <!-- Содержимое 3-го блока -->
    </div>
</div>

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

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

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

2 CSS стили

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

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

CSS КОД
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;
}

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

CSS КОД
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%;
}

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

CSS КОД
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;
}

На этом всё!

Вывод

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

ВНИМАНИЕ: я понимаю что не у всех получается установить эффекты, скрипты и плагины, которые находятся на сайте, поэтому я сделал возможность проконсультироваться по любому вопросу в сайтостроении здесь: SKYPE Консультация!

Успехов!

С Уважением, Юрий Немец

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

16 комментариев к записи
  • behruz

    Самый лучший сайт который я видел..

     
    Ответить
  • Верховская Светлана

    Юрий! Сайт ваш и вправду лучший!  Знаю, что это требует не только знаний и трудов, но и таланта и вкуса и усердия.

    Юрий,  кнопочки "Skype консультация" и "Комплексное обучения" глаз не оторвать, курсор не отвести. Во Flash могу такие соорудить,а вот  HTML и CSS — "слабо", а так желательно…

    Спасибо! Успехов! Ваша планка высоко!

     
    Ответить
    • Юрий

      Спасибо большое, Светлана! 🙂

       
      Ответить
  • Dielf

    А как сменить иконку? 

     
    Ответить
    • Юрий Немец

      Необходимо менять классы в 20-й, 26-й и 32-й строке. Название классов иконок брать у FontAwesome.

       
      Ответить
  • Александр

    Добрый день!

    Можете помочь с установкой на сайт на платформе ucoz?

    Делаю все по инструкции, получается следующее — http://okachim.ru/index/test/0-28

     
    Ответить
    • Юрий Немец

      Добрый день, Александр!

      HTML структуру вы разместили, осталось разместить CSS стили. В файле вашей темы есть файл стилей, в который вам необходимо вставить все стили из данной статьи (полный файл стилей находится в архиве).

       
      Ответить
      • Александр

        Т.е. стили нужно не из статьи брать, а из файла style.css? Я стили из статьи добавил просто.

        Из normalize.css стили тоже копировать?

         
        Ответить
  • Светлана

    Добрый день!

    Тоже не получается, стили не подключаются почему-то.
    Подскажите, пожалуйста, просо копируем все, что в файлах архива в css?
    Из двух файлов?
     

    Спасибо!

     
    Ответить
  • виталий

    Фикс более ровно отображается и не сьежает

    .bulletsBlock > div:hover p.titleBullet {
    bottom: 2.5em;
}
     
    Ответить
  • егор

    а как увеличить колличество блоков?

     
    Ответить
  • Татьяна

    Спасибо! У меня получилось 🙂

     
    Ответить
  • topfuns

    Выглядит круто и современно, забираю себе

     
    Ответить
  • Валерий

    Сделал себе подобное, спасибо!

     
    Ответить
  • Алекс

    Сделайте так и будет веселее

    .bulletsBlock > div:hover span.iconBullet {
    line-height: 1.35em;
    font-size: 10.625em;
    top: -4.7%;
    transform: rotateX(60deg);
    opacity: .6;
    }

     
    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *