CODEWITHSUNDEEP
css
Kyrbi
Kyrbi

Reputation: 2250

Multiple background colors on div's background

Hey there I'm struggling with creating multiple colour background with CSS. I tried gradient but it makes shades which I doesn't want. I want to create this with CSS:

Example of what I want to create with CSS

Does anyone know how to create this without getting shades that I got when I used gradient.

Here is my html code.

<div id="head">
        <h1>Mira's place</h1><br>
        <h2><span id="quote">Mira is creating huge game named Rock Paper!</span></h2>
        <ul>
            <li>Home</li>
            <li>Games</li>
            <li>Applications</li>
            <li>Contact</li>
        </ul>    
</div>

Upvotes: 2

Views: 291

Answers (3)

Linus Caldwell
Linus Caldwell

Reputation: 11058

Don't know, what you mean with shades. Does the following not look like you wanted to? (Some modifications may be needed, but it shows the way to go)

background: linear-gradient(135deg, #ffffff 0%,#ffffff 25%,#0011ff 25%,#0011ff 35%,#ffffff 35%,#ffffff 65%,#ff0000 65%,#ff0000 75%,#ffffff 75%,#ffffff 100%);

Here is the Fiddle.

Upvotes: 2

derek_duncan
derek_duncan

Reputation: 1377

Try it again with gradients, but with this code:

#head /* or body */
{
        -webkit-background-size: 40px 40px;
        -moz-background-size: 40px 40px;
        background-size: 40px 40px;         
        background-image: -webkit-gradient(linear, left top, right bottom,
                                color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
                                color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
                                color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
                                to(transparent));
        background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);

         -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
         -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);       
         box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
         width: 100%;
         border: 1px solid;
         color: #fff;
         padding: 15px;
         position: fixed;
         _position: absolute;
         text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

BTW: I got this code from www.red-team-design.com. Here is the link.

Upvotes: 4

Pavlo Shandro
Pavlo Shandro

Reputation: 808

.element{
    border-bottom: 25px solid #2C58DF;
    border-top: 25px solid #D71E26;
    height: 25px;
    width: 150px;
    -webkit-transform-origin: top left;
    -webkit-transform: translateX(165px) translateY(55px) rotate(135deg);
    -moz-transform-origin: top left;
    -moz-transform: translateX(165px) translateY(55px) rotate(135deg);
    transform: translateX(165px) translateY(55px) rotate(135deg);
    transform-origin: left top 0;
}

http://jsfiddle.net/etW25/

Upvotes: 1

Related Questions