I've been trying to use a linear gradient on top of my background image in order to get a fading effect on the bottom of my background from black to transparent but can't seem to be able to make it show.
I've read other cases here and examples but none of them are working for me. I can only see the gradient or the image but not both of them.
Here's the link
Just click on the first logo, ignore that effect, what I'm trying is in the body in the whole site after that.
This is my css code:
body {
background: url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat, -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)));
}
Ok, I solved it by adding the url for the background image at the end of the line.
Here's my working code:
.css {
background:
linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%),
url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
height: 200px;
}
<div class="css"></div>
body {
margin: 0;
padding: 0;
background: url('img/background.jpg') repeat;
}
body:before {
content: " ";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);
}
PLEASE NOTE: This only using webkit so it will only work in webkit browsers.
try :
-moz-linear-gradient = (Firefox)
-ms-linear-gradient = (IE)
-o-linear-gradient = (Opera)
-webkit-linear-gradient = (Chrome & safari)
#multiple-background{
box-sizing: border-box;
width: 123px;
height: 30px;
font-size: 12pt;
border-radius: 7px;
background: url("https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Full.png"), linear-gradient(to bottom, #4ac425, #4ac425);
background-repeat: no-repeat, repeat;
background-position: 5px center, 0px 0px;
background-size: 18px 18px, 100% 100%;
color: white;
border: 1px solid #e4f6df;
box-shadow: .25px .25px .5px .5px black;
padding: 3px 10px 0px 5px;
text-align: right;
}
<div id="multiple-background"> Completed </div>
The accepted answer works well. Just for completeness (and since I like it's shortness), I wanted to share how to to it with compass (SCSS/SASS):
body{
$colorStart: rgba(0,0,0,0);
$colorEnd: rgba(0,0,0,0.8);
#include background-image(linear-gradient(to bottom, $colorStart, $colorEnd), url("bg.jpg"));
}
Related
I want to create a navbar with a transparent background and also hide the text underneath when I scroll. I want an overflow hidden but I cant get it to work. This is very specific because I have a linear-gradient with a rotation of 60% hence I cant just use the same background!
I have provided a Codepen replicating the problem down below.
HTML Code
<nav>
<h2>Logo</h2>
</nav>
<div class="pageContainer">
<p>Some test text that I want to be hidden under the navbar when I scroll!</p>
</div>
CSS code
* {
margin: 0;
padding: 0;
color: white;
font-family: sans-serif
}
body {
background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
}
nav {
box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 10px;
width: 100%;
height: 100px;
position: fixed;
top: 0;
display:flex;
align-items: center;
padding: 0 20px;
}
.pageContainer {
height: 200vh;
margin-top: 150px;
padding: 0 20px;
}
https://codepen.io/Forsrobin/pen/ZExRyMa
I'm having some issues getting the css just right, so I appreciate any help!
I have a line that's behind some buttons and all of them have a transparent background (no issue if it's an image/button that's not transparent since it's behind the object).
Currently, I have :
-----[--button--]------[--button2--]----[image]----
What I want:
-----[ button ]------[ button2 ]----[image]----
For the line since it's custom using hr wasn't enough so I went this route and am using the background of the list of buttons and setting that to look like a dotted line. However I don't want to be able to see the line behind the button and I can see how using the background would be an issue and using a div to create the line could be an alternative but I still wouldn't know how to make the line "disappear" when it's behind a button which happens to have a transparent background.
Quickly tried to reproduce this :
<html>
<head>
<style>
div {
padding: 10px 50px;
}
ul{
display:flex;
}
li{
list-style-type: none;
}
.dotted-spaced {
background-image: linear-gradient(to right, #000 40%, rgba(255, 255, 255, 0) 20%);
background-position: center;
background-size: 10px 1px;
background-repeat: repeat-x;
}
button{
background-color: rgba(255,255,255,0);
margin: 0 20px;
}
</style>
</head>
<body>
<ul class='dotted-spaced'>
<li>
<button>
Button1
</button>
</li>
<li>
<button>
Button2
</button>
</li>
</ul>
</body>
</html>
This is the only way I can think of. Not the best, but it works. To change the length of the "---", just change the width from 5em to that of your preference. I hope this works for you.
div
{
padding: 10px 50px;
}
ul
{
display: flex;
}
li
{
list-style-type: none;
}
#dotted-one {
background-image: linear-gradient(to right, #000 40%, rgba(255, 255, 255, 0) 20%);
background-position: center;
background-size: 10px 1px;
background-repeat: repeat-x;
width: 5em;
}
#dotted-two {
background-image: linear-gradient(to right, #000 40%, rgba(255, 255, 255, 0) 20%);
background-position: center;
background-size: 10px 1px;
background-repeat: repeat-x;
width: 5em;
}
#dotted-three {
background-image: linear-gradient(to right, #000 40%, rgba(255, 255, 255, 0) 20%);
background-position: center;
background-size: 10px 1px;
background-repeat: repeat-x;
width: 100%;
margin-right: 50px;
}
button
{
background-color: rgba(255, 255, 255, 0);
margin-left: 0.2em;
margin-right: 0.2em;
}
<ul class='dotted-spaced'>
<div id="dotted-one">
</div>
<li>
<button>
Button1
</button>
</li>
<div id="dotted-two">
</div>
<li>
<button>
Button2
</button>
</li>
<div id="dotted-three">
</div>
</ul>
Using HTML with CSS.
On a single div, I have three buttons each with different class (border style) coded in CSS. I made the buttons behave where their widths are fixed while the height changes size depending on the text length.
The problem I have is, when one button change size (height), the other buttons does not follow or does not inherit the same height the div is adjusted too.
Here is my code in HTML:
<div class="container-1020-Apx">
<button type="button" class="btn-styleLT">The quick brown fox jumped over the lazy rabbit because it is not paying attention to it's mother who cried wolf. </button>
<button type="button" class="btn-styleCT"> middle </button>
<button type="button" class="btn-styleRT"> right </button>
</div>
Here is my code in CSS:
.container-1020-Apx {
margin:auto;
text-align: left;
width:1020px;
min-height: 30px;
background-color: White;
display:block;
}
.btn-styleLT{
border : solid 2px #170417;
border-radius : 20px 0px 0px 0px ;
moz-border-radius : 0px 20px 0px 0px ;
font-size : 16px;
color : #f4f6f7;
padding : 4px 18px;
width: 422px;
background : #000000;
background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#353535));
background : -moz-linear-gradient(top, #000000 0%, #1f3b08 100%);
background : -webkit-linear-gradient(top, #000000 0%, #1f3b08 100%);
background : -o-linear-gradient(top, #000000 0%, #1f3b08 100%);
background : -ms-linear-gradient(top, #000000 0%, #1f3b08 100%);
background : linear-gradient(top, #000000 0%, #1f3b08 100%);
filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#1a0d1a',GradientType=0 );
min-height: 20px;
max-height: inherit;
}
.btn-styleRT{
border : solid 2px #170417;
border-radius : 0px 20px 0px 0px ;
... <almost same content>
min-height: 20px;
max-height: inherit;
}
.btn-styleCT{
border : solid 2px #170417;
font-size : 16px;
color : #f4f6f7;
padding : 4px 18px;
width:167px;
background : #000000;
... <almost same content>
min-height: 20px;
max-height: inherit;
}
.btn-styleLT:hover,
.btn-styleLT:focus,
.btn-styleLT:active,
.btn-styleLT.active {
color: #ffffff;
background-color: #3276b1;
border-color: #285e8e;
}
.btn-styleRT:hover,
... <same>
border-color: #285e8e;
}
.btn-styleCT:hover,
... <same>
border-color: #285e8e;
}
Any ideas? I was thinking to provide individual div for each button, but if there is a work-around without doing so, that would be great.
you need to use display:table and display:table-cell to achieve what you want.
here's a jsfiddle: http://jsfiddle.net/vtajZ/293/
html:
<div class="parent">
<div class="child"><button type="button" class="btn-styleLT">The quick brown fox jumped over the lazy rabbit because it is not paying attention to it's mother who cried wolf. </button></div>
<div class="child"><button type="button" class="btn-styleCT"> middle </button></div>
<div class="child"><button type="button" class="btn-styleRT"> right </button></div>
</div>
css:
*{
box-sizing:content-box;
}
.parent {
display: table;
position:relative;
}
.child {
display: table-cell;
}
.btn-styleLT{
border : solid 2px #170417;
border-radius : 20px 0px 0px 0px ;
moz-border-radius : 0px 20px 0px 0px ;
font-size : 16px;
color : #f4f6f7;
padding : 4px 18px;
width: 422px;
background : #000000;
background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#353535));
background : -moz-linear-gradient(top, #000000 0%, #1f3b08 100%);
background : -webkit-linear-gradient(top, #000000 0%, #1f3b08 100%);
background : -o-linear-gradient(top, #000000 0%, #1f3b08 100%);
background : -ms-linear-gradient(top, #000000 0%, #1f3b08 100%);
background : linear-gradient(top, #000000 0%, #1f3b08 100%);
filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#1a0d1a',GradientType=0 );
min-height: 20px;
max-height: inherit;
}
.btn-styleRT{
border : solid 2px #170417;
border-radius : 0px 20px 0px 0px ;
... <almost same content>
min-height: 20px;
max-height: inherit;
}
.btn-styleCT{
border : solid 2px #170417;
font-size : 16px;
color : #f4f6f7;
padding : 4px 18px;
width:167px;
background : #000000;
... <almost same content>
min-height: 20px;
max-height: inherit;
}
.btn-styleCT,.btn-styleRT{
height: 100%;
}
.btn-styleCT{
position:relative;
height:100%;
}
.parent button{
margin:0px;
}
I'm trying to format my css properly, to display two divs horizontally. The first div contains 3 divs, which looks good, like this, on the left of the screen:
You can see my code below.
Now I'm trying to get div4, image2, to fill that big white space.
But I just don't get it. I've tried lots of stuff from this site - overflow:hidden;, clear-both - but the best I can get is the image appearing on the right, ok, but below the baseline of #character_and_bubbles - not in the space I want. Any help please?
My markup code:
<div id = "character_and_bubbles">
<div id = "top_bubble_div">
<div id="top_bubble">
bubble text here
</div>
</div>
<div id = "p_mechanic">
mechanic image here
</div>
<div id = "right_bubble_div">
<span id="right_bubble">
bubble text here
</span>
</div>
</div>
<div id="image2">
# how do I position this image in the big white space?
</div>
And my Sass:
#character_and_bubbles {
margin-top:80px;
#top_bubble_div {
#top_bubble {
background-color: #fff0a0;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
3px 3px 0 hsla(0,0%,0%,.1);
color: #333;
display: inline-block;
font: 16px/25px sans-serif;
width: 500px;
padding: 15px 25px;
position: relative;
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
}
#top_bubble:after, #top_bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #fff0a0;
bottom: -25px;
content: '';
position: absolute;
right: 475px;
}
#top_bubble:before {
border-right: 25px solid hsla(0,0%,0%,.1);
bottom: -28px;
right: 472px;
}
}
#p_mechanic {
padding:20px;
float:left;
}
#right_bubble_div {
padding:20px;
#right_bubble {
background-color: #fff0a0;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
3px 3px 0 hsla(0,0%,0%,.1);
color: #333;
display: inline-block;
font: 16px/25px sans-serif;
width: 282px;
padding: 15px 25px;
position: relative;
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
}
#right_bubble:after, #right_bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #fff0a0;
bottom: 68px;
content: '';
position: absolute;
right: 332px;
}
}
}
#image2{
/* how do I get this to fill that big white space? */
float:right;
}
You need to move <div id="image2"> above the rest of the content in the source order. In its current position, it's rendered below the other content.
For example:
<div id="image2"># how do I position this image in the big white space?</div>
<div id="character_and_bubbles">
<div id="top_bubble_div">
<div id="top_bubble">bubble text here</div>
</div>
<div id="p_mechanic">mechanic image here</div>
<div id="right_bubble_div">
<span id="right_bubble">bubble text here</span>
</div>
</div>
You also need to give it a height - either by filling it with content or with height: 300px;. Otherwise the browser renders it as empty / no dimensions.
http://jsfiddle.net/sTvGx/3/
But if your #image element is just there to hold a background image (non-semantic), why not make it a background element on the parent of all those divs, like the body?
I've assumed that you've provided Sass instead of CSS.
Is there a way in CSS3 to create a cross-browser (i.e.: Mozilla, Webkit, and Opera) inset box shadow that will transition from black on top to white on the bottom? The closest way that I have found to do this only allows the outside of the shadow to be one color, then transition to another color on the inside, on this page: http://www.css3.info/preview/box-shadow/
Late to the party, but maybe someone will find it useful!
You can actually do it with multiple shadows on the box-shadow:
box-shadow: inset 0px 33px 25px 0 #000,
inset 0 66px 15px 0px #ccc,
inset 0 99px 5px 0px #fff;
codepen example : https://codepen.io/InFecT3D/pen/JQdmeL
Side note: it might be a little "hacky" approach, but in some cases it helps.
Take a look at this video by Lea Verou. The section I linked to talks about something very similar, where you use background-image gradients to make something like a box-shadow. If I can figure out a good working example I'll post an answer, but this should give you a good place to start. You can also do some really cool stuff, like a box shadow curl with the :after pseudo-class to make a shadow appear.
Here are a few simple examples at the top and bottom of a box, and underlining some text. You'll have to play around with it (a lot, probably) to get it to look how you want, but css has some really awesome features (and there will be more and more).
body {
display: flex;
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
}
.container {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background:
radial-gradient(at 50% 0, black, transparent 70%),
linear-gradient(0deg, black, transparent 50%) bottom;
background-size: 100% 15px;
background-repeat: no-repeat;
}
.underline {
width: 6em;
text-align:center;
font-size:30px;
}
.underline:after {
content: '\00a0';
background-image:
radial-gradient(at 50% 0, blue 0%, red 50%, transparent 75%);
background-size: 100% 2px;
background-repeat: no-repeat;
float:left;
width:100%;
}
<div class="container">
<div class="underline">Hello, world!</div>
</div>
To create a rainbow gradient box shadow:
.innerSquare {
background-color: white;
border-radius: 5px;
height: 100%;
width: 100%;
}
.rainbowGradient {
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
border-radius: 5px;
box-shadow: inset 0 0 12px 12px white, inset 0 0 3px 2px white;
background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
}
<div class="rainbowGradient">
<div class="innerSquare">
<h1>Hello World!</h1>
</div>
</div>
Try using a :before element to set a 'shadow' up.
.classname {
&:before {
content: '';
position: absolute;
display: none;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
z-index: -1;
background: linear-gradient(to bottom, red, blue);
}
&:hover {
&:before {
display: inline-block;
}
}
}
This above code is an example on how to set up such an hover effect.
If the intention is to create a semi-transparent overlay over a background image, then it can be achieved with the following style rule without box-shadow.
background-image: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(255, 255, 255, 0.5)),
url("background.png");
See background-image on MDN.
Two divs are necessary:
1: with the linear gradient + blur:
.gr{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2305a+0,fca832+100 */
background: #f2305a; /* Old browsers */
background: -moz-linear-gradient(left, #f2305a 0%, #fca832 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #f2305a 0%,#fca832 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #f2305a 0%,#fca832 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2305a', endColorstr='#fca832',GradientType=1 );
filter:blur(10px);
height:200px;
}
2: over the other, the content.
.zz {background:#fff; position: relative; top:-200px;
height:200px;
}
Then:
<div class='gr'></div>
<div class='zz'>BOX</div>
DEMO
Unfortunately, this is not possible. I suggest just using a div with a background-image that you create on Photoshop or likewise.
Another way would be to set a White background, and make a shadow (from black to transparent)
Example:
box-shadow: 0 1px 100px 0 rgb(0 0 0 /30%);
You can use <iframe> to achieve gradient effect on elements like videos or images.
HTML:
<iframe width="720" height="515"
<img src="image.png">
</iframe>
CSS:
iframe{
border:none;
background: -webkit-linear-gradient(90deg, rgb(0, 184, 255), rgb(255, 0, 249));
background: linear-gradient(90deg, rgb(0, 184, 255), rgb(255, 0, 249));
z-index:0;
padding:5px;
}
codepen example