"Big Layer" - просто, оригинально, информативно.

Сегодня хочется рассказать про новые возможности по оформлению ваших профилей групп и блогов. После запуска оформлений страниц мы заметили, что многие пользователи столкнулись с проблемами при создании собственных оформлений из-за отсутствуя знания CSS. Зато готовые темы  пользовались довольно большим спросом. Исходя из этих наблюдений было решено создать специальный слой "Big Layer". "Big Layer" представляет из себя обычный слой для загрузки на него изображений, опять же с использованием CSS, но содержит он всего 17 строк кода. Возможно у Вас возник вопрос почему снова CSS? Ответ прост СSS-это максимальная настраиваемость!

Давайте посмотрим какого эффекта можно добиться применив некоторые свойства CSS к Big Layer.



Для большего удобства эти свойства будут выделены красным цветом.


Оригинал изображения:

Стандартный CSS код "Big Layer":

.sz_profile_big{background: url(http://socialzet.com/uploads_user/2000/1512/169580.jpg) no-repeat !important;
    position: absolute;
    height: 250px;
    display: block;
}

.etovi{color: #fff !important;}

.sz_user_displayname_profile{color: #fff !important;}

.profile_leftside{display: inline-block;
    top: -160px;
    z-index: 10;
}

.profile-picture{border-top: #fff solid 4px;}


Эффект внутренней тени:

Код:

.sz_profile_big{background: url(http://socialzet.com/uploads_user/2000/1512/169580.jpg) no-repeat !important;
    position: absolute;
    height: 250px;
    display: block;
    box-shadow: inset 0px 0px 50px #000;
}

.etovi{color: #fff !important;}

.sz_user_displayname_profile{color: #fff !important;}

.profile_leftside{display: inline-block;
    top: -160px;
    z-index: 10;
}

.profile-picture{border-top: #fff solid 4px;}



Эффект внешней тени:

Код:

.sz_profile_big{background: url(http://socialzet.com/uploads_user/2000/1512/169580.jpg) no-repeat !important;
    position: absolute;
    height: 250px;
    display: block;
    box-shadow: 0px 0px 50px #000;
}

.etovi{color: #fff !important;}

.sz_user_displayname_profile{color: #fff !important;}

.profile_leftside{display: inline-block;
    top: -160px;
    z-index: 10;
}

.profile-picture{border-top: #fff solid 4px;}




Закругление краёв изображения:

Код:


.sz_profile_big{background: url(http://socialzet.com/uploads_user/2000/1512/169580.jpg) no-repeat !important;
    position: absolute;
    height: 250px;
    display: block;
    border-radius: 15px;
}

.etovi{color: #fff !important;}

.sz_user_displayname_profile{color: #fff !important;}

.profile_leftside{display: inline-block;
    top: -160px;
    z-index: 10;
}

.profile-picture{border-top: #fff solid 4px;}


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

Сейчас мы ведем активное тестирование возможностей "Big Layer", и хотим что бы вы тоже попробовали поиграться с этим.