I'd like to add a light hover over my buttons. Where do I begin?
INPUT.homeButton {
font-size: 12px;
color: #000;
font-family: Arial;
background-color: #FFF;
Just use 'hover'. Add something like this to your CSS file:
INPUT.homeButton:hover {
/* Your CSS properties (color, background-color, opacity, etc.) here... */
}
You can add 'opacity' property (1 = 100%, 0.5 = 50%, 0 = 0%, etc.) or change the 'color' and 'background-color' with light colors to make a similar effect.
Just use :hover to achieve it.
input.homeButton:hover {
opacity: 0.5;
}
Related
The following is my HTML markup where I add the title as a prop for Bootstrap card. I've tried z-index as well, but I wasn't able to achieve the desired result.
<b-col>
<div class="card-container">
<b-card
overlay
img-src="/images/ajm.jpg"
img-alt="Card Image"
class="product-card"
title="Linear Motors"
title-tag="h5"
align="center"
></b-card>
</div>
</b-col>
CSS ----->
.product-card {
height: 353px;
border-radius: 0px;
border: 0;
color: #0c1c35;
}
.card-container {
width: 100%;
height: 100%;
:hover {
background: -webkit-linear-gradient(
90deg,
hsla(217, 100%, 50%, 1) 0%,
hsla(186, 100%, 69%, 1) 100%
);
opacity: 0.8;
color: white;
}
}
Another thought I had was that the opacity field actually effects child elements as explained in w3 schools:
If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:
From seeing your CSS I see you're using opacity, so this might work if you use the RGBA - CSS.
.card-container {
background-color: rgba(255, 255, 255, 0.5);
}
Hope this helps
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%
I'm trying to remove gradient overriding this:
-webkit-linear-gradient(right,#1a5cce, #00c7ce 85%);
background: -moz-linear-gradient(right,#1a5cce, #00c7ce 85%);
background: -o-linear-gradient(right,#1a5cce, #00c7ce 85%);
background: linear-gradient(right,#1a5cce, #00c7ce 85%);
I tried with:
background: -webkit-linear-gradient(none);
background: -moz-linear-gradient(none);
background: -o-linear-gradient(none);
background: linear-gradient(none);
I'm not a css expert, what I want to do is remove completely the gradient, is this possible?
Just set background: initial.
All CSS properties allow initial value to revert their value to initial state. Use this property what you don't want to bother about particular property defaults.
Also you can use background: none for background property.
Gradient background reset that you'll need to set background: none #color;
Example:
.your-class {
background: none #157FCC;
color: #FFFFFF;
}
I'm trying to modify the text's color when hover with multiple color transitions but I can only change one color. Here is my CSS snippet.
#text {font:9px 'Arial'; color:#000000; transition-duration: 3s;}
#text:hover {color:#FFFFFF;}
Not just #000000 to #FFFFFF, but #000000→#FF0000→#0000FF→#FFFFFF
How to have multiple CSS color transitions on a single text line?
You need to use CSS Animations which allow you to use keyframes to define multiple state changes.
Your example would look like this:
#text:hover {
animation: 3s multicolor;
}
#keyframes multicolor {
0% {
color: #000;
}
33% {
color: #FF0000;
}
66% {
color: #0000FF;
}
100% {
color: #FFF;
}
}
Here's a demo fiddle that includes the -webkit prefix (omitted in the answer for brevity)
I would suggest checking out animation keyframes for CSS animations. You are able to specify the state of your text at whatever intervals you like (in this case, define your text color). W3 Schools has more info on the subject, take a look here: http://www.w3schools.com/css/css3_animations.asp
<style>
* {
background: red;
}
.blackbalk{
background:black;
ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
filter:alpha(opacity=85);
-khtml-opacity:.85;
-moz-opacity:.85;
opacity:.85;
width: 985px;
margin: 0 auto;
height:255px;
color: white;
}
</style>
<div class="blackbalk">Text </div>
Now my text gets pink, why?
How can i get it white again?
Greetings
Edit: JS Fiddle to make it clear: http://jsfiddle.net/WFxbH/
You can do it by instead using an rgba background on your element:
Live Demo - this will work "in every browser you care about", and my jsFiddle includes the recommended IE conditional comment to make it also work in that browser.
.blackbalk {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.85);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000)";
}
Thew, opacity affects the entire element and its contents, not just the background color. If you just want the background color to be 85% black, you should specifiy it with an RGBA color, like so:
.blackbalk {
background: rgba(0, 0, 0, 0.85);
width: 985px;
margin: 0 auto;
height: 255px;
color: white;
}
EDIT: cant over ride the cascading of opacity. Best alternative in my pinion is to use a single pixel 85% opacity black png as the background image. option 2 would be to make the inner content actually outside of the div then position it over but that's a lot finickier. You can even get the transparent png to work in IE without much trouble.
IGNORE:Not positive, as I can't test it right now but I assume the text is becoming translucent with the opacity change. Perhaps if you put your text inside a span with background-color:none and color:white; it might work it out. May have to set the spans opacity to 100% to override.