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";
}
Related
I have been testing Disqus and noticed I can hardly see the comments I have entered. They seem to be in a white/pale grey font.
Is there any way to change the font color to black
here is the link
http://w3code.in/2015/10/send-private-message-using-facebook-api/
I added this snippet to the main css file to fix it for good:
#dsq-content #dsq-comments .dsq-comment-body {
color: #fff;
background-color: #ffffff;
}
Adjust the color values to your preference.
But for Chrome, the issue might be the order of execution. Javascript is executed after the CSS, which may be overwriting your customization. You'll have to change styles using javascript and then put it after disqus script.
it's really easy to do:
#disqus_thread {
background: red;
}
You can use elements' inspector to find classes and ids. Have fun!
I can't find any info on this issue in Google, because every result is about the default purple a:visited color. That is NOT the issue here. The issue is with Chrome's default anti-aliasing, on some systems blue text shows up as blueish-purple. If I change the anti-aliasing to -webkit-font-smoothing: antialiased it keeps the correct color, but then the fonts are radically different between Chrome and Firefox. The blue color I'm using is the client's color, so it cannot change to purple like this. I'm hoping somebody has a fix for this.
Here are screenshots from tests I've done:
EDIT: Just to clarify, this has nothing to do with the default a:visited link color. My blue color is being inherited, but Chrome's anti-aliasing is causing the text to appear purple. Here's an example: http://jsfiddle.net/yvjjxfqt/
It gets solved (at least in my system) setting a transform in the element
a {
color: #1967b1;
display: block;
}
a:nth-child(2) {
transform: rotateX(0deg);
}
This is a link
This is a link
I guess that the rendering in the gpu doesn't have this problem
This is how it looks in my system
Another way to solve it seems to be using opacity
a {
color: #1967b1;
opacity: 0.99;
}
This is a link
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
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!
So, I have this animation that I want to run in the background of my website.
http://www.theartificialasylum.com/index3.html
I want to layer some divs over that animation containing images and texts etc. I have tried using z-index in the CSS file and different variations of uses of opacity to no avail.
Can anyone see where I am going wrong? this is the best I seem to be able to achieve: http://www.theartificialasylum.com/adex.html
Using Chrome's developer tools, I added some text to the 102 div, gave it a class of "lawl", and used only this stylesheet and was able to accomplish what it sounds like you wanted:
body{
background-color: #000000;
color: #fff;
}
#flashContent {
position:absolute;
top: 0;
left: 0;
}
.lawl {
background: #023;
opacity: .5;
}
I'm not sure what the problem was. Maybe it's your strict doctype. (I only use transitional myself.) Maybe it's because you were applying too many things to the html tag.
I do recommend cleaning up your code a bit, using more semantic IDs, putting test text in your divs, and paring it down so that you only test a few variables/lines of code at a time to achieve what you want.
Also, saving damn IE opacity fixes for last until after you have everything else done.