Перейти к содержанию
milus

вопрос по верстке(css)

Рекомендуемые сообщения

Собственно сайт http://demo.curlythemes.com/equestrian-v2/. При просмотре кода в хроме вижу, что рамки вокруг изображений лошадей - это не фоновые изображения, а обычный css. Ну и немного не вкуриваю как это сделать.  Кто-нибудь такое делает (или делал) - к своему стыду с этим вообще не знаком, да и инфу конкретную как-то не найду. Был бы признателен за информацию по теме или ссылочку на подходящий мануал.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Сейчас смотрю, если бы меня попросили такое бы сделать,  я бы наверно div с изображением "завернул" в еще два div'а с границами и тенями, но все равно не понимаю как их наклонили. Да и сделано там все-таки иначе, вообщем интересный вопрос, рассчитываю на помощь.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

.Может это +  Это  ? 


.photo-frame:before {
    content: "";
    height: 100%; width: 100%;
    background: #eff4de;
    border: 5px solid #fff;  
    position: absolute;
    z-index: -1;
    top: 0px;
    left: -10px;
    -webkit-box-shadow:  1px 1px 5px 0px rgba(0, 0, 0, 0.25);
    box-shadow:  1px 1px 5px 0px rgba(0, 0, 0, 0.25);
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
    box-sizing: border-box;
}
.photo-frame:after {
    content: "";
    height: 100%; width: 100%;
    background: #768590;
    border: 5px solid #fff;
    position: absolute;
    z-index: -1;
    top: 3px;
    left: 0px;
    -webkit-box-shadow:  1px 1px 5px 0px rgba(0, 0, 0, 0.25);
    box-shadow:  1px 1px 5px 0px rgba(0, 0, 0, 0.25);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    box-sizing: border-box;
}
 
 
http://prntscr.com/24o18e

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Может похвастаетесь позже реализацией?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.