Designing a web site in which i've used a lot of background:rgba in many places.hence,when i tried to make a lightbox in which i'm using background: rgba(0, 0, 0, 0.6) !important; to make the rest of the screen transparent -- not working as the background from other elements are getting applied (as expected).
Tried to use z-index to implement the lightbox,but failed
I'm bad at explaining,so here's the code
<html>
<style type="text/css">
.element{
height: 200px;
width: 300px;
background: rgba(255,255,255,0.5);
z-index: 1;
border:1px solid black;
position: relative;
margin: 0 auto;}
.black{
position: relative;
background: rgba(0, 0, 0, 0.6) !important;
z-index: 200;}
</style>
<body class="black">
<div class="element">Hello,i have to go to the background
but am not going cos my immediate parent isnt
letting me,even though my grand dad asked me to!!..
</div>
</body>
</html>
As you can c,the div is not in the background but in the foreground.Without the background set within the div -- this can be solved,but the site i'm working on has too many backgrounds to get rid of(so,cant do that)
Please help,
Newbie
If I understand your question, you want a transparent overlay to cover the entire screen underneath the lightbox.
The proper way to do this is to create a full screen floating div to cover the entire screen. The css would look like this.
.overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: rgba(0, 0, 0, 0.6);
z-index: 0;
}
Then add a <div class="overlay"></div>
Related
I wanted to make a cool div, so I made this image to get its borders:
The problem is that half of the borders are transparent area, so when I try to fill the empty center of the div with background-color it also paints the outer, transparent area. I'd like the background color not to get past the border.
Here's what I'm talking about:
#charset "utf-8";
/* CSS Document */
#testDiv{
border-image-source:url(https://s9.postimg.org/40j461sf3/Div_Sprite.png);
border-image-slice: 50% 25% 25%;
border-image-repeat:repeat;
border-image-width:auto;
border-image-repeat:round;
background-color: red;
min-height:600px;
width:600px;
}
#body {
height:100%;
width: 100%;
background: #CCC;
position: absolute;
margin: 50px 0 0 0;
}
<div id="testDiv">
</div>
Or see http://jsfiddle.net/6M59T/119/.
How can I solve this? I've thought on putting a slightly smaller div inside this one, but I don't know how to adjust it so it always covers a bit less than its parent. Also, I'd like to keep it as simple as possible. Any ideas?
Maybe i am mistaken, but you can try to play with border-image-outset and margin attribute.
float:left;
margin:50px 20px;
border-image-source:url(http://s9.postimg.org/40j461sf3/Div_Sprite.png);
border-image-slice: 50% 25% 25%;
border-image-repeat:repeat;
border-image-width:auto;
border-image-repeat:round;
background-color: red;
border-image-outset:30px;
http://jsfiddle.net/6M59T/120/
This is a page that uses a carousel (I believe flexslider). The images in this carrousel are NOT background images. I need to add a gradient to the image, going from the bottom up, and from dark to zero opacity, so that I can make the text more legible. Is this possible?
http://hungersolutionsny.magadev.net
Personally I am not a big fan of adding markup just for styling. I would go for a pseudo element :before or :after
The code would look something like this:
HTML
<div class='slideshow-wrapper'>
<img src='http://www.placekitten.com/800/300'/>
<h2 class='title'>Some title</h2>
</div>
CSS
.slideshow-wrapper {
position:relative;
float: left;
}
.title {
position: absolute;
left: 0;
right: 0;
text-align: center;
z-index: 2;
}
.slideshow-wrapper:before {
content: '';
position:absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
z-index: 1;
}
And an example: http://jsfiddle.net/VrGeM/
Overlay the image with an absolutely positioned <div> that's the same size as the slider. Give that <div> the gradient. Ensure that it's above the images but below the text on top of the images.
It's also pretty easy to create a transparent PNG to use rather than a CSS gradient, which will have the advantage of working in older versions of IE.
The way I ususally do this is via an absolutely-positioned DIV which sits on top of the images and contains the text. Then I give that an opacity like so:
background-color: rgba(0, 0, 0, 0.56);
If you want a gradient with opacity, this is a good tool which makes that easy: http://www.colorzilla.com/gradient-editor/
There are a number of ways to tackle this. Mainly targeting the background CSS property. If you're looking to target the text that is overlapping the image you could use something simple like this:
body.front #region-content #flexslider-1 ul.slides .views-field-field-banner-statement {
background-color:rgba(0, 0, 0, 0.5);
}
It doesn't apply a gradient but it does supply a black background with 50% opacity.
I usually don't use a gradient in this way... when faced with this problem in the past I have always used an inset box-shadow on a div wrapped around the image. Something like this...
<div class="img-wrap">
<img src="" />
</div>
And then in CSS apply the box-shadow to a pseudo selector...
.img-wrap {
display: block;
position: relative;
}
.img-wrap:before {
display: block;
content: '';
position: absolute;
width: 100%;
height: 100%;
-webkit-box-shadow: inset 0 -100px 80px 0px rgba(0,0,0,0.4);
}
img {
display: block;
width: 100%;
height: auto;
}
Check out this CodePen if you want to see it live... http://cdpn.io/qGwLe
as a medium of learning I try to replicate some things I see in the Internet. A friend of mine that knows what am I doing, saw a template and asked me to replicate part of it for his web page, I already have most of what I needed from the template, but the thing he liked the most I tried and failed and I am not understanding what is the magic involved in this template...
What I need is to replicate the main sheet transparency and the light effect behind it, the transparency I made was with a black 1x1 png made on the GIMP(I can't buy the Photoshop) I also have a nice pattern like in the template since it is one of the things my friend asked...
this is the effect I want, I tried messing around with shadows, but didn't get what i wanted I ended up deleting the code, now all I have is this:
HTML:
<body>
<div id="box"></div>
<div id="light"></div>
CSS:
#light{
border:solid 0px white;
height:550px;
width:800px;
left:50%;
margin-top:130px;
margin-left:-400px;
z-index:-1000;
position:absolute;
box-shadow: 0px 0px 300px #929292;
border-radius:100px;
background-color:#929292;
opacity:0.4;
}
#box{
background-image:url(../images/shtr.png);
margin:0px auto 0px;
width:1060px;
height:auto;
border:solid 0px white;
}
i don't know if i need to use jquery or javascript, or if that would help in the page performance...
There are some CSS3 things you can do here.
The first thing you need to do is setup the divs with the texture and highlights. The div with the highlight should ideally be a child of the textured div.
HTML:
<div class="wrap">
<div class="transp"></div>
</div>
Next you need to apply the effects and backgrounds to the correct elements:
CSS:
.wrap
{
background: url(http://wallpoper.com/images/00/35/83/02/pattern-patterns_00358302.jpg);
height: 500px;
width: 500px;
}
.transp
{
position: relative;
top: 20px;
left: 30px;
background: rgba(0, 0, 0, .7);
height: 100px;
width: 100px;
box-shadow: 0px 0px 30px #fff;
}
http://jsfiddle.net/7fTAH/
I managed to get it done, i created a new div that casts a shadow, placed it outside of the screen(left:100%;) and the shadow is casted to the center with the color #CECECE the HTML code:
<div id="light"></div>
<div id="box">
( ... content ... )
</div>
in the CSS :
#light{
position: absolute;
background: rgba(0, 0, 0, 0);
height: 800px;
width: 840px;
z-index:-1000;
opacity:0.15;
}
#box{
background-image:url(../images/shtr.png);/*black 50-60% transparent 1x1 image*/
margin:0px auto 0px;
width:1060px;
height:auto;
border:solid 0px white;
}
and to cast the shadow I used a jQuery script, via only css it wasn't working i don't know exactly why... the code:
$(document).ready(function() {
myWidth = window.innerWidth;
myHeight = window.innerHeight;
var A = -myWidth - 49.5*myWidth/60
$("#brilho_grande").css("box-shadow", A+"px 0px 10000px 100px #CECECE");
$("#brilho_grande").css("left", 2*myWidth+"px");
$("#brilho_grande").css("top", "339px");
});
Have a client request for irregular corners in CSS. Is that even a thing? So far I had experimented with CSS triangles ( http://css-tricks.com/snippets/css/css-triangle/ ) but no bueno.
https://dl.dropbox.com/u/4031469/irreg.png
Thinking I'll probably have to do it with images sadly... unless y'alls know of any way to pull it off.
The main parameters: Needs to be at least flexible in height, preferably flexible in width too, but not required. Current solution: Top capper that extends potentially above the box enough to make the corner effect work on the secondary box... with the lower descender pieces right absolutely aligned pushing below.
My closest attempt so far (uses image for top): https://dl.dropbox.com/u/4031469/fs.html
Stealing from http://nicolasgallagher.com/pure-css-speech-bubbles/
http://jsfiddle.net/aBYHX/
EDIT :- Second attempt. Simpler, less css and on the same side as your example pic.
http://jsfiddle.net/aBYHX/1/
<div class="content">
<p class="triangle-isosceles">This only needs one HTML element.</p>
<p class="irregular-corner"> ---- </p>
</div>
Css:
.content
{
padding: 15px;
}
.triangle-isosceles, .irregular-corner
{
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c;
}
.triangle-isosceles:after {
content:"";
position:absolute;
bottom: 0;
right: 0;
border-width: 25px 50px 0 0;
border-style: solid;
border-color: transparent white;
/* reduce the damage in FF3.0 */
display:block;
}
.irregular-corner:before
{
content:"";
position:absolute;
top: -25px;
right: 0px;
border-width: 25px 50px 0 0;
border-style:solid;
border-color:transparent #f3961c;
/* reduce the damage in FF3.0 */
display:block;
}
Under CSS3, as far as I've researched, the particulars of this look make it not yet possible.
This look has a subtle gradient and inner glow, which we've accomplished using an inset box shadow... that seems to not work with the prior css triangle effects.
CSS Masks look like they might be able to assist in many circumstances, but in circumstances requiring box-shadow: inset, images are the only way to go.
Today I got this working using the -webkit-clip-path property, which has varying browser support.
.entry{
background-color: blue;
width: 500px;
height: 200px;
-webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 40%, 100% 100%, 0 100%);
-webkit-transform: translateY(-30px);
top: 10px;
left: 0;
}
body{
background-color: green;
}
http://codepen.io/randallb/pen/tmlAH
Nora Brown wrote a lovely article on the CSS3 border-image property. It's worth a quick read...
If you're worried about cross-browser support (and you should be), then offer a graceful fallback. Perhaps just having a border with no "crazy corners" would do as a fallback situation, perhaps not.
This method isn't cross-browser, but some find it nice to be "progressive".
I have two divs, both with 0.6 opacity. I need them to overlap but retain their opacity and not create a new combined opacity level. I can't use an image.
EDIT -- The little circle is supposed to have a canvas element in it. Not sure if pseudo-elements would be the best solution.
Is there anyway to do this with CSS, or should I just use canvas?
example -
http://dabblet.com/gist/1566209
HTML:
<div id="foo">
<div id="bar">
</div>
</div>
CSS:
/**
* Double Opacity
*/
body{background:green;}
#foo{
height:150px;
width:250px;
background:rgba(0, 0, 0, 0.6);
position:absolute;
left:40%;
top:20%;
}
#bar{
height:40px;
width:40px;
background:rgba(0, 0, 0, 0.6);
border-radius:40px;
position:absolute;
top:-15px;
left:-15px;
}
SUMMARY:
Depending on what is needed it can be tricky but the basic approach is pretty straight forward.
This approach is a little different from my first thought... but this has the same result.
I made a black/transparent pattern for the circle and set it to
:before.
The circle is then transformed rotate(180deg) and moved to fit on
the corner of the <div>.
Then I set the opacity of that circle to 0.6.
The <div> itself is not affected by the opacity.
Next I added the :after element and put an image as background
(you can control this via js if needed)
I added some effects to the image (border-radius, box-shadow,
border) to show how easily and independent this element can be
controlled.
I used a lighter background and set the opacity to 0.3 to show
the result
HERE'S THE FIDDLE: http://jsfiddle.net/pixelass/nPjQh/4/
Look at this version for some crazy results: http://jsfiddle.net/pixelass/nPjQh/5/
each of these examples only use a single div element
Basic rules. (these rules "could" be used to create a dynamic behavior with js)
position = absolute;
top = circleHeight / -2;
left = circleHeight / -2; //(left = top)
rotation = 180deg;
opacity = valueAofBackground;
bgColor = valueRGBofBackground;
#inner {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(0, 0, 0, 0.3);
padding:20px;
border-radius: 20px;
border-top-left-radius: 0;
}
#inner:before {
content: "";
background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
-webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
height: 40px;
width: 40px;
border-radius: 40px;
position: absolute;
top: -20px;
left: -20px;
-webkit-transform: rotateZ(180deg);
opacity:0.3;
}
#inner:after {
content: "";
background: url('http://lorempixel.com/10/10/sports/1/') no-repeat;
background-position:0;
height: 10px;
width: 10px;
border-radius: 10px;
position: absolute;
top: -6px;
left: -6px;
-webkit-box-shadow: 0 0 10px rgb(255,255,255);
border: 1px rgb(255,255,255) solid;
}
Better explanaition
Original commented version
http://jsfiddle.net/pixelass/nPjQh/10/
see the comments in the code below
#inner {
background: rgba(0,0,0,0.5) /*this is the full color-code of the div (with alpha)*/
}
#inner:before {
/*the solid color of the circle = rgbValue of the div*/
background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
-webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
/*opacity of the circle = alpha of the div*/
opacity: 0.5;
}
This example has a full transparent div ...the circle is a "pacman"- shape: http://jsfiddle.net/pixelass/nPjQh/14/
Managing the offset of the circle
Look at these examples that handle the offset of the circle (NOT USING PSEUDEO-ELEMENTS)
1:1 copy of the OP's code (15px offset): http://jsfiddle.net/pixelass/nPjQh/12/
With a lot smaller offset (5px): http://jsfiddle.net/pixelass/nPjQh/13/
(the content has the same opacity as the circle)
How does the offset work?
Control the background-size vs. the top and left
Rules:
top = left;
background-size = elementHeight * 2 + top * 2;
Look at the flower (it is also only one <div> with pseudo-elements)
the background-size is bigger than the circle. which creates the green leaves on the bottom
http://jsfiddle.net/pixelass/nPjQh/15/
CURRENT PROBLEM
See this fiddle: http://jsfiddle.net/pixelass/nPjQh/16/
If not using another layer as seen in the examples at the top of the post the content will be transparent. So if you only need an image inside the circle the above examples will work fine.
HOW TO SOLVE THIS ISSUE
If you need a canvas or another div inside the circle you would have to put the circle on the div and layer the needed div over the circle
See this fiddle: http://jsfiddle.net/pixelass/nPjQh/17/
change around a little and it will work fine. GET THE CODE FROM THE FIDDLE
Different shape /advanced Styling
If you use a different shape with flat sides, you could even put a border around the sum of the two divs.. or even add a box shadow
still using the simple markup of....
<div id="foo">
<div id="bar">
</div>
</div>
See the fiddle for the box-shadow: http://jsfiddle.net/pixelass/nPjQh/21/
Apply a border to the circle
Using -webkit-mask-image we could add a border to the circle.
http://jsfiddle.net/pixelass/nPjQh/24/
More examples:
Four circles around the div
http://jsfiddle.net/pixelass/nPjQh/25/
Markup:
<div id="foo">
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
<div id="bar4"></div>
</div>
Using this technique to make a tooltip
http://jsfiddle.net/pixelass/nPjQh/31/
Markup:
<div id="foo">
<div id="bar"></div>
I am a pure css tooltip with a semi-transparent background and a black border. <br/>
My width is static an my height is dynamic...
</div>
I think the only way would be to do the opacity separately,
e.g.
http://dabblet.com/gist/1566278
How about this: http://jsfiddle.net/rudiedirkx/TqRCw/
(Dabble's editor sucks!!)
It can't be done with only pseudo elements sadly =(
It can be done with only pseudo elements! See pixelass' answer. CSS3 is a requirement though.
Revised Answer
This fiddle is compatible with IE9 and resolves the duplication of background needed in my original answer. It does use pseudoelements to generate the circle. This solution spins off pixelass's "pacman" idea, only instead of using the newer background gradient css to generate, it uses the older (and little used or understood) clip property to make the circle in two parts. This solved the issue of your circle not being "centered" at the corner.
#foo {
height:150px;
width:250px;
background: rgba(0, 0, 0, 0.6);
position:absolute;
left:40%;
top:20%;
}
#bar {
height:40px;
width:40px;
position:absolute;
top:-15px;
left:-15px;
line-height: 40px;
}
#bar:before,
#bar:after {
content: '';
display: block;
background: rgba(0, 0, 0, 0.6);
border-radius: 40px;
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
#bar:before {
clip: rect(0 40px 15px 0);
}
#bar:after {
clip: rect(15px 15px 40px 0);
}
Original Answer
You can do this (see fiddle). It pushes the circle below and "overlays" the portion that overlaps with a pseudoelement to reestablish the background color of the body:
body{background:green;}
#foo{
height:150px;
width:250px;
background:rgba(0, 0, 0, 0.6);
position:absolute;
left:40%;
top:20%;
}
#bar{
height:40px;
width:40px;
background:rgba(0, 0, 0, 0.6);
border-radius:40px;
position:absolute;
top:-15px;
left:-15px;
z-index: -1;
}
#bar:after {
content: '';
display: block;
background: green;
position: absolute;
right: 0;
bottom: 0;
width: 25px;
height: 25px;
}
I have created a Q/A to handle this scenario along with the 'hover' of such overlapped elements.
Overlapped elements with opacity and handling the 'hover' on those.
The solution is basically to set the opacity in the parent level instead directly on the children elements and to toggle those while hover, with JS.
HTML
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
</div>
JS
$(".first, .second").hover(function() {
$(".wrapper, .first, .second").not(this).toggleClass("add-opacity");
});
CODEPEN
Hope this helps.