Put some content before or after a bootstrap container - html

I need to have a bootstrap container of one color (let's say red) and then I need to color the space on the right with a different color and the space on the left with another one (actually my situation is more difficult because I have an image behind the container and on the right side of the container I should have a transparent effect, while on the left side I should have a solid color).
Do you have any idea on how to achieve it? I did a simple plunker to show what I'm trying to achieve (I tried with :after and :before but with 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 what you're going for, maybe you can consider using a background gradient with the two center stops right on each other.
Like so . . .
http://plnkr.co/edit/OMAfdVi3mK50M1nXNaR7?p=preview
/* Permalink - use to edit and share this 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 */

Related

How do I add custom html code to a wordpress widget so that it's css won't break theme styling?

I want to add such intro (that I have found on Codepen) to my website, i.e. to the top full-width widget on the home page, but its' styles contradict with theme's CSS.
How can I make this work on my home page? Is there any plugin needed for embedding HTML code into the WordPress Text widget, or what? Thank for the answer.
* {
margin: 0;
padding: 0;
}
body {
background: rgb(23,41,58); /* Old browsers */
background: -moz-linear-gradient(top, rgba(23,41,58,1) 0%, rgba(52,73,94,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(23,41,58,1)), color-stop(100%,rgba(52,73,94,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17293a', endColorstr='#34495e',GradientType=0 ); /* IE6-9 */
}
canvas {
display: block;
width: 100%;
}
You can put your carvas tags inside a new tags and edit that CSS class:
<div id="new-id"><carvas></carvas></div>
What I suggest you is download a plugin called "simple css" and change the classes and the Id inside the "simple css" interface, and edit your "new-id" CSS.
new-id {
background: rgb(23,41,58); /* Old browsers */
background: -moz-linear-gradient(top, rgba(23,41,58,1) 0%, rgba(52,73,94,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(23,41,58,1)), color-stop(100%,rgba(52,73,94,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17293a', endColorstr='#34495e',GradientType=0 ); /* IE6-9 */
}
also you can add a new widget type Text in your sidebar and edit the widget as you want using new CSS classes or ID.
before copy / pasting code I thin you need to look a bit to CSS SELECTOR for understand what the code you copy do in most part.
The codepen you link is composed mostly by JS and a bit of CSS.
Your CSS code focus the all the element (*) and all the content of the page (body), before implementing you need to isolate theses CSS selectors to one div who will load the canvas.
You didn't even talk about the javascript part who his very important in this codepen.
Maybe Try to upgrade a bit you skill code by looking HTML, CSS tutorials for understanding the basics of what you want.

background gradient not displaying properly with bootstrap 3

When I add a background color gradient to my web page, it works fine up until the end of the last container in my body element. After that, the gradient stops working and you see a distinct contrast between the end of the container and the rest of the empty page.
To see for yourself:
Download the default web page from layoutit.com and edit css/style.css with:
body {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #207cca 30%, #2989d8 50%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(30%,#207cca), color-stop(50%,#2989d8), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#207cca 30%,#2989d8 50%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#207cca 30%,#2989d8 50%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#207cca 30%,#2989d8 50%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#207cca 30%,#2989d8 50%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
The css was generated by http://www.colorzilla.com/gradient-editor/ , so I'm fairly certain it works because it seems to be the popular choice for making a gradient and it works on a non bootstrap page.
Any ideas on how to get the gradient to render through the whole page?
Edit
View an example at http://theshachar.com/so/
Thanks!
Based on your edit, the issue is that the background wasn't extending to the window height.
To solve this, simply add:
html, body {
height:100%;
}
Alternatively, you could also use viewport-percentage units like vw:
body {
height: 100vh;
}
you can also set a min-height:
body {
min-height: 100vh;
}

Can I create a CSS gradient background for <td> in IE8?

I am using IE 8 and not CSS3 and i'm wondering, I have a few
<td>
tags and I currently the CSS is
td {
background-color: blue;
}
Is there a way to create a gradient for the background of the td's without CSS3 for IE 8? I tried
td {
background-image: -o-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
}
and
td {
background-image: linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
}
but neither of them worked for me.
Now, I know that I can give the td a background image and photoshop a gradient but the thing is, my td sizes are not constant, one td might have a 150px height, one might have a 90px height, one might have a 150px width and one might have a 90px width. I need a generic code which will work for all td's regardless of their height and width.
Is there a way to make the background-image of the td to automatically be the width and height of the td even though the td's width and height of the td isn't specified and even though it just depends on how much text is inside the td?
IE 8 does support an old, non-valid, Microsoft-specific CSS gradient syntax. It doesn't offer all the features of proper CSS gradients (e.g. you can't specify stop locations), so you won't be able to exactly match the gradient you've got.
See http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx
Here's a rough approximation of your gradient:
td {
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FE856B, endColorStr=#23AB11);
}
When I need to do a css gradient I usually use this site, as it provides you all the css for it to work on all browsers
If you want to display a background texture to a td:
CSS level-2
td {
background-image: transparent url(a-real-image.img) repeat-x 0 0;
}
CSS level-3
td {
background: rgb(30,87,153); /* Old browsers */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
}
CSS proprietary (where 'filter:' will deal with microsoft ie 6-8 [last line])
td {
background: rgb(30,87,153); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
}
You can study over here for -ms-css : http://ie.microsoft.com/TESTDRIVE/Graphics/CSSGradientBackgroundMaker/Default.html

How can I apply a gradient over a background with CSS?

I'm getting my feet wet with CSS3 and I'm doing my best to convert a Photoshop comp to HTML.
I have multiple instances of a background (using background url) with differing heights and I'd like to apply a gradient on top of that background using rgba gradients (using the alpha channel). I'd obviously like to stay away from a static background image with the gradient built into the pixels.
Is there a way to do this in CSS by 'stacking' the gradient on top of the background url?
I'm guessing if I can't do it in one element, I would put a container inside my background element, float it and make the width and height fill the background element, but that seems pretty messy.
Any advice is appreciated! Thanks for your time!
Here are two examples of the same background and gradient but at different heights: a nav and a footer
The code would look something like this:
<nav>
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
</ul>
</nav>
style:
nav {
background : url('repeating-background-image.png') repeat;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
}
Is there a way to do this in CSS by 'stacking' the gradient on top of the background url?
Yes: CSS3 allows multiple background images, separated by commas.
As gradients behave like images, you can use them in conjunction with background images:
div {
width: 400px;
height: 400px;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* Chrome10+,Safari5.1+ */
}
http://jsfiddle.net/kReNL/
This doesn't work in IE 8 or earlier, but then neither do CSS gradients. (Although Microsoft's filter property works in IE 8 and earlier, and that does support gradients with alpha transparency - see Can you use rgba colours in gradients produced with Internet Explorer’s filter property?).
http://jsfiddle.net/8gvZM/
background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
and make a div above it with the background url on a lower opacity.
Is that what you mean?
Use CSS :before to create an additional (pseudo) element sitting on top of the original element.
The original element would have the image background, and the :after element would have the gradient, with an opacity setting so that the original element shows through it.
div {
width: (whatever size you want to set it to)
height: (ditto)
position:relative;
background:url('mainImage.jpg');
z-index:5;
}
div::before {
content:'';
width: .... (same as main div)
height: .... (same as main div)
position:absolute;
z-index:-3;
display:block;
opacity:0.5;
background: linear-gradient(to bottom, #8fc400 0%,#ff0000 100%); /* plus add the other browser-specific gradient styles too */
}
I've done a jsFiddle for you to demonstrate: see here
Hope that helps.
[EDIT] Changed the details of the answer above slightly in response to OP's comment. Now using :before rather than :after, and using z-index to layer things so that the actual text content is visible on top of both backgrounds.

How to generate CSS3 gradient background

I'm working on a website from a PSD. In a section, I've seen that there are a mixed background color. I think It'll be a best way to match the color if I can use CSS3 gradient. But, I can't use CSS3 gradient. So, I took a help of "online CSS3 gradient background generator from image". Look, I want code for this background image:
But, from the online generator I've got this:
Look, the two images aren't same. There are a huge white color on the 1st image at the almost left to right which is absent in the 2nd image. Take a look please, the first image again:
I've used this online generator by uploading image and copy-paste the CSS code which it provided:
You can check the result at this link test link too: http://abidhasan.zxq.net/test/
So, how can I get the perfect CSS3 and cross-browser compatible code for the first image of this question?
The actual section of the PSD is:
Isn't the CSS3 gradient best and shortest way to make the background of that section?
I used ColorZilla's Gradient Editor and the ColorZilla Chrome extension in order to find the upper and lower bounds of the gradients you posted. Then I used the CSS rule sets generated by the gradient editor to make two div elements. I nested one inside of the other, and gave the inner div opacity: .5.
HTML:
<div class="gradient" style="width: 400px; height: 100px;">
<div class="topGradient" style="width: 400px; height: 100px; opacity: 0.5"></div>
</div>
CSS:
.topGradient {
background: rgb(204,204,204); /* Old browsers */
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(255,255,255,1) 22%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(22%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* IE10+ */
background: linear-gradient(to bottom, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.gradient {
background: rgb(224,224,224); /* Old browsers */
background: -moz-linear-gradient(left, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 35%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(224,224,224,1)), color-stop(35%,rgba(255,255,255,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 */
}
The end result was this:
Here's a JSFiddle.