How to make a background using CSS gradient with flat color?


Tags: css3,gradient

Problem :

A backgrond like this with same height of red and yellow.

enter image description here



Solution :

Using Colorzilla's gradient generator, just set two colors to the same % location and you'll get a hard edge between the two colors.

background: #ffff00; /* Old browsers */
background: -moz-linear-gradient(top, #ffff00 30%, #ffff00 30%, #fe0000 30%); /*  FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#ffff00), color-stop(30%,#ffff00), color-stop(30%,#fe0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00', endColorstr='#fe0000',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* W3C */

    CSS Howto..

    how to keep the css style after inserting a row to table by jquery

    How to draw a diagonal line with GWT or HTML+CSS+JavaScript?

    How to select only for the first of divs with equal names?

    How to align navigation links after navigation menu is collapsed using bootstrap

    HTML/CSS - How to get label inside form to animate?

    How to make an element have a 'hover' effect (CSS) while hovering another element using jQuery?

    HTML5 - Show Items Side By Side

    Showing/hiding elements inside a div block with HTML and CSS

    How to display (
  • ) menu items over divs - z-index not working
  • How do I absolute position a div from left to the right using media queries?

    How to select XML element by xlink:href attribute with CSS?

    How to edit jquery slider

    How to make css border like this? [closed]

    How To Implement 2D Perspective Within a 3D Space (CSS & jQuery)

    How to change focus color when input is filled in with required attribute javascript/html/css

    JQuery, fade out table row and contents (on scroll) in ratio to how much the row is hidden by containing div

    How to set link color inside GridView cell

    How to view CSS/HTML in GUI?

    How to prevent javascript and css messing up?

    How to locate and use fonts in Qt for Embedded Linux?

    How to attach stylesheet to HTML email?

    How to nest classes in css modules and react?

    How to make my

    How do I vertically center text and have the dark blue bar go across the entire screen

    How to chose which CSS rule to use from multiple style sheets

    How to create spoiler text?

    how to remove small space that only appear in iphone browser

    How to put two divs on the same line with CSS in simple_form in rails?

    How do I resize an image in IE 8

    CSS: How do you keep this Div to the right of a float?