I would like to know if there is a way to add transparency to text in forums.
I know of using [color=transparent] but that makes it fully transparent
Is there a proper coding to add transparency like 50% or so?
Example
[color=#FF0000] red [/color]
You can use CSS:
.transparent_text {
color: gray; /* fallback */
color: rgba(0, 0, 0, 0.5);
}
and
<div class="transparent_text">Hello</div>
or
<div style="rgba(0, 0, 0, 0.5);">World</div>
The last value is the transparency (this is semi-transparent-black). 0 for completely transparent, 1 for opaque
Example: http://jsfiddle.net/xUgYP/
Related
I am reading the book: CSS Secrets: Better Solutions to Everyday Web Design Problems. And encountered this part where the color setting css can work for every potential background colors. The css is as follows:
.button {
padding: .3em .8em;
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0, 0%, 100%, .2), transparent);
border-radius: .2em;
box-shadow: 0 .05em .25em rgba(0, 0, 0, .5);
color: white;
text-shadow: 0 -.05em .05em rgba(0, 0, 0, .5);
font-size: 50px;
line-height: 1.5;
width: 2.5em;
}
.greenButton {
background-color: #6b0;
}
.redButton {
background-color: #c00;
}
The Jsfiddle link: https://jsfiddle.net/mr7kwxsm/. This does work. But I don't know how... How does the background color pass as a parameter to hsla and rgba color settings? They seem to be fixed values there. And since transparent is the last variable in linear-gradient. I am not sure how this is working. Can someone please help to explain a little bit?
Not sure what you are asking but I think you want to know how does your element get a color of green and red where you've defined another color using hsla() in gradient which is bluish with a gradient overlay.
So it goes like this. Your .button class holds a shorthand property of background where you specify a linear-gradient which is nothing but a background-image and you also specify a hex of #58a. If you split this shorthand you will read it like
.button {
background-image: linear-gradient(hsla(0, 0%, 100%, .2), transparent);
background-color: #58a;
}
Now further down you declare couple of more classes with their background-color so when you use .button and .greenButton on the same element, browser overrides the background-color of .button with .greenButton and that's how you get different colors using a common .button class and you override them by defining other classes.
.greenButton {
background-color: #6b0; /* Overrides your #58a when you call
this class with .button */
}
Order in your CSS does matter. If you move the declaration
of .greenButton and .redButton above .button, your buttons will
always be of default color which is bluish.
Demo
After you commented, you asked that why your borders adapt the colors, so the thing is that you use rgba(0,0,0,.1) for your border which is equivalent to a hex of #000 with an opacity i.e alpha of 0.1. Now since the your borders are opaque, you can see your background-color being rendered behind that.
Now I can explain you how borders work but I think it's not in the scope of this question.
The class .button makes use of the property background to set various properties (colour and transparent gradient). In the classes for .greenButton and .redButton you only overwrite the background-color element. Therefore, all properties that are not part of the background-color element remain intact.
Below is some css that is used to create a radial gradient pattern.
My question: Is it possible to add opacity to the colors giving them a ghost like effect? Can one use RGBa instead of Purple??
I tried the above but couldn't get it to work as expected
/* Note the RADIAL */
background: repeating-radial-gradient(
circle,
purple,
purple 10px,
#4b026f 10px,
#4b026f 20px
);
Many thanks,
P
You can use RGBa values within repeating radial gradients but you need to make sure that both the start point and end point are set.
Try changing the background colour in .bg and see the gradient colours change.
.bg {
background: red;
height: 500px;
width: 500px;
}
.gradient {
width: 500px;
height: 500px;
background: repeating-radial-gradient(circle, rgba(128,0,128, 0.5), rgba(128,0,128, 0.5) 10px, rgba(75, 2, 111, 0.5) 10px, rgba(75, 2, 111, 0.5) 20px);
}
<div class="bg">
<div class="gradient"></div>
</div>
The following lines can also be used to enable opacity for a div. You can use it in most cases.
.div_element{
opacity : 0.9; /*Value can be changed to increase or decrease opacity level*/
filter : alpha(opacity=90);
}
I have 2 .png pictures with a transparent background.
I would like to add them to my page, at the moment I use
<div class="thumbnail">
<img src="foo.png">
</div>
but when I open the page (through chrome) the background color is white, and I don't want it white, I want it to be transparent.
I would like not to use CSS, but if there is no other option so I'll do it.
Please note that, if you are not giving any colours for the background, then by default it will be white on most browsers! If you are using chrome, you can do like this:
body {
background: url("transparent1.png") transparent,
url("transparent2.png") transparent;
}
As said in the comment by KittMedia, if you are targetting new browsers, replace transparent with:
body {
background: url("transparent1.png") rgba(0, 0, 0, 0),
url("transparent2.png") rgba(0, 0, 0, 0);
}
This way, you can overlay two images and keep them transparent too. Is this what you are expecting?
Is it possible to replace a specified color with transparency in CSS?
We have an image with white (255,255,255) parts. I am trying to use the rgba function to convert the white parts to transparency, but it's not working.
This image lies on top of another image, a blue background. The white shows through.
.logo {
background: url("../images/MasterLogo_resized.png") no-repeat scroll center
top rgba(255, 255, 255, 0);
}
.logo {
background: url("../images/MasterLogo_resized.png") no-repeat scroll center
top rgba(255, 255, 255, 0.5);
}
You cannot change the properties of a PNG using css.
But, if your PNG is simple enough to be converted to an SVG (using a graphics program), you could use CSS to manipulate transparency and colors:
http://webdesign.tutsplus.com/articles/manipulating-svg-icons-with-simple-css--webdesign-15694
I'd like to develop a generalizable solution for creating etched lines. The goal is to be able to not have to manually pick closely related colors for every color scheme where I want etching. The issue seems that the color of the indented part in relation to the color of the background is somewhat critical for creating the 3 dimensional effect.
Below is an example in blue (the lines above the comment bubble/underneath the number "11"). I think I need to use box-shadow but not sure if this is the best way.
If box-shadow is what I should use, does anyone know how to set its CSS values such that would would work for say a gray line would also work for say a blue line?
You could use borders with semi-transparent black/white colors (using rgba) that will darken/lighten the underlying color.
Example at http://dabblet.com/gist/4182495
Adding pseudo elements with :after/:before gives you extra power in adding second level borders etc..
Here's the slightly simplified CSS for that comment indicator, which I found using the Chrome Web Developer tools:
.media-bar .count-badge {
padding: 0 7px;
background: #1C5380;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(0, 0, 0, 0.2);
border-radius: 12px;
}
If you visit the page and inspect the count-badge element, you'll be able to turn the box-shadow styles on and off, which will show how they create the inset effect.
I guess there are two borders together:
border-bottom: 1px solid #1C5380;
border-top: 1px solid rgba(255, 255, 255, 0.12);