Векторная графика для начинающих: теория и практика технического дизайна — страница 15 из 31

">

Полный код CSS решения задачи

div.illustration {
    position: relative;
    display: block;
    width: auto;
    max-width: 1000px;
    height: 420px;
    margin: 20px auto 0 auto;
    background: #3d5077;
    background: -moz-linear-gradient(top, #3d5077 0%, #5a6d95 25%, #6a82b4 50%, #7893ce 100%);
    background: -webkit-linear-gradient(top, #3d5077 0%,#5a6d95 25%,#6a82b4 50%, #7893ce 100%);
    background: linear-gradient(to bottom, #3d5077 0%,#5a6d95 25%, #6a82b4 50%, #7893ce 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d5077',
    endColorstr='#7893ce',GradientType=0 );
    overflow: hidden;
}
div.illustration div.topLineCorner {
    position: absolute;
    z-index: 3;
    display: block;
    width: 100%;
    height: 47px;
    background-image: url('../img/top-line-corner.svg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: top center;
}
div.illustration div.bottomLineCorner {
    position: absolute;
    bottom: 0;
    z-index: 6;
    width: 100%;
    height: 47px;
    display: block;
    background-image: url('../img/bottom-line-corner.svg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: top center;
}
div.illustration div.mainBlock {
    display: block;
    width: 100%;
    height: 324px;
    border: none;
}
div.illustration div.mainBlock div.topLeftCorner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    width: 85px;
    height: 90px;
    background-image: url('../img/top-left-corner.svg');
    background-size: 85px 90px;
    background-repeat: no-repeat;
    background-position: 50%;
}

Продолжение полного кода CSS > illustration.css

div.illustration div.mainBlock div.topRightCorner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 6;
    width: 85px;
    height: 90px;
    background-image: url('../img/top-right-corner.svg');
    background-size: 85px 90px;
    background-repeat: no-repeat;
    background-position: 50%;
}
div.illustration div.mainBlock div.bottomLeftCorner {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 6;
    width: 85px;
    height: 90px;
    background-image: url('../img/bottom-left-corner.svg');
   background-size: 85px 90px;
    background-repeat: no-repeat;
    background-position: 50%;
}
div.illustration div.mainBlock div.bottomRightCorner {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 6;
    width: 85px;
    height: 90px;
    background-image: url('../img/bottom-right-corner.svg');
    background-size: 85px 90px;
    background-repeat: no-repeat;
    background-position: 50%;
}
div.illustration div.mainBlock div.leftCorner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    display: block;
    width: 42px;
    height: 420px;
    background-image: url('../img/left-corner.svg');
    background-size: 42px 420px;
    background-position: center center;
}
div.illustration div.mainBlock div.rightCorner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 6;
    display: block;
    width: 42px;
    height: 420px;
    background-image: url('../img/right-corner.svg');
    background-size: 42px 420px;
    background-position: center center;
}
div.illustration div.mainBlock div.slogan {
    position: absolute;
    z-index: 5;
    display: block;
    width: 100%;
    height: 420px;
    background-image: url('../img/slogan.png');
    background-size: auto 360px;
    background-repeat: no-repeat;
    background-position: center center;
}
div.illustration div.mainBlock div.object {
    position: absolute;
    top: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 420px;
    background-image: url('../img/object.png');
    background-size: auto 180px;
    background-repeat: no-repeat;
    background-position: center bottom;
}

Продолжение полного кода CSS > illustration.css

div.illustration div.mainBlock div.cloudsStars {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 420px;
    background-image: url('../img/stars-clouds.svg');
    background-size: auto 420px;
    background-repeat: no-repeat;
    background-position: center center;