Своя визитка

Следовала урокам «эффекты с кругами при наведении курсора мыши». Беру второй вариант, вношу лишь пару изменений. Например как бы выглядела моя.


Стандартный виджет визитка отключаем, а в свободный блок вставляем код.

<ul class=«ch-grid»>

<li>

<div class=«ch-item ch-img-1»>

<div class=«ch-info-wrap»>

<div class=«ch-info»>

<div class=«ch-info-front ch-img-1»></div>

<div class=«ch-info-back»>

<h3>Ваш ник</h3>

<p><b>ICQ</b> номер<br /> <b>E-mail</b> ваша@почта.com</p>

<br />

<p><a href=«vk.com/»>v kontakte</a></p>

</div>

</div>

</div>

</div>

</li>

</ul>

 Внутри тега вы можете, конечно, писать что угодно; кто-то дату рождения указывает или хотите пару строк о себе. Это я предлогаю аську, почту и вк. ) А так дело ваше.

CSS

.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}

.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}

.ch-grid:after {
clear: both;
}

.ch-grid li {
width: 220px;
height: 220px;
display: inline-block;
}

.ch-item {
width: 100%;
height: 100%;
position: relative;
cursor: default;

-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.ch-img-1 {
 background-image: url(ваша аватарка 220х220);
}
.ch-info {
position: absolute;
background: rgba(0, 0, 0, 0.8);;
width: 100%;
height: 100%;
opacity: 0;

-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;

-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);

-webkit-backface-visibility: hidden;

}

.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 80px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
opacity: 0;
-webkit-transition: all 1s ease-in-out 0.4s;
-moz-transition: all 1s ease-in-out 0.4s;
-o-transition: all 1s ease-in-out 0.4s;
-ms-transition: all 1s ease-in-out 0.4s;
transition: all 1s ease-in-out 0.4s;
}

.ch-info p a {
display: block;
color: #fff;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
color: #fff222;
color: rgba(255,242,34, 0.8);
}

.ch-item:hover {
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}

.ch-item:hover .ch-info p {
opacity: 1;
}

Вот. Теперь получается такой плавный выход содержимого визитки из центра авы при наведении и «сжимающийся», при отводе курсора, обратно.

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

Еще момент. Если под ником у вас много текста и хотите немного поднять его вверх, вам надо уменьшить высоту height для ника .ch-info h3

Всё. ) Всем удачи!


Обсудить у себя 1
Комментарии (10)

вторую часть тож в свободный блок?

css в наастройки оформления css

мм, я понимаю, что звучит очень глупо, но в основное поле? а куда именно? тли неважно?'

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

в общем и то и то кидать в доп.блок?

я все обещаю себе начать учиться, но как видишь — дуб дубом

не )) html в блок, а css в настройки

Дошло)) спасибо большое)

что-то у меня муть получилась..
тэкс, попробую разобраться 

фиг-во почему, ссылка не туда направляет. если что вот копируйте http://ruseller.com/lessons.php?rub_id=2&id=1512

У меня к сожалению, не получилось(

Чтобы комментировать надо зарегистрироваться или если вы уже регистрировались войти в свой аккаунт.

Войти через социальные сети: