I've got two divs, the outer and the inner div. I have a background image and the outer div has an opacity set however i just cannot seem to get the inner div to not inherit the opacity of outer div. i would like the inner div to be a solid colour.
my code is below and a jsfiddle here: http://jsfiddle.net/3TK3U/
<style type="text/css">
body
{
background-image:url('http://media-bubble.info/images/layout/background.png');
}
.outsideBox {
width:70%;
height:200px;
background-color: #ffffff;
opacity:0.7;
filter:alpha(opacity=70);
text-align:center;
}
.insideBox {
width:40%;
height:80px;
background-color: #999;
z-index:999999;
}
</style>
<div id="Introduction" class="outsideBox">
<div id="Introduction" class="insideBox">This is the inside box which should not inherit transparancy</div>
</div>
Try using
background-color: rgba(255,255,255,0.7);
with no opacity or filter that should make the background transparent but not effect the contents of the element.
This is an old question but still comes up in a search so an update to highlight that you can also set the opacity with hex colour values too (not sure when this was introduced or how far back compatibility is across browsers).
For example if you have a background colour like this:
background-color: #5D5C61;
you can set the opacity by adding two hex digits to the end:
background-color: #5D5C61F5;
The range is 00 (fully transparent) to (FF).
It avoids having to convert to RGB if you don't want to in your page or app.
.outsidebox {
//Add your other properties as needed
background-color: #5D5C61F5;
}
.insidebox {
//No opactity needed here if you don't
//want it transparent.
//Add your other properties as needed
background-color: #1F2833;
}
Related
Demonstration Link: https://codepen.io/jodriscoll/pen/wRpQOw
I'm working on a "sidewards blind-like" animation behavior, where when a user hovers over an object (anchor), it expands the object (anchor) in width and creates a perception of showing more of the objects contain within (think of a clipping mask of sorts).
Initially the video/image object is styled in a way to prevent it from moving 1:1 with the "clipping mask" (anchor wrapping the video/image). Meaning, it is already offset to the position it should be when the user hovers over the anchor.
Both the image and the video are initially styled to fill the entirety of the anchor AND the gutter gaps; this helps when animating to create the perception that we're just showing more of the photo, no actually resizing it and causing it to move on screen (sorry, that might be confusing...):
left: -24px; // the width of each gutter gap
width: calc(100% + 48px); // fill the parent + fill the gutter gaps
When the user hovers over the anchor, the child elements change their CSS specs to:
left: 0; // stay flush with the anchor object
width: 100%; // fill the parent, which now includes the gutter gap(s)
Everything appears to work correctly when viewing the animation behaviors on Chrome / Safari / Firefox:
http://svg-gmmb-cis.pantheonsite.io/wp-content/uploads/2019/01/debugging_animations.mp4
Unfortunately, there is a slight hiccup on IE11/Edge:
http://svg-gmmb-cis.pantheonsite.io/wp-content/uploads/2019/01/IE_animation_bug.mp4
Questions and hopeful helpful insight towards reaching an answer:
After viewing the animation glitch, does IE11/Edge have issues with animating CSS measures using calc()?
Do I need to create a CSS animation with keyframes to remedy this hiccup in IE11/Edge?
Am I approaching this wrong and should be animating different properties?
You can do this easily with margin and avoid the use of calc.
Here is a simplified example:
.container {
border:1px solid;
padding: 0 24px;
height:100px;
}
.box {
height:100%;
background:red;
transition:.5s all;
}
.box:hover {
margin:0 -24px;
}
<div class="container">
<div class="box"></div>
</div>
Or like this:
.container {
border:1px solid;
margin: 0 24px;
height:100px;
}
.box {
height:100%;
background:red;
transition:.5s all;
}
.box:hover {
margin:0 -24px;
}
<div class="container">
<div class="box"></div>
</div>
I'm using css3 PIE in order to create circle through border-radius(in IE8). It is working fine normally.
but when i'm trying to change the background color of circle, that element is turning into square.
my code looks like this.
.menuIco {
width:16px;
height:16px;
border-radius:8px;
position:relative;
z-index:101;
background-color:#38B6E7;
}
.active .menuIco {
background-color:#F1F1F1;
}
my html looks like this..
<div> <!-- i am adding .active class to this div using jquery -->
<div class="menuIco"> </div>
</div>
when i add active class to parent div(using Jquery dynamically) the menuIco (circle) should change its color. But the border-radius property is collapsing.
can anyone help me how to fix this!
Thanks in advance.
Set your border-radius to 100%.
Here's a LIVE DEMO for you to see.
.menuIco {
width:100px;
height:100px;
border-radius:100%;
position:relative;
z-index:101;
background-color:#38B6E7;
}
I have made the width and height to 100px so as to show it on a larger scale. (this can be resized as necessary)
EDIT
Depending on your browser, you should look to include the other prefixes, is shown in this fiddle
the border radius is defined by:
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
I am trying to create a transparent border for my image and place it over the image using CSS.
For example please see the image below:
To achieve this I tried the following code but I am facing the following problems:
The border is not over the image; its around the image and not allowing the image to fit 100% inside the parent div
To Make the border transparent I used "opacity" but its making the image transparent too which I don't want.
You can check the code live here: http://jsfiddle.net/6GK45/
I could create a div and made the border color transparent and then place it over the image but the problem is the width of my image is fixed (277px) but the height is not. So this will not work for me.
Could you please tell me how to create the transparent image border and place it over the image just like in the image above.?
HTML:
<div class="box" >
<img class="lightbox" src="myimage.jpg" />
This is text
</div>
CSS
.box {
width:277px;
background:#FCFBDF;
}
.lightbox {
border: 5px solid red;
z-index:999;
opacity:0.3;
}
img {
width:277px;
}
How's this - it uses :after to create a pseudo-element which places the border on top of the image, not outside it. http://jsfiddle.net/6GK45/8/
.imgWrap:after{
content:"";
position:absolute;
top:0; bottom:0; left:0; right:0;
opacity:0.5;
border:5px solid red;
}
UPDATE: If it's important to preserve the ability to right-click on the image, you can do it like this with an additional wrapper: http://jsfiddle.net/6GK45/24/
For anyone still googling for this: It is possible to achieve this effect with CSS only by using the outline property:
img {
outline: 15px solid rgba(255, 0, 0, .75);
outline-offset: -15px;
}
<img src="http://i.dailymail.co.uk/i/pix/2012/12/04/article-2242647-0F79C42300000578-201_634x429.jpg" width=250 />
As Donovan said, rgba for the border-color – but the border on an element containing the image, and then the image “pulled” outwards under the border using a negative margin and z-index – like this, http://jsfiddle.net/6GK45/7/
<div class="box" >
<span class="lightbox"><img …></span>
…
</div>
.lightbox{
display:block;
width:267px;
border:5px solid rgba(255,255,255,.75);
}
.lightbox img{
display:block;
width:277px;
margin:-5px;
position:relative;
z-index:-1;
}
If you want a border with opacity, you can use RGBA code. The 'A' signify alpha, so you can modify opacity.
border: 5px solid rgba(255,0,0, 0.3) ;
You can use z-index to put your box with border above your image if you put image and box in position absolute, relative.
I updated your fiddle. http://jsfiddle.net/6GK45/21/
What you need to do is set the image as the background of the parent div and then adjust the width/height of the child div to hug the image accordingly.
//make js fiddle work
I have a 'floating' fixed position div which is shown onclick of a label. Within the fixed div is a form button.
Now, because its possible that the div could be shown anywhere on a page, and as a user scrolls the page under it, I give it an opacity of say 0.8. But, I still want the button inside the div at full opacity (1) but its not resetting the button opacity.
Here's the css
#delHolder {
width:280px;
text-align:center;
position:fixed;
background:#fff;
opacity:0.8;
height:60px;
top:150px;
left:50%;
margin-left:-140px;
z-index:2322;
border-radius:8px;
}
#multiDel { position:relative; z-index:232323; opacity:1.0; }
.className { opacity:1.0; }
html is something like:
<div id="delHolder"><input type="submit" class="className" id="multiDel"></div>
How can I only have transparency on holder div?
instead of
opacity:0.8;
background: #fff;
use
background-color: rgba(255, 255, 255, 0.8);
In this way the opacity applied on the parent won't be inherited from children.
Note: rgba() won't work on IE<=8
Is it possible to position a sprite icon as a background of an element?
I have a file, "icons.png" which contains several icons. I want to select one of those as a background of an element.
Usually I would use
.sprite {
background: url('imgs/icons.png') no-repeat 0 -21px;
width: 17px;
height: 10px;
} and use this class for a button, etc...
The problem is I have a text input and I want to modify it's placeholder
.First I did this, which works perfectly if the file I use is the icon itself
:-webkit-input-placeholder{ background: url('singleIcon.jpg') center right no-repeat; }
But now I want to use a file which contains more icons.
Is it possible to use something like this ?
:-webkit-input-placeholder{ background: url('imgs/icons.jpg') center right no-repeat; }
The problem in the last line of code is that it will select all my image (which of course contains all my icons I want to use on the website), I want to select only a part of that image ( the icon I want to use )
Actually, the sprites are used only as background (or you've to set up some kind of complicated cropping).
What you have to do is to set the size of the element to the same sprite's part that you have to show, and the position of the background equal to the x and y coordinates of the icon in the sprite, starting from the top left.
An example taken from this nice article:
"Item 2" is 116x48, begins at 12px (x coord) and 70px (y coord).
So your element's CSS should be:
.element {
width:116px;
height:48px;
background:url(sprites.png) -12px -70px no-repeat;
}
But, what if your element is taller/wider than the above dimensions? Then, you've to isolate that icon with enough transparent/white space so that the other icons won't show up.
If you look up at Facebook sprites, you'll notice that some of them are very long, some others groupped, some others isolated. You've to adapt the sprite for each situation.
Edit: ok, i got your actual needing.
It's not easy with inputs because you can't use pseudo-elements on it. Here comes a workaround.
Demo
First of all, wrap the input inside a div:
<div class="inputWrapper">
<input type="text" placeholder="placeholder text">
</div>
Then add some CSS:
div.inputWrapper {
position:relative; /* that's important */
float:left; /* or display:inline-block; */
}
div.inputWrapper:after {
background:#000 url(sprites.png) 0 -2px no-repeat; /* adjust background position */
content:" "; /* whitespace needed for the pseudo-element to be displayed */
position:absolute;
top:1px; right:2px; /* some room for the borders */
width:16px; /* icon width */
height:18px; /* icon height */
}
div.inputWrapper input {
padding-right:16px; /* so the text won't go behind the icon */
}
I know it's complicated, but the alternative is to create another http-request ... the choice is yours.
Here's a quick n dirty sample. Basically, just set the background-position attribute of the element's CSS.
<!DOCTYPE html>
<html>
<head>
<script>
var curFrame = 0;
var numFrames = 10;
var animTimer;
function advanceFrame()
{
var hero;
curFrame++;
if (curFrame >= numFrames)
curFrame = 0;
hero = document.getElementById("hero");
var posX = curFrame * -64;
curPos = posX+"px 0";
hero.style.backgroundPosition = curPos; //offsets[curFrame];
}
function myInit()
{
animTimer = setInterval(advanceFrame, 200, false);
}
</script>
<style>
#hero
{ /* image is 638x64 pixels - it has 10 sprites in it, horizontally offset */
background-image: url(http://blogs.msdn.com/cfs-file.ashx/__key/CommunityServer-Blogs-Components-WeblogFiles/00-00-00-53-00-metablogapi/5545.image_5F00_13D4E783.png);
display: block;
width: 64px;
height: 64px;
}
</style>
</head>
<body onload='myInit();'>
<div id='hero'></div>
</body>
</html>
It's possible, but some things to note:
The placeholder pseudo-class works inconsistently across browsers, e.g. Firefox on the entire input element, Chrome only on line-height.
The placeholder pseudo-class by default adds a opacity layer on top of the original input box.
Background-images on the placeholder pseudo-class need to be "repeated" if the cropped icon is not the first icon on the sprite image.
The default box-sizing for form elements may be different for the rest of the elements, so borders/paddings may change the calculation of the size of your background-image.
I think it's best to keep your sprite a long vertical list of icons, make your placeholder style opaque, use the border-box box model. Also, the icon height dimension should be exactly the height of the available background space. It is also a good idea to keep the background-* properties separate so what you are doing with the sprites becomes clearer and easier to read.
Assuming you have a list of 4 50x50 icons - i.e. a 50x200 image, you can do the following:
input {
box-sizing: border-box; /* keep box-sizing consistent */
width: 200px;
height: 52px; /* compensate 2px for border */
border: 1px solid black;
background-color: blue;
background-image: url('icons.png');
background-size: 50px 200px;
background-position: right 20px top 0; /* assuming you want the icon to "float" right */
background-repeat: repeat-y;
}
::-webkit-input-placeholder {
background-color: yellow;
background-image: url('icons.png');
background-size: 50px 200px;
background-position: right 20px top 50px; /* use second icon in the sprite */
background-repeat: repeat-y;
opacity: 1; /* don't show the underlying input style */
}
Also remember to apply the styles to ::-moz-placeholder and :-ms-input-placeholder
I might be stating the obvious, but have you tried:
:-webkit-input-placeholder{ background: url('imgs/icons.jpg') no-repeat 0 -21px; width: 17px; height: 10px;
}