html - Put some content before or after a bootstrap container -
i need have bootstrap container of 1 color (let's red) , need color space on right different color , space on left 1 (actually situation more difficult because have image behind container , on right side of container should have transparent effect, while on left side should have solid color).
do have idea on how achieve it? did simple plunker show i'm trying achieve (i tried :after , :before no success)
http://plnkr.co/edit/rvd9ndy2ofy7kcxn0scp?p=preview
.mydiv{ background-color : red; } .myouterdiv:after{ background-color : green; content : " "; } .myouterdiv:before{ background-color : yellow; content : " "; }
while unclear you're going for, maybe can consider using background gradient 2 center stops right on each other.
like . . .
http://plnkr.co/edit/omafdvi3mk50m1nxnar7?p=preview
/* permalink - use edit , share gradient: http://colorzilla.com/gradient-editor/#fff000+1,fff000+50,00ff00+51,00ff00+100 */ background: #fff000; /* old browsers */ background: -moz-linear-gradient(left, #fff000 1%, #fff000 50%, #00ff00 51%, #00ff00 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(1%,#fff000), color-stop(50%,#fff000), color-stop(51%,#00ff00), color-stop(100%,#00ff00)); /* chrome,safari4+ */ background: -webkit-linear-gradient(left, #fff000 1%,#fff000 50%,#00ff00 51%,#00ff00 100%); /* chrome10+,safari5.1+ */ background: -o-linear-gradient(left, #fff000 1%,#fff000 50%,#00ff00 51%,#00ff00 100%); /* opera 11.10+ */ background: -ms-linear-gradient(left, #fff000 1%,#fff000 50%,#00ff00 51%,#00ff00 100%); /* ie10+ */ background: linear-gradient(to right, #fff000 1%,#fff000 50%,#00ff00 51%,#00ff00 100%); /* w3c */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#fff000', endcolorstr='#00ff00',gradienttype=1 ); /* ie6-9 */
Comments
Post a Comment