I am attempting to have an opacity effect on my div which has a background-image applied, and still keep the text "un-opacified".
My markup:
<div id="projects" class="feature">
Projects
</div>
My CSS:
.feature {
display: inline-block;
margin: 30px;
cursor: pointer;
width: 300px;
height: 300px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
font-family: 'Droid Sans', Helvetica Neue, sans-serif;
font-size: 2em;
color: #fff;
text-align: center;
line-height: 1.2em;
}
.feature:after {
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.8);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
.feature#projects {
background-image: url('img/hero.png');
}
I thought of using pseudo elements, but to no avail!
Any ideas?
I might use a semi-transparent png for the background image, then style the text accordingly.
You might also want to look into RGBa:
http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
This applies to background-color, although it may also work on your image (untested, though)
There is sort of a hack for it where you layout the div with the background underneath another div containing the text.
Check out the following link:
http://www.sumobaby.net/news/2011/03/04/change-background-opacity-without-affecting-text/
Also here's a quick working example:
http://jsfiddle.net/7pVGM/
Note: the markup and css isn't that great I just wrote it in like 5 min :)
Related
I am working on a new button styles and currently facing a challenge: my <button> CSS :hover selector is not behaving as expected.
All attempts to making it work have proven futile.
How can I possibly achieve that effectively?
Below is my code:
.button_depression {
background: url(http://67.media.tumblr.com/tumblr_m9atx55D6F1qd1e6no1_400.gif)
no-repeat;
border: 0;
color: #ffffff;
padding: 5px 35px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
font-family: Times New Roman;
transition-duration: 0.5s;
}
.button_depression:hover {
background-color: #959595;
}
Simply use background for your hover; not background-color as illustrated in the snippet below:
.button_depression:hover {
background: #959595;
}
Brief summary:
background CSS property is a shorthand to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.
When working without the shorthand, the background-image property supersedes background-color and as such, setting background-color alone without abnegating it (background-image) will result in its precedence.
In other words, background-image: none; in combination with background-color: #959595; will work. (Refer to snippet below)
.button_depression:hover {
background-color: #959595;
background-image: none;
}
(background-image: unset; works well too, but can't tell if supported by all browsers)
Note that you can be achieved the same, using the background shorthand, simply as above, with background: #959595; (which I prefer: simple, less verbose, same result).
More details here ....
You can't see the button hover changing the background color due to the background image. You can set the button image to None on hover and then change the color. This might be what you want. Alternatively you can just set background to the background color you wanted. Your preference how you want to acomplish this.
.button_depression {
background: url(http://67.media.tumblr.com/tumblr_m9atx55D6F1qd1e6no1_400.gif) no-repeat;
border: 0px;
color: #ffffff;
padding: 5px 35px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
font-family: Times New Roman;
transition-duration: 0.5s;
}
.button_depression:hover {
background: None;
background-color: #959595;
}
I have two boxes that when you hover over, the background opacity should change, but the foreground text opacity should not change. I know the solution to this is on hover, set the rgba to the background color and add the opacity. Example:
#join:hover {
rgba(0, 102, 255, .4)
}
However, the thing is that in jquery the background of each of the boxes change when clicked on, so using a solid and specific color is not an option. I'd like to use just opacity: .4 so that the opacity is the same regardless of the background color of each box.
When I use opacity on hover, the opacity of the text in each box changes as well. To get around this, I tried using z-index/position: relative and setting the text (#join-text, #learn-text) to a higher z-index and the background (#join, #learn) to a lesser z-index. This did not render the correct results.
I also tried using pseudo class ::before like #join:hover::before but that also did not render the correct results, the position:absolute changed the position of the buttons.
Is there any way to change the opacity on hover ONLY for the background, using the opacity: .4 property? Any input would be greatly appreciated.
Find code here: https://jsfiddle.net/Lsqjwu15/1/
You can use CSS3 :before selector
#join:before {
background: #0066ff;
}
#learn:before {
background: #ffb31a;
}
.rectangle:before {
content: "";
width: inherit;
height: inherit;
position: absolute;
}
.rectangle:hover:before {
opacity: .4;
}
JSFiddle
You could make a workaround with pseudo elements (changed the "join" box):
.rectangle {
position:relative;
height: 200px;
width: 80px;
border: 1px solid transparent;
}
#join:before {
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background: #0066ff;
}
#learn {
background: #ffb31a;
}
#join:hover:before,
#learn:hover {
opacity: .4;
}
.vertical {
text-align: center;
color: #000000;
font-size: 30px;
font-weight: bold;
white-space: nowrap;
transform: rotate(-90deg);
}
#join-text {
margin-top: 110px;
}
#learn-text {
margin-top: 125px;
}
<div class="rectangle" id="join">
<div class="vertical" id="join-text">
Join Here
</div>
</div>
<div class="rectangle" id="learn">
<div class="vertical" id="learn-text">
Learn More
</div>
</div>
Could you make the text "rgba(0,0,0,1) !important" to override the background opacity? would that still fade with the background?
However, the thing is that in jquery the background of each of the boxes change when clicked on, so using a solid and specific color is not an option.
You haven't specified HOW the background colors are changed or what they are initially but using RGBA Colors throughout seems simple enough. JQ is perfectly capable of handing RGBA.
.rectangle {
height: 200px;
width: 80px;
border: 1px solid transparent;
}
#join {
background: rgba(0, 102, 255, 1)
}
#learn {
background: rgba(255, 179, 26, 1)
}
#join:hover {
background: rgba(0, 102, 255, .4)
}
#learn:hover {
background: rgba(255, 179, 26, .4)
}
.vertical {
text-align: center;
color: #000000;
font-size: 30px;
font-weight: bold;
white-space: nowrap;
transform: rotate(-90deg);
}
#join-text {
margin-top: 110px;
}
#learn-text {
margin-top: 125px;
}
<div class="rectangle" id="join">
<div class="vertical" id="join-text">
Join Here
</div>
</div>
<div class="rectangle" id="learn">
<div class="vertical" id="learn-text">
Learn More
</div>
</div>
If there is something else you haven't told us then if you want a solution to your code, you're going to have to reproduce the exact issue including the JS/JQ
I have an issue with IE9 and css. It looks like IE9 doesn't accept the padding definition of the two elements p and a. The background color shrinked and is only in the upper left corner of the elements. The following css works fine in firefox though:
<div class="slider">
<p class="claim orange">Some Text</p>
<a class="claim blue" href="">Some Link</a>
</div>
<style type="text/css">
.slider p {
position: absolute;
top: -200px;
z-index: 8000;
padding: 0.5% 2%;
line-height: 100%;
color: #fff;
white-space: nowrap;
text-transform: uppercase;
}
.claim {
line-height: 100%;
font-size: 18px;
}
.orange { background: #EF7D00 }
.blue {
color: white;
font-weight: bold;
padding: 10px 15px;
border-color: white;
}
.blue:hover {
color: white;
font-weight: bold;
padding: 10px 15px;
background: #2e6da4;
border-color: #2e6da4;
text-decoration: none;
}
</style>
What might be the issue and how can I get the background color work in IE9 in this case?
Your code as-is doesn't seem to display a working page, at least for me in Chrome or Firefox. The p element containing "some text" is displaying with top: -200px, off the page to the top, and the background is white so I can't see anything until I mouseover the link.
Did you forget to include some key lines in your code? Try pasting everything into a text file and testing it out, before uploading it in a question, or it's going to be hard for us to help you.
It's not clear to me what you're trying to do here!
I have the following CSS:
.top-category-item {
height: 338px;
background-color: black;
position: relative;
}
.top-category-item-copy {
width: 100%;
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.8 opacity */
background: rgba(0, 0, 0, 0.8);
bottom: 0px;
position: absolute;
padding-left: 5px;
padding-right: 15px;
padding-top: 2px;
padding-bottom: 4px;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
font-family: Georgia, Times New Roman, serif;
font-size: 35px;
line-height: 36px;
font-weight: bold;
color: #F1F1F1;
}
.top-category-item-copy a {
text-decoration: none;
}
And this is my HTML:
<a href="">
<div class="top-category-item low-gutter">
<img src="images/feature-placeholder.jpg" alt="latest-image-placeholder"/ width=100% height=100%>
<div class="top-category-item-copy">Earlier French Quarter curfew for youths gets mixed reaction.</div>
</div>
</a>
I've searched Stack Overflow for solutions to this problem:
Tried swapping the syntax around a little e.g. .class-name a:link {text-decoration: none;}
Tried declaring a global a {text-decoration: none;}, this works but it feels like a workaround, not a real solution
In your HTML, top-category-item-copy is a div, with an a as the parent. Your CSS is saying "No text decorations for all a tags within .top-category-item-copy."
I usually do this oldschool move when i want the behavior of links to be different from the text is uses
.top-category-item-copy:link { text-decoration: none; }
hope this helps
For the benefit of those who might still encounter this problem, i had this same issue where the a tag was parent to my custom div tag. I didnt want the whole anchor tags in my website to be altered so i had to use the parent div class for the block of anchor tags where i was altering. The arrangement would look something like this when viewed in html:
<div class="parent-div-class-for-this-block-containing-anchor-tags" "bla" "bla" "bla">
<maybe-other-div-classes-and-ids>
<a href="my-anchor-tag-which-i-want-to-alter" class="whatever">
<div class="my-custom-div-class-which-refuses-to-alter-this-ahref-tag-above">
So my solution in the css was to use the parent div class, something like this:
.parent-div-class-for-this-block-containing-anchor-tags a {
text decoration: none;
}
instead of
.my-custom-div-class-which-refuses-to-alter-this-ahref-tag-above a {
text-decoration: none;
}
This will alter the text-decoration of all anchor tags in this block, rather than try to use the anchor tags of the single anchor tags which is overridden by the "whatever" class. Hope this helps someone.
Is it possible to get cut out text effect like this using CSS/CSS3 only? or image is the only option to get this effect.
This should work:
Here's a little trick I discovered using the :before and :after pseudo-elements:
http://dabblet.com/gist/1609945
text-shadow is your friend. See this page for lots of examples what you can achieve with it. Example #8 looks promising.
I found this
http://jsfiddle.net/NeqCC/
It supports white background and dark text
All credit goes to the creator
HTML
<!--
CSS3 inset text-shadow trick
Written down by Jyri Tuulos
http://about.me/jyrituulos
Effect originally found at http://timharford.com/
All credits for originality go to Finalised Design (http://finalisedesign.com/)
Note that this trick only works for darker text on solid light background.
-->
<h1 class="inset-text">Inset text-shadow trick</h1>
CSS
body {
/* This has to be same as the text-shadows below */
background: #def;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 6em;
line-height: 1em;
}
.inset-text {
/* Shadows are visible under slightly transparent text color */
color: rgba(10,60,150, 0.8);
text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}
/* Don't show shadows when selecting text */
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }
What you really need for that particular effect is inset:
text-shadow: inset #000 0 0 0.10em; /* THIS DOESN'T WORK */
Unfortunately: "<shadow> is the same as defined for the ‘box-shadow’ property except that the ‘inset’ keyword is not allowed."
You can use the text-shadow style to set a shadow for the top left corner. It will look close to what you are looking for, but as far as I know there is no way to do exactly what you are looking for in CSS/CSS3
Yes you can achieve this effect with CSS and text, but it's a little insane. Basically you create a bunch of grey-zero css3 radial and linear gradients with a zero opacity and carefully position them over your text. But you'd be better off doing this in photoshop.
A slightly softer way of using the pseudo-elements Web_Designer mentioned:
.depth {
display: block;
padding: 50px;
color: black;
font: bold 7em Arial, sans-serif;
position: relative;
}
.depth:after {
text-shadow: rgba(255,255,255,0.2) 0px 0px 1.5px;
content: attr(title);
padding: 50px;
color: transparent;
position: absolute;
top: 1px;
left: 1px;
}
It's a bit simpler - to get the soft rim of the depression you use the text-shadow of the :after pseudo and make it transparent, rather than using two pseudos. To my mind, it looks a lot cleaner too - it can work at much greater sizes. I've no idea how fast it is, though you'll probably be using text-shadow sparingly anyway.