Дизайн + урок "статус за визиткой"


Скачать: http://vk.com/doc94222157_294560728

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

Сразу убирем картинку, вашу аву в визитке.

#vcard .avatar img{
display: none;
}

А теперь оформим и заменим ее на большую картинку (взять можно любую, ваше фото н-р). Вниманеие: картинка по этому шаблону должна быть 256px на 256px, как минимум.

#vcard .avatar {
background: rgba(225,225,225,0.9);
border: 1px solid #CCC;
background-image:url(АДРЕС КАРТИНКИ);
background-repeat:no-repeat;
background-position:top;
width:256px;
height:256px;
        padding: 3px;
}

Плавное исчезновение картинки при наведении курсора.

#vcard .avatar:hover {
opacity: 0;
-webkit-transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}

Приступаем к статусу. Задаем форму, передвигаем наверх за большую аватарку.

#status em{
padding: 3px;
text-align: center;
background: #ebebe3;
display: inline-block;
z-index: -2;

position: absolute; 

top: 5px;
margin: 0 auto;
width:250px;
height:250px;
}

Текст статуса.

#status .add{
float:right;
text-decoration:underline;
}

#status a{
text-decoration: none; 
color: #666666; 
font-size: 24px;
}

Уберем «хвостик, часть рамки статуса, чтоб не мешалась.

#status .status_arr {
display:none;
}

Ник жирным шрифтом. Можете от себя дофантазировать еще чего-нибудь.

.username {
font-weight: bold;
}

Информацию сдвигаем под новую аву

#vcard .v_r{
z-index: 1;
width:256px;
margin: 0 auto;
text-align: center;
}

Всем добра!


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

Спасибо за урок!)

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

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