is there a way in CSS to get the initial parameter of something, without using javascript, for example:
width: calc(initial-20px);
if so, ho can i retrieve the value of specific parameters, like width.initial?
SCENARIO
It's a visual studio web browser, (it doesn't support css3 by default), i whant an element to look like highlited, but i can only do it through html attributes(i wanna go the easy way). So i could just style="background-color: yellow !important;", but what if background is already yellow? So i decided that calculating the highlight color would fix be awesome ( as i know now it is impossible through css ) background-color: rgb(initial,calc(initial-50),initial) !important; something like that. So this is a scenario. Suggestions are apreciated.
Simply put, no it is not possible to do this with css. You also can't perform calculations like that. You can only do calculations for percentages, like Mooseman said (edit: Mooseman deleted his answer. It mentioned that you can use width: calc(100% - 40px); for example, but you can't use initial like that). for either of those things you would need to use JavaScript.
Edit: Another option for modifying width could be a margin, although that doesn't necessarily do exactly what you want. For highlighting, you could use something like this:
p {
background-color: #FFFF00;
}
p:hover {
background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));
}
<p>Example paragraph with background</p>
This way you overlay a translucent white layer on top of your background-color, making it a bit lighter. That way you can change the background colour without having to know what the original background was.
i think you can Use LESS.
You Can See Here:
http://www.ibm.com/developerworks/opensource/library/wa-less/index.html
Related
My PSD contains something like this:
As you can see this is a simple background with a text block (color: #ffffff). I've applied a 3% opacity on the text layer like this:
When I try to reproduce this in CSS, the text color is far more darker in the browser and I don't understand why:
Here is the CSS
.a-text {
color: rgba(255, 255, 255, 0.03);
font-size: 200px;
font-family: "Lato Black";
}
This is not a color profile issue or something. As you can see the background color is exactly the same. And this is not a CSS rule conflict. There is something wrong with the transparency that I've maybe misunderstood.
Thanks for your help :)
Your code looks correct and I don't think you've misunderstood anything. Its going to be hard to reproduce fonts and effects/styles placed on the fonts completely perfectly when moving from a graphics tool to code. What you have is a bit close you may just want to bump up the opacity a bit. If you need your graphics to be perfect regarding opacity shades etc I recommend using SVG.
You might try the CSS opacity feature, which in theory should result in the same result as a rgba value — but who knows. I suspect that results vary from browser to OS. Can't test here. I would also opt bumping.
.a-text {
color: white;
opacity: .03;
font-size: 200px;
font-family: "Lato Black";
}
What I'm looking for might be very basic if someone is using bootstrap for a while.
I'm looking for a way to style the body background let say #ebebeb and the container background #fff with a padding of 10px, if you go search something on m.Google.com you will see exactly what I'm talking about.
Somehow I cannot figure out how to do it with Twitter Bootstrap 3.0.2
Could you please edit your question and provide your code? There could be more than one issue causing the problem, and it'll be easier to help you if I can see your code.
If I had to guess, I'd say the easiest way achieve what you want would be something like this:
body {
background: #ebebeb;
}
.container {
background: #fff;
}
Make sure that you're including this CSS after you've included bootstrap.css, otherwise it won't override the default styles set by Bootstrap. Here's a the fiddle that shows this: http://jsfiddle.net/5KwP3/1/
One thing to be aware of however, is that anything that isn't in the container div won't have any padding by default.
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 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.