css - Unsupported CSS Property Transparency in codename1 - css

I am getting following exception in codename1
CSS> java.lang.RuntimeException: Unsupported CSS property Transparency
Code used by me is as follow :-
Form {
Background Color: 0xffffff;
Transparency: 255;
}
What should I do to fix it ?

Try
Form {
Background Color: rgba(255,255,255,0);
}
or
Form {
Background Color: transparent;
}
One of theses three should do the trick

You can set the color to a value using:
background-color: #ffffff;
Opacity is implicit when you define it this way. You can use transparency using:
background-color: transparent;

You can set the background transparency along with the color name
form{background-color:rgba(255,255,255,0.3);}
RGBA stands for Red Green Blue Alpha. Here the Alpha defines the transparency.
You can set the 0.3 to 0 to make it completely transparent.
Try this
You can learn more about transparency here:
https://www.w3schools.com/cssref/css_colors_legal.asp

if css is the same in java then the correct syntax would be:
Form {
background: #ffffff;
filter: opacity(0.5);
}
the filter property should be between 0 and 1 where 0 is 0% and 1 is 100%

Related

How can I increase the content transparecy with CSS?

I want my content be more transparent, I've added the following CSS code:
.hentry {
background-color: transparent;
border: none;
}
How can I increased that value?
Thanks for the help.
You can use rgba() color codes:
the first 3 values are for rgb
the 4th value is for the alpha channel and defines the opacity of the color
The alpha value can go from zero 0 (transparent) to one 1 (opaque).
If you want the content to be transparent, you can do this with the help of opacity CSS
.hentry {
opacity: 0.8;
}
0.8 is the value, you can define anything between 0 to 0.9 in that depending upon your requirement

Fullcalendar events have desaturated background color

I'm using fullCalendar's resource-timeline views and I have noticed that the event background colors are de-saturated.
I have used different ways to set their color, including setting all event background colors with CSS, and everything works (i.e. I have no problem changing the event colors), except that the colors lack saturation.
For example, using CSS like this:
div#calendar {
background-color: red !important;
}
.fc-timeline-event {
background-color: red !important;
}
I would expect both the table background and the events to be saturated red. The background is, but the events are not. Checking with a color sampler shows that the background is #ff0000, but the cells are #ff5952, which corresponds to red saturated to 68%.
Strangely enough the browser inspector shows the computed background color as #ff0000.
Any ideas on how to achieve a display with fully saturated colors?
I have my solution.
In your CSS style code, you put the code below
.fc-bgevent {
opacity: 1;
}
The number 1 above can be changed to 0.9, 0.8 etc. It will replace the background event style.
And it works for me!
Fullcalendar CSS contains a rule that overlays the calendar with white, opacity 25%. This causes the problem
:
.fc-event .fc-bg {
z-index : 1;
background; #fff;
opacity: 0.25
)
The opacity needs to be set to 0. So Added this in my own stylesheet:
.fc-event .fc-bg {
opacity: 0 !important;
}

Set CSS color using color text name like "red" and also set opacity?

Is there a way to set a CSS color using a color text name and also set opacity?
Something like:
color: lightgray alpha 0.5
Or do I have to use RGBalpha, like:
color: rgba(211,211,211,0.3)
It's not possible to combine color text names and alpha.
You can handle your problems two ways
Advised: Translate the color text name to rgb so lightgray = 211,211,211
span.lightgray {
color: rgba(211,211,211, 0.3); // Your own suggestion
}
Not advised: Use the color text name and opacity, but opacity applies to the entire element (so background or other properties will also be transparent/affected)
span.lightgray{
color: lightgray;
opacity: 0.3; // Not advised
}
As far as the MDN documentation on this tells us, you should be using rgba(r,g,b,a) or even hsla(h,s,l,a) if you want to pick a color with alpha. So it is not possible to do what you were trying to achieve using the first way you showed.
You can use opacity.
But this will affect both background-color and color.
#txt {
color: red;
background-color: lime;
opacity: 0.5;
}
<span id="txt">TEST</span>
You can use RGBalpha or HSL or HSLA.
eg:
1) RGBA:
rgba(255, 0, 0, 0.2);
red-255
gree-0
blue-0
aplha(opaque or transperant)-0.2
2) HSL:
hsl(120, 100%, 50%)
Hue is the degree of colour in the wheel - 120.
Saturation - 100%
Lightness - 50%
https://www.w3schools.com/css/css3_colors.asp
We can also use the opacity property like
div {
opacity: 0.5;
}
But opacity property will add transparency to the background. so all the child element will become transparent. So it might be difficult to read. So it is better to use HSL or RGBA

CSS3 Change text opacity without affecting stroke

Have a unique issue here. I'm trying to set some text to completely opaque, while still keeping a visible stroke on the text. I'd like to be able to see through the text as the background is dynamic, so I can't simply set it to the color of its backround.
Here's what I've got, but opacity is overwriting the stroke:
#special {
opacity: 0;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
Help appreciated!
The opacity affects all visual properties of the object.
But, what about this?
#special {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
color: transparent;
}
JsFiddle: http://jsfiddle.net/fdLecLan/2/
About the opacity, the W3schools says:
The opacity-level describes the transparency-level, where 1 is not transparant at all, 0.5 is 50% see-through, and 0 is completely transparent.
So setting it to 0 will make it totally transparent, but is important to remember that it stills stay in the View port, and stills interact with user (So, if it's a button or link, it'll still be clickeable...)

How do I make a div transparent on a white body background?

The background-color of my body is #ffffff. And I have a div that I need is colored but it needs to be transparent or see through. Is it possible to do this using CSS3 or do I have to use images to achieve this?
body {
background-color: #ffffff;
}
.box {
background-color: #999999;
background-image: linear-gradient(to top, #999999 0%, #444444 100%) !important;
opacity: 0.7;
}
Update:
If you go here: http://pinesframework.org/pnotify/#demos-simple and look for the demo for Transparent Success you can see how the pop-up looks see through on a white background. I need to do something like that without using an image as they are using one.
It sounds like you want an alpha transparent background color. If that's the case, you can use RGBA colors, rather than a solid hex value and an opacity property. This way, only the background will have transparency, not the content.
In your case it would be:
.box {
background-color: rgba(255,0,0,0.7);
}
You can also specify a fallback color to browsers that don't support RGBA (IE 8 and older), or create a PNG image with the color fill you want. My vote is toward progressive enhancement, and just specify an alternate color for browsers that don't understand RGBA:
.box {
background-color: #ff4c4c;
background-color: rgba(255,0,0,0.7);
}
UPDATED: Per your comment below, this question appears to be a duplicate of CSS - Opaque text on low opacity div?.
You need to change the opacity of the background instead of the element:
.box {
rgba(255,0,0,0.6);
}
Or, since you are using a gradient, I would use this:
Ultimate CSS Gradient Generator
It will allow you to do semi-transparent backgrounds with a gradient.

Resources