Как полоса повлияла на цвета фона за изображениями слайдов?

К настоящему времени я довольно неплохо смотрю на код других разработчиков и применяю их методы в своих собственных проектах. Однако мне любопытно, как разработчик Stripe стилизует эти фоны для каждого из ползунков на своей домашней странице.

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


image gradient css styling
person Mike Grant    schedule 20.11.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

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

Ну, я делаю:

<div class="backgrounds">
  <div class="mobile-background current"></div>
  <div class="desktop-background"></div>
  <div class="international-background"></div>
</div>

html#home header.hero div.backgrounds div {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: none;
    opacity: 0;
    -webkit-filter: alpha(opacity=0);
       -moz-filter: alpha(opacity=0);
        -ms-filter: "alpha(opacity=0)";
        -ms-filter: alpha(opacity=0);
         -o-filter: alpha(opacity=0);
            filter: alpha(opacity=0);
    -webkit-transform: translate3d(0,0,0);
       -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
         -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
}
html#home header.hero div.mobile-background {
    background: #1E8ECF;
    background-image: 
        -webkit-radial-gradient(closest-corner,rgba(16, 47, 70, 0) 60%,rgba(16, 47, 70, 0.26)),
        -webkit-linear-gradient(108deg,#26D0CE,#1A2980 90%);
    background-image: 
        -moz-radial-gradient(closest-corner,rgba(16,47,70,0) 60%,rgba(16,47,70,0.26)),
        -moz-linear-gradient(108deg,#26d0ce,#1a2980 90%);
    background-image: 
        -ms-radial-gradient(closest-corner,rgba(16,47,70,0) 60%,rgba(16,47,70,0.26)),
        -ms-linear-gradient(108deg,#26d0ce,#1a2980 90%);
}
html#home header.hero div.desktop-background {
    background: #0F1B58;
    background-image: 
        -webkit-radial-gradient(closest-corner,rgba(16, 47, 70, 0) 60%,rgba(16, 47, 70, 0.2)),
        -webkit-linear-gradient(108deg,#E0DA81,#E0A681 10%,#0F1B58 90%);
    background-image: 
        -moz-radial-gradient(closest-corner,rgba(16,47,70,0) 60%,rgba(16,47,70,0.2)),
        -moz-linear-gradient(108deg,#e0da81,#e0a681 10%,#0f1b58 90%);
    background-image: 
        -ms-radial-gradient(closest-corner,rgba(16,47,70,0) 60%,rgba(16,47,70,0.2)),
        -ms-linear-gradient(108deg,#e0da81,#e0a681 10%,#0f1b58 90%);
}
html#home header.hero div.international-background {
    background: #00396F;
    background-image: 
        -webkit-radial-gradient(closest-corner,rgba(16, 47, 70, 0) 60%,rgba(16, 47, 70, 0.2)),
        -webkit-linear-gradient(108deg,#E5E9BF 10%,#00396F 90%);
    background-image: 
        -moz-radial-gradient(closest-corner,rgba(16,47,70,0) 60%,rgba(16,47,70,0.2)),
        -moz-linear-gradient(108deg,#e5e9bf 10%,#00396f 90%);
    background-image: 
        -ms-radial-gradient(closest-corner,rgba(16,47,70,0) 60%,rgba(16,47,70,0.2)),
        -ms-linear-gradient(108deg,#e5e9bf 10%,#00396f 90%);
}
html#home header.hero div.backgrounds div.current {
    display: block;
    z-index: 1;
    opacity: 1 !important;
    -webkit-filter: none;
       -moz-filter: none;
        -ms-filter: none;
         -o-filter: none;
            filter: none;
}

Абсолютная ссылка на элемент:

html#home.js.csstransitions body div#main div#main-content header.hero.nav-animation-element div.backgrounds
person zessx    schedule 20.11.2013