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

Принцип строения страниц по продаже любого товара практически всегда неизменен. Они состоят из отдельных блоков, обращаясь к которым, пользователь может составить мнение о продаваемых на нем товарах. Если каждый такой блок оригинально оформить, то страница, которая из них состоит, будет выглядеть ярко и привлекательно. Так, чтобы посетителю обязательно захотелось купить предлагаемый товар, даже если всего пять минут назад он об этом и не думал. Здесь мы рассмотрим, как грамотно создать блок с выгодами на CSS. Остановимся на этом вопросе отдельно, так как использование блоков – самый популярный способ организации одностраничного сайта.
Что мы должны получить в результате: конструктивно блок состоит из двух составляющих — видимой и скрытой. Видимый модуль составляют иконка и наименование выгоды, преимущества. В скрытой части помещается полное описание выгоды, оно появляется при наведении на иконку курсора.

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

Download – Demo

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

1. HTML структура

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

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

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

Мы имеем один большой блок, в котором будут три блока с описаниями и иконками.

<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>

<p class="titleBullet">Выгода 1</p>

<p class="hideText">Дополнительный<br>скрытый текст 1</p>

</div>

</div>

</div>

Описание структуры:

С первой по пятнадцатую строчки – общий блок, содержащий три блока с описанием.
Со второй по шестую строчки – один отдельный блок с описанием выгоды.
Третья строчка – иконка блока.
Четвертая строчка – видимый модуль с указанием выгоды.
Пятая строчка – скрытый модуль с подробным описанием выгоды.

Как видим, конструкция очень простая. Теперь нужно добавить анимацию.

2. CSS стили

Чтобы создать анимацию нам не придется обращаться к Javascript. Нам будет достаточно возможностей CSS3.

Указываем стили, общие для всех трех блоков:

.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;
}

.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;

}

Затем следует иконка с анимацией:

.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%;
}

.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%;

}

В конце описываем стили для блоков с текстовым указанием выгоды:

.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;
}

.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;

}

Вывод

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

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

1. HTML структура

2. CSS стили

Вывод

Залишити відповідь Скасувати коментар