I am making a website that uses nothing but jquery-ui for theming.
Well, in my application I need to do alternating colors per row on a list. Right now all of the rows are just the color of .ui-widget-content. Well, I can apply a class on alternating rows with no problem, but I want for the alternating color to be a very transparent version of the background color in .ui-widget-header. How would I do this using nothing but html jquery and CSS? (I'm really hoping to not have to use javascript in order to do this little trick though)
The easiest way to do this is to create a small flat image in Photoshop, Fireworks,GIMP,Kreta etc. and set the color / opacity there. The above solutions will allow for transparency but they are
1) Not standards-compliant and
2) They May cause the text contained in the div to also be transparent (usually an undesirable result in design).
So...
.ui-widget-content-alt {
background: transparent url(images/my_80%transparent_black_bg.png) top left repeat;
}
.ui-widget-content {
background: transparent url(images/my_80%transparent_white_bg.png) top left repeat;
}
Assuming that I didn't misunderstand your question, and that you can use a separate CSS class for alternate rows like .ui-widget-content-alt, you may want to use the following CSS:
.ui-widget-content, .ui-widget-content-alt {
background-color: #000;
}
.ui-widget-content-alt {
filter: alpha(opacity=20);
opacity: 0.2;
}
The opacity property is the CSS standard for opacity values, and works in Firefox, Safari, Chrome and Opera.
The filter property is for IE.
You may want to check the following article for compatibility of the opacity property with older browsers:
CSS Tricks - CSS Transparency Settings for All Browsers
There is no standard way of doing it.
You can use css opacity and fiter to achieve it.
Something like the following would give you 80% black transparent color
.someClass { background-color:#000; -moz-opacity: 0.8; opacity:.80;filter: alpha(opacity=80);}
Using this will cause your CSS to fail compliance checks.
Related
I have a css file that have following css element:
.ms-webpart-chrome {
background-color: white;
}
I want to make it transparent instead of white and same time I want to have this css element like it is beacuse its a global css and some pages are using it.
So I was thinking that I could use inherance it.
This is how it looks in html and this div classes are generated automaticly which means I cant change or do anything.
<div class="ms-searchCenter-main">
<div class="ms-webpart-zone ms-fullWidth">
<div id="MSOZoneCell_WebPartWPQ1" class="s4-wpcell-plain ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth ">
<div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">
So basicly I need to have this one like it is beacuse i dont want to change it or remove it:
.ms-webpart-chrome {
background-color: white;
}
And I need to create a new one and use !important with the inherance.
Any kind of help is appreciated
Note: I tried following:
.ms-searchCenter-main .ms-webpart-chrome
{
background-color: transparent !important;
}
but it didnt work
You can certainly specify a background color to be "transparent," as this is the default value in the CSS specification (see reference page at w3schools.com).
If your goal is to make the background color transparent across all elements with class "ms-webpart-chrome" then try adding more selectors to increase the weight of your new rule:
body div.ms-webpart-chrome {
background-color: transparent !important;
}
Setting "background: none;" is also an option. You could try adding both.
It would be better if your new rule followed the other rule (not directly, just after it in the order). Also, check to see if any of the sub elements are picking up a background.
While IE has developer tools, I strongly recommend Firefox + Firebug + DOM Inspector + Web Developer Toolbar as a standard testing suite. You can easily traverse the DOM to see if any sub elements have backgrounds applied, as well as test different CSS rules live on the page.
You can't specify a background colour to be transparent, as transparent isn't a colour. However, you can achieve it with background: none !important;. Element's don't have background colours by default, so just restore it to the default (none) and it will be transparent.
Look at this demo here. I've set the background to red at the top, but then over-written it with background: none; lower down. This makes it transparent. The red border shows where the element is
I would like to be able to create nice-looking buttons of any color dynamically within a web page, without defining a separate CSS class for each color ahead of time.
Using CSS3 gradients with alpha channels seems like it would be the best way to go about doing this, with low opacity gradients overlayed on top of a solid background color.
However, I don't know enough about CSS to even tell whether or not this is possible, much less actually implement it.
I have found a couple of resources on the web that look like they will help:
CSS3 Gradient Button Guide
Transparency and CSS3 Gradients
Can someone with more CSS experience tell me if this is possible, and perhaps point me towards other resources to make this easier to pull off?
Using something like LESS or SASS, this is fairly easy to do legitimately. Create a mixin like this (robust version):
.auto-gradient(#color) {
/* Use any of the built in functions like saturate() or spin() */
#topcolor: lighten(#color, 20);
#bottomcolor: darken(#color, 20);
background: #color;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#topcolor), to(#bottomcolor));
background: -webkit-linear-gradient(#topcolor, #bottomcolor);
background: -moz-linear-gradient(#topcolor, #bottomcolor);
background: -ms-linear-gradient(#topcolor, #bottomcolor);
background: -o-linear-gradient(#topcolor, #bottomcolor);
background: linear-gradient(#topcolor, #bottomcolor);
/* If using PIE.htc for IE */
-pie-background: linear-gradient(#topcolor, #bottomcolor);
behavior: url(pie.htc);
}
Usage:
.my-button {
.auto-gradient(darkviolet);
}
This will compile to valid CSS(3), it should be something like this:
.my-button {
background:darkviolet;
background:-webkit-gradient(linear,0 0,0 bottom,from(#c43aff),to(#4c006d));
background:-webkit-linear-gradient(#c43aff,#4c006d);
background:-moz-linear-gradient(#c43aff,#4c006d);
background:-ms-linear-gradient(#c43aff,#4c006d);
background:-o-linear-gradient(#c43aff,#4c006d);
background:linear-gradient(#c43aff,#4c006d);
}
Note: I use lessphp myself, and the version I'm using now seems to choke on named colors like DarkViolet being passed to lighten/darken unless they are lowercase.
MrOBrian's suggestion of the Ultimate CSS Gradient Generator made this a snap. Here is the solution I ended up going with, which is a relatively simple CSS style cobbled together from the aforementioned Gradient Generator and the Cross-Browser CSS Gradient Button Guide.
The following code adds a nice, slick button appearance when applied to an element with a background-color CSS attribute specified. This will allow me to use a common style for all of my buttons, specify their color using the background-color attribute.
JSFiddle Demo
Thank you for all of the advice and suggestions!
I have this sample: http://jsfiddle.net/funguy/jKfeQ/
Dont be confused, its something here, but slighly visible. I want to apply the opacity only to the .postmorewrapper1, but not to the .read-more1 .
Any advices on how I can reach this? Thanks!
You can't, you'll need to make them siblings and position them to emulate parent/child.
As said by AlienWebguy, you can't do it with a CSS property like Opacity without affecting the children.
If you really need to change the opacity of a parent without affecting it's children, the best cheat would be to swap the background-image of the parent to a png transparent, this way the children won't be affected and the opacity of the parent would seem changed.
The problem is that the opacity property applies to all child elements. An alternative would be to instead use rgba when specifying the background colour to .postmorewrapper1, as opposed to a hex value. So instead of this:
background: #FCFCFC;
opacity: 0.4;
Try this:
background: rgba(252, 252, 252, 0.4)
One thing to bear in mind with this technique though is that IE versions 8 and below don't support rgba (it was added in v9). There are a couple of options to get around this:
Use an IE filter (which can have an impact on performance if overused)
Use a semi-transparent PNG image for IE versions 8 and under (which is less maintainable)
The CSS for option 1 would be:
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FCFCFC,endColorstr=#66FCFCFC)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FCFCFC,endColorstr=#66FCFCFC); /* IE6 & 7 */
zoom: 1;
You'd put that in your IE stylesheet if you have one.
I think the title is the sum of everything...
I have a sprite image and over it another image (like an image frame). What I want is to move the lower image background to the given coordinates when the mouse hovers over the top image :/
In other words, I can't get the sprite to work while having another image over it.
Can anyone help?
this is direct link to my dev server so you can see:
kp77=mine=nu~pokop
= is ., and ~ is /
For now I have a solution with jquery, but I would like pure CSS only. I can't use inline :hover pseudo class so..
Thanks
Maybe I don't understand the issue, but why not simple
a.fg:hover span:first-child {
background-position: 0px 0px !important;
}
? Here is the working CSS-only example, that, I assume, does what you want to achieve with JS
look here CSS: Animation Using CSS Transforms
somtehing like this
Translated to the right:
a:hover
{
-webkit-transform: translate(3em,0);
}
Firefox and Opera now support these transforms with an identical syntax. Just replace -webkit with -moz and/or -o in the examples and you will see the same effects
I have a problem in IE with PNG8 images in that it appears with a big dirty black border in the shadowing of my *.png. (IE7, IE8)
I am using alphatransparency and basically have shading under my small image. All browsers render this fine, except IE which renders the shading as a black circle?
I need the image "transparent" because it appears on top of a variety of multicolored backgrounds, etc?
Any ideas?
I am compelled to respond. I just solved this issue as well. Just to recap, in IE7 and IE 8, transparent PNG and GIF images in links sometimes have a black border or shadow around them.
You need to check to make sure there is no opacity filters on these images. I have opacity on 100. I changed this to
filter:0;
Remember also for blurry link text, you need to specify a background color for the link or else it will be fuzzy and blurry.
Death to IE!!
I'd like to say thanks for the answer, and to add something.
In my specific instance, I needed to override a style that was:
filter: alpha(opacity=50);
Adding the below code made my opacity correct, but added the issue of the black edges:
filter: alpha(opacity=100);
This is the line that saved me by fixing the issue:
filter: 0;
I hope this helps someone else too!
OK - solved the problem. It seemed that my JS was assigning
filter: alpha(opacity=100);
to the image and this is what was causing the black mark to appear as I had already made the image alphatransparent in the PNG8 encoding.
I have suffered from similar issues with opacity in ie7, ie8 what you can do is give your png image a background color which will remove the ugly borders from the image....It works for me
This worked for me with animated opacities:
img{
background: transparent;
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)”;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
zoom: 1;
}
After searching for alternative solutions, I returned to the source images for answers.
It seems that 24bit .png-files cause problems, but 8bit versions behave well. I haven't researched this in depth.
These settings in Photoshop's Save for Web & Devices -dialog helped me get rid of the black strokes in opacity animations:
PNG-8, Selective, Diffusion, Transparency, Colors: 256, Matte: None, No transparency Dither, Interlaced and Convert to sRGB with "Internet Standard RGB".
You can do it in CSS buy using IE's proprietary filtering system.
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');
DEMO
you will need to use a blank.gif for the 'first' image in your background declaration. This is simply to confuse ie8 and prevent it from using both the filter and the background you have set, and only use the filter. Other browsers support multiple background images and will understand the background declaration and not understand the filter, hence using the background only.
You may also need to play with the sizingMethod in the filter to get it to work the way you want.
I had the same thing happen to a PNG with transparency that was set as the background-image of an <A> element with opacity applied.
The fix was to set the background-color of the <A> element.
So, the following:
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;
Turns into:
/* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */
background-color: #FFFFFF;
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;