I want to create a text where the body of each letter is to be completely transparent (or set a certain opacity) but the shape of it is to be just the border.
In this post I saw a way to create a border around text. However, it is created based on the actual state of the text, so if I change its opacity, the border responds to that.
How could I create this border I am looking for?
The best way to do this is to set color of the text to rgba(255,255,255,0), the -webkit-text-stroke-width to 1px and the -webkit-text-stroke-color to #000 or any other color you would like to use
So it will be like this :
h1 {
color:rgba(255,255,255,0);
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000;
}
Maybe this link will help you, it has more details about RGBA colors
A brief introduction to Opacity and RGBA
Hope this will help you ...
Related
Im trying to create a cool effect in html5 where a element in one side of the gradient has a diffrent color then the other side. Like this:
example
I tried using mix-blend-mode: difference; but it i dont know how to controll the colors on the diffrent sides of the gradient. Codepen: https://codepen.io/powerkuu/pen/eYRYJVb
Change background: #ffff00; to background: #ecd54f;. It fits a little better.
Just change the hex-decimal value of background property in &:after to background: #ffff00; Try to find a fine color adjustment from changing the hex value. (#ffff00 is the value of pure yellow.)
The Screenshot I have taken from your Codepen after I edited tour code. Wish you all the best.
I have a dark/black background image and a white input field. I gave the input field an opacity of 50% and I want the text/value to be solid white(#fff). BUT when I apply the opacity it effects both the background of the input element and the text. How to I only change the background of the input field?
For that you could use background-color: rgba(0, 0, 0, 0.5). The first three numbers are the background color in rgb (red, green, blue) format and the fourth number is the opacity level on a scale from 0 to 1.
From what you say, you only want the background to be affected.
For backgrounds to be (partially) transarent, you have to use a
a) PNG background
or
b) a RGBa background- see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()
Like so: background:rgba(0,0,0,0.2);
This is not supported in IE8 and below.
The problem is that you are changing the opacity on the entire element. As such, all child elements strictly inherit the transparent properties.
There are a few things you can do.
You could target only the background and set it to an RGBA value:
background: rgba(255, 255, 255, 0.5);
This wont work in IE8 and before, so you can use a workaround using linear gradient filters:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80ffffff',GradientType=0 );
You will notice that the first 2 hexadecimal places are #80. This is not a mistake and is not a decimal value. Hexadecimal is base 16, this makes #80 the median point therefore setting your opacity to 50%. It's a little confusing, I know!
You could remove styling from the input field and, instead, add a wrapper around your input fields and style that instead.
You could use a semi-transparent PNG as the background image and set it to repeat.
Why not simply make a half-transparent png and use that as background image instead of setting the input opacity? Or if you don't have to support IE8- you can also use rgba().
I'm building a new website, and I'm looking for a transparent navigation bar so the background is visible.
There is not a Transparent color code, but there is an Opacity styling. Check out the documentation about it over at developer.mozilla.org
You will probably want to set the color of the element and then apply the opacity to it.
.transparent-style{
background-color: #ffffff;
opacity: .4;
}
You can use some online transparancy generatory which will also give you browser specific stylings. e.g. take a look at http://www.css-opacity.pascal-seven.de/
Note though that when you set the transparency of an element, any child element becomes transparent also. So you really need to overlay any other elements.
You may also want to try using an RGBA colour using the Alpha (A) setting to change the opacity. e.g.
.transparent-style{
background-color: rgba(255, 255, 255, .4);
}
Using RGBA over opacity means that your child elements are not transparent.
When you have a 6 digit color code e.g. #ffffff, replace it with #ffffff00. Just add 2 zeros at the end to make the color transparent.
Here is an article describing the new standard in more depth: https://css-tricks.com/8-digit-hex-codes/
All you need is this:
#ffffff00
Here the ffffff is the color and 00 is the transparency
Also, if you want 50% transparent color, then sure you can do...
#ffffff80
Where 80 is the hexadecimal equivalent of 50%.
Since the scale is 0-255 in RGB Colors, the half would be 255/2 = 128, which when converted to hex becomes 80
And since in transparent we want 0 opacity, we write 00
#0000ffff - that is the code that you need for transparent. I just did it and it worked.
You can specify value to background-color using rgba(), as:
.style{
background-color: rgba(100, 100, 100, 0.5);
}
0.5 is the transparency value
0.5 is more like semi-transparent, changing the value from 0.5 to 0 gave me true transparency.
According to MDN there is a transparent keyword, which is short for rgba(0,0,0,0).
{background-color: transparent;}
If you are looking for android apps, you can use
#00000000
Yeah I think the best way to transparent the background colour (make opacity only for the background) is using
.style{
background-color: rgba(100, 100, 100, 0.5);
}
Above statement 0.5 is the opacity value.
It only apply the opacity changes to the background colour (not all elements')
The "opacity" attribute in the CSS will transparent all the elements in the block.
Here, instead of making navigation bar transparent, remove any color attributes from the navigation bar to make the background visible.
Strangely, I came across this thinking that I needed a transparent color, but all I needed is to remove the color attributes.
.some-class{
background-color: #fafafa;
}
to
.some-class{
}
input[type="text"], input[type="password"]{
opacity:0.5;
}
This fades both - input body and border. I don't want border transparent, just body, so the underlying image is visible. User-text inside the input should not be transparent, of course.
input [type="submit"]{
margin-left:50px; // here nothing works at all.
}
The opacity property influences the opacity of the whole element. Your question is bit vague, but I assume that you want to have a semi-transparent background, while the content and borders shouldn't have transparency.
To do so, you need to set a semi-transparent background to the element. This is called alpha-transparency, as a fourth color channel - the alpha channel - is used to store the transparency information (usually in an image like a PNG).
In modern browsers you could use the rgba() value for the background property:
/* semi-transparent white background */
background: rgba( 255, 255, 255, .5 );
In MS IE you could use a gradient filter, which supports ARGB colors since MS IE 5. Just fade from a color to itself: (be aware, that the alpha channel comes first and all four color values are noted as two-digit hexadecimals)
/* the same for IE 7+8, should get included in a separate MS IE specific stylesheet */
background: none;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#E5FFFFFF, endColorstr=#E5FFFFFF );
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#E5FFFFFF, endColorstr=#E5FFFFFF );
Opacity works on the whole text input including the text inside it. So your code won't work.
Option 1) Can you use CSS3? If so, use (with the color you want, of course):
background-color: rgba(255,0,0,0.5);
Option 2) You can set the background of the Input as the image you want to see.
Option 3) You can set the background as a semi-transparent solid color image (.gif/.png, which can be 1x1 in size and repeated in X and Y).
For the submit, you need to get rid of the space in your selector:
input[type="submit"]{
margin-left:50px;
}
And you can't specify what parts of the element you want to make transparent with opacity. It applies to err'thang. There might be 'hacks' of sorts to achieve what you want, such as using a wrapping div to create the border.
If I have a HTML table like the one below:
<table bgcolor="#151515" height="100" width="200">
<tr>
<td>
Hello
</td>
</tr>
</table>
How can I make it partially transparent? Is there a way of doing it without CSS? If not what is the CSS way?
You can try this in your html file:
<table class='table1'>
<tr><td>...
And this in your css file:
.table1 {
background: rgba(255,255,255,0.5);
}
This sets the rgba RED GREEN BLUE ALPHA values, 255,255,255 = white, 0,0,0 = black, and the 0.5 value at the end (ALPHA) is between 0 and 1, where 1 is opaque and 0 is transparent. I hope this helps.
In your case, #151515 (HEX CODE) translates to (21, 21, 21, 0.5) (RGBA) where A is equal to 50% transparent.
You can set the opacity or transparency of the background in CSS, as follows
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
The above makes it 60% clear. Hope this helps.
With CSS you set the opacity to a value between 0 and 1. However, that will make any element inside your table transparent.
A better solution (unfortunately) is to make a tiling background png with slight transparency. That way you can fade the background without fading the content.
Replying to old post but this is still relevant as I just referenced it =)
Too... you can use fireworks or (presumably) photoshop to create an all black .png image (just a black box). Set your desired transparency with the toolbar and set said photo as your table background image. It defaults to repeat itself so will fill your table. You will have a transparent table that you can see your -body bg img/color- through and anything you put into the table will be unaffected by the transparency.
Jon
The way to change the background color and opacity is adding this attribute to your css.
background-color: rgba(100,200, 0, 0.5); (not background)
If you want to change the background+text content opacity, you can use:
opacity:0.6;