Кража века.

[Rommax]

Добра и мира всем.
Может кто-нибудь вытащить css картинки с сайта ?
То есть очень нравится то как там устроен фон и как меняются картинки при изменении размера окна.
Хотел вытащить но как то я ничего не понял.
Все что я смог надыбать так это фоновая картинка и все )
Если плавно менять размеры окна то можно наблюдать как все происходит )

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Слева будет окошко маленькое там можно выбрать этот красный стиль .
Если кто поможет буду очень благодарен.

 

[Skaiman]

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

 

[Rommax]

ну обычно достаточно было взять css картинки если были и немного кода страницы. А вот на этом сайта я нифига не понимаю куда и что понатыкано.
Вот что получилось ) И больше ничего )


Ужасссссс. Не смог отобразить фотки справа и слева. И как то все криво встало )

 

[superserega]

если разбираешься в css, рассказываю как всё устроено (но предупреждаю сразу - код смотрел не до конца)

Сам фон шапки состоит из трёх картинок: левая сторона, центр, правая сторона. Левая картинка имеет обтекание по левой стороне (float: left), правая - по правой (float: right). Соответсвенно когда уменьшаем страницу они расходятся по своим сторонам. Центральная картинка - это просто хорошо подогнанный фон, который повторяется (background-repeat: repeat;).

Теперь бабы. Думаю у баб та же система что и у фона. Обтекание по сторонам, только с небольшими отступами (например, float: left; margin-left: 20px; у левой)

если знаешь css то думаю не составит труда написать нужный код, особенно теперь, когда знаешь как всё устроено :-)

 

[Rommax]

superserega, а не смог я ) Там вроде как стиль расположения по бокам картин идет в самом коде . Вставлял как в коде но они просто не отображаются )

 

[Mirovinger]

Там кроме всего, ещё используются @media, благодаря чему, и скрывается часть картинок, при уменьшении разрешения экран.
Сделать можно, но как и сказали выше, чуть заморочно.

CSS

body {
    background-color: #580000;
    background-image: url("/intellect/templates/_aqlo/images/bg-dark-4776.png");
    background-position: center top;
    background-repeat: repeat;
    color: #a0a0a0;
}
a, a:hover, .footer-col a:hover {
    color: #aa7d7d;
}
.article_block_image::after, .mini_block_image::after, .singl_album_block_image::after, .concert_affiche_block_image::after, .parent_list_margin .block_section_gallery .catalog_gallery_block_image::after {
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.logo {
    margin: 10px 0 180px;
    width: 100%;
}
.logo a {
    display: block;
}
#main_block #gate_left {
    background: rgba(0, 0, 0, 0) url("/intellect/templates/_aqlo/images/gate_left.png") no-repeat scroll 0 0;
    float: left;
    height: 371px;
    position: absolute;
    width: 100%;
    z-index: -1;
}
#main_block #gate_right {
    background: rgba(0, 0, 0, 0) url("/intellect/templates/_aqlo/images/gate_right.png") repeat-y scroll right center;
    height: 371px;
}
#main_block #gate_center {
    background: rgba(0, 0, 0, 0) url("/intellect/templates/_aqlo/images/gate_center.png") repeat-x scroll 0 0;
    height: 371px;
    margin-left: 500px;
    margin-right: 500px;
}
#main_block #gate_left #header_gradient {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0;
    float: left;
    height: 159px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 11;
}
#main_block #gate_left #header_vintage {
    background: rgba(0, 0, 0, 0) url("/intellect/templates/_aqlo/images/header_vintage.png") no-repeat scroll center top;
    height: 194px;
    left: 0;
    position: absolute;
    top: 150px;
    width: 100%;
    z-index: 10;
}
#main_block #gate_left #text_MF {
    left: 50%;
    margin-left: -245px;
    max-width: 100%;
    position: absolute;
    top: 250px;
    z-index: 12;
}
@media (max-width: 489px) {
    #main_block #gate_left #text_MF {
        left: 0;
        margin-left: 0;
    }
}
#main_block #vintage_left_top {
    background: rgba(0, 0, 0, 0) url("/intellect/templates/_aqlo/images/vintage_left_top.png") no-repeat scroll left top;
    height: 191px;
    left: 0;
    position: absolute;
    top: 0;
    width: 205px;
    z-index: -1;
}
#main_block #vintage_right_top {
    background: rgba(0, 0, 0, 0) url("/intellect/templates/_aqlo/images/vintage_right_top.png") no-repeat scroll right top;
    height: 191px;
    left: 100%;
    margin-left: -205px;
    position: absolute;
    top: 0;
    width: 205px;
    z-index: -1;
}
@media (max-width: 999px) {
    #main_block #vintage_left_top, #main_block #vintage_right_top {
        background-size: 70% auto;
    }
}
@media (max-width: 799px) {
    #main_block #vintage_left_top, #main_block #vintage_right_top {
        background-size: 50% auto;
    }
}
@media (max-width: 399px) {
    #main_block #vintage_left_top, #main_block #vintage_right_top {
        background-size: 30% auto;
    }
}
#main_block #image_background {
    height: 928px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
#main_block #image_background #image_background_left {
    background-position: left top;
    background-repeat: no-repeat;
    float: left;
    height: 100%;
    max-width: 450px;
    position: relative;
    width: 100%;
    z-index: 15;
}
#main_block #image_background #image_background_right {
    background-position: right top;
    background-repeat: no-repeat;
    float: right;
    height: 100%;
    max-width: 450px;
    position: relative;
    width: 100%;
    z-index: 15;
}
@media (max-width: 899px) {
    #main_block #image_background #image_background_right {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        display: none;
        height: 0;
        width: 0;
    }
}