I download a project, and in it there use less write the stylesheet.
And in the script code the name: own-space, and in the less code, there are &-btn-box, &-tra and &-input-identifycode-con selectors.
I have two questions:
I don't know the .own-space in less and the name: own-space's relationship.
and what's the meaning of &-btn-box, &-tra and &-input-identifycode-con there? what's the function of them?
My code is below:
<template>
<div>
.....
</div>
</template>
<script>
export default {
components: {
},
name: 'own-space',
data () {
...
};
},
methods: {
...
}
};
</script>
<style lang="less" rel="stylesheet/less">
...
.own-space {
&-btn-box {
margin-bottom: 10px;
button {
padding-left: 0;
span {
color: #2D8CF0;
transition: all .2s;
}
span:hover {
color: #0C25F1;
transition: all .2s;
}
}
}
&-tra {
width: 10px;
height: 10px;
transform: rotate(45deg);
position: absolute;
top: 50%;
margin-top: -6px;
left: -3px;
box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
background-color: white;
z-index: 100;
}
&-input-identifycode-con {
position: absolute;
width: 200px;
height: 100px;
right: -220px;
top: 50%;
margin-top: -50px;
border-radius: 4px;
box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
}
}
</style>
Less/Sass and other pre-processors let you write the CSS code with nested rules (besides other things like variables, mixins, and so on). So you don't have to write the full path like you do in CSS. You can just nest the style.
For example, you could have a structure like:
<parent>
<child>
<grandchild>
</grandchild>
</child>
</parent>
In plain CSS, to style every element you would write:
parent { styles }
parent child { styles }
parent child grandchild { styles }
With Less (and other preprocessors like SCSS) you can do the following
parent {
some parent styles
& child {
some child styles
& grandchild {
some grandchild styles
}
}
&:hover { hover styles on parent }
&:before { pseudo element styles }
}
etc.
So, the use of & can be to enable style writing for elements that are in a relationship with the parent element ( in your case the .own-space ).
btn-box , -tra , -input-identifycode-con are direct children of the own-space element, and button is child of btn-box , span is child of button, grandchild of btn-box and , grandgrandchild ( :) ) of the own-pace. Anyway, you get the ideea :)
For the specific question .own-space { &-btn-box { ... } } would mean that there is an element with class own-space-btn-box which most probably is a child of own-space but NOT necessarily ( see end of answer ). The HTML seems to be structured in a BEM style but not according to the documentation and rules. When using preprocessors for styling it is highly recommended to use the BEM naming strategy. Take a look at it.
For example, the current structure COULD look like:
Stack Snippets do not accept SCSS. You can check out a working example here
.own-space {
&-btn-box {
margin-bottom: 10px;
button {
padding-left: 0;
span {
color: #2D8CF0;
transition: all .2s;
}
span:hover {
color: #0C25F1;
transition: all .2s;
}
}
}
&-tra {
width: 10px;
height: 10px;
transform: rotate(45deg);
position: absolute;
top: 50%;
margin-top: -6px;
left: -3px;
box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
background-color: white;
z-index: 100;
}
&-input-identifycode-con {
position: absolute;
width: 200px;
height: 100px;
right: -220px;
top: 50%;
margin-top: -50px;
border-radius: 4px;
box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
}
}
<div class="own-space">
The SO snippet doesn't support CSS preprocessors.
Example purposes only
<div class="own-space-btn-box">
<button>Button</button>
<span>Some span</span>
</div>
<div class="own-space-tra">
Tra tra
</div>
<div class="own-space-input-identifycode-con">
identifycode
</div>
</div>
IMPORTANT when you see styles like these in most cases the elements ARE related but keep in mind when debugging other people's code that it's not always the case. They can be unrelated, e.g.
<element class="element"> .... </element>
<element2 class="element-element2"> .... </element2>
The SCSS could still look like this and have the same effect
.element {
styles
&-element2 {
styles
}
}
See example -> not related
Another example use of & would be in the case you have two elements with a common class and a specific class, e.g.
<element class="element specific1">....</element>
<element class="element specific2">....</element>
You can add common styles and specific styles all together like
.element {
/* common styles */
&.specific1 {
/* specific 1 styles */
}
&.specific2 {
/* specific 2 styles */
}
}
There are a lot of different uses for &. Read more:
the-sass-ampersand
Sass parent selector
LESS
BEM naming
I would like to define colors with opacity
I know that it is possible to do this via rgba colors, but I like the ease of named colors. e.g.:
background-color: red;
Is there a way to combine the two?
The only way would be to apply the color and the opacity separately like this:
someElement {
background: blue;
opacity: .5;
}
But, this won't be possible to do selectively since opacity applies to the entire element, not any one aspect of the element. Here, you'll see that the background color and the font color are both affected.
div { background: yellow;
color:green;
opacity: .5;
}
<div>This is my div</div>
No...this is not possible in raw CSS.
CSS preprocessors however can do this
SASS
div {
width: 100px;
height: 100px;
background-color: rgba(red,0.5);
}
compiles to
CSS
div {
width: 100px;
height: 100px;
background-color: rgba(255, 0, 0, 0.5);
}
SASSMeister Demo
You can't use "red" in rgba(red,0.5) with standard CSS, but you can do
background: red;
opacity: 0.5;
The down side is that opacity will affect child elements, which rgba(255,0,0,0.5) will not.
By using pseudo element you can create a similar effect.
div {
position: relative;
height: 30px;
}
div:first-child {
background: rgba(255,0,0,0.5);
margin-bottom: 10px;
}
div ~ div:before {
content: ' ';
position: absolute;
left: 0; top: 0;
right: 0; bottom: 0;
background: red;
opacity: 0.5;
z-index: -1;
}
<div>Hello</div>
<div>Hello</div>
I'm afraid that you can't. There are no named alpha channel colors in the css3 specification.
You can read more about it in
https://drafts.csswg.org/css-color-3/#colorunits
If what you want is to have a nemonic to apply to backgrounds, may be the best is to create a class for that:
.red-50 {
background-color: rgba(255, 0, 0, 0.5);
}
.red-75 {
background-color: rgba(255, 0, 0, 0.75);
}
And apply to your html elements
<div class="red-50 someOtherClass"></div>
The CSS3 rgba() and hsla() functions are the only way to directly specify a color with alpha. However, if use of less or SASS is allowed, colors can be assigned to variables and used similarly to the builtin named colors. A less example:
#red50: rgba(255, 0, 0, 0.5);
.something {
background-color: #red50;
}
I'm trying to make custom checkboxes with CSS3, which is working great on Chrome. On Firefox... not so much.
Edit: it seems to be working fine on Firefox 37.
The answer below is still relevant, but the style related issues from mid 2013 are resolved.
IE support isn't mentioned here but edits/answers regarding it are welcome.
demo
The HTML:
<input type="checkbox" id="first"/>
<label for="first">This is pretty awesome</label>
The CSS:
input[type=checkbox] {
appearance: none;
background: transparent;
position: relative;
}
input[type=checkbox]::after {
position: absolute;
top: 0;
left: 0;
content: '';
text-align: center;
background: #aaa;
display: block;
pointer-events: none;
opacity: 1;
color: black;
border: 3px solid black;
}
input[type=checkbox] + label {
line-height: 48px;
margin: 0 15px 0 15px;
}
input[type=checkbox]:hover::after {
content: '';
background: #32cd32;
opacity: .3;
}
input[type=checkbox]:checked::after {
content: '\2713';
background: #32cd32;
}
input[type=checkbox]:checked:hover::after {
opacity: 1;
}
input[type=checkbox],
input[type=checkbox]::after {
width: 48px;
height: 48px;
font-size: 46px;
line-height: 48px;
vertical-align: middle;
border-radius: 50%;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Note: I removed vendor prefixes, and things like user-select for brevity. The full code is in the pen.
What do I need to change to have it look the same on Firefox as it does on Chrome?
Desired:
Not desired:
You can enable custom styles for checkbox specifically for mozilla browser by adding this property and it worked for me.
-moz-appearance:initial
I managed to fix it as much as seems possible (I'd still love a better solution, if one exists). I switched all of the selectors from
input[type=checkbox]::after
to
input[type=checkbox] + label::after
Downside:
requires a label
But:
HTML requires input elements to have a label
Conclusion:
only bad for invalid HTML
doesnt technically need a LABEL, but does need control over the mark up to ensure there is a target-able sibling immediately after the checkbox.
i.e.
input[type=checkbox] + span::after{
display:block;
width:50px;
height:50px;
background:yellow;
display:block;
}
input[type=checkbox]:checked + span::after{
display:block;
width:50px;
height:50px;
background:yellow;
display:block;
}
<input type="checkbox"></input>
<span class="targetMe"></span>
target the span using the sibling selector and :after elements as above.
Might as well put in a label tho at this point... :P
The problem is that :after and ::after technically create an element as the last child of the element the pseudoselector is applied to. Firefox doesn't like to create children inside of its checkboxes. This is actually part of a bigger topic which is replaced elements.
You will see the same issue with the :before and ::before pseudoelements not working on checkboxes because they would create elements as a first child element within the element being selected.
I have a set of <a> tags with differing rgba background colours but the same alpha. Is it possible to write a single css style that will change only the opacity of the rgba attribute?
A quick example of the code:
<img src="" /><div class="brown">Link 1</div>
<img src="" /><div class="green">Link 2</div>
And the styles
a {display: block; position: relative}
.brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);}
.green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);}
What I would like to do is write a single style that would change the opacity when the <a> is hovered over, yet keep the colour unchanged.
Something like
a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}
This is now possible with custom properties:
.brown { --rgb: 118, 76, 41; }
.green { --rgb: 51, 91, 11; }
a { display: block; position: relative; }
div { position: absolute; bottom: 0; background-color: rgba(var(--rgb), 0.8); }
a:hover div { background-color: rgba(var(--rgb), 1); }
To understand how this works, see How do I apply opacity to a CSS color variable?
If custom properties are not an option, see the original answer below.
Unfortunately, no, you'll have to specify the red, green and blue values again for each individual class:
a { display: block; position: relative; }
.brown { position: absolute; bottom: 0; background-color: rgba(118, 76, 41, 0.8); }
a:hover .brown { background-color: rgba(118, 76, 41, 1); }
.green { position: absolute; bottom: 0; background-color: rgba(51, 91, 11, 0.8); }
a:hover .green { background-color: rgba(51, 91, 11, 1); }
You can only use the inherit keyword alone as a value for the property, and even then the use of inherit isn't appropriate here.
You could do various things to avoid having to hard code the numbers if you want to. Some of these methods only work if you use a plain white background as they're really adding white on top rather than reducing opacity. The first one should work fine for everything provided:
you aren't already using the psuedo-element for something; and
you can set position to relative or absolute on the <div> tag
Option 1: ::before psuedo-element:
.before_method{
position:relative;
}
.before_method:before{
display:block;
content:" ";
position:absolute;
z-index:-1;
background:rgb(18, 176, 41);
top:0;
left:0;
right:0;
bottom:0;
opacity:0.5;
}
.before_method:hover:before{
opacity:1;
}
Option 2: white gif overlay:
.image_method{
background-color: rgb(118, 76, 41);
background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fc/Translucent_50_percent_white.png)
}
.image_method:hover{
background-image:none;
}
Option 3: box-shadow method:
A variation of the gif method, but may have performance issues.
.shadow_method{
background-color: rgb(18, 176, 41);
box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.2);
}
.shadow_method:hover{
box-shadow:none;
}
CodePen examples: http://codepen.io/chrisboon27/pen/ACdka
No, it's not possible.
You could try a CSS pre-processor, though, if you want to do this sort of thing.
From what I could see, at least LESS and Sass have functions that can make colors more, or less, transparent.
It's now 2017 and this is now possible with
CSS custom properties / CSS Variables (Caniuse)
One classic use case for CSS variables is the ability to individualize parts of a property's value.
So here, instead of repeating the whole rgba expression once again -
we split up or 'individulaize' the rgba values into 2 parts / variables (one for the rgb value and one for the alpha)
.brown {
--rgb: 118, 76, 41;
}
.green {
--rgb: 51, 91, 11;
}
.brown, .green {
--alpha: 0.3;
background-color: rgba(var(--rgb), var(--alpha));
}
Then, on hover we can now just modify the --alpha variable:
a:hover .green, a:hover .brown {
--alpha: 1;
}
a {
display: block;
position: relative;
}
.brown {
--rgb: 118, 76, 41;
}
.green {
--rgb: 51, 91, 11;
}
.brown, .green {
display: inline-block;
--alpha: 0.3;
background-color: rgba(var(--rgb), var(--alpha));
font-size: 40px;
margin: 20px;
}
a:hover .green, a:hover .brown {
--alpha: 1;
}
<a href="#">
<div class="brown">Link 1</div>
</a>
<a href="#">
<div class="green">Link 2</div>
</a>
Codepen
Further reading:
Individualizing CSS Properties with CSS Variables (Dan Wilson)
No, that's not possible.
If you want to use rgba, you must set each value together. There's no way to only change the alpha.
there is an alternative,you can add a linear-gradient background image onto the original color.
a{
background: green
}
a:hover{
background-image:linear-gradient(hsla(0,0%,0%,.2) 100%,transparent 100%) // darker
}
a:hover{
background-image:linear-gradient(hsla(255,100%,100%,.2) 100%,transparent 100%) // lighter
}
also, with css3 filter property,you can do that too,but it seems that it will change the text color
a:hover{
filter: brightness(80%) //darker
}
a:hover{
filter: brightness(120%) //lighter
}
here is a jsfiddle:https://jsfiddle.net/zhangyu911013/epwyL296/2/
Why not use :hover and specify a different opacity in the hover class?
a:hover {
opacity:0.6
}
simple solution :
a
{
position: relative;
display:inline-block;
background: rgba(red, 0.75);
padding: 20px;
&:before
{
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
&:hover
{
&:before
{
background-color: rgba(#000, 0.25);
}
}
}
exemple : https://jsfiddle.net/epwyL296/14/
just play with alpha of background. if you want light instead of darkness, just replace #000 by #fff
I had a similar problem. I had 18 different divs working as buttons, and each with a different color. Rather than figure out the color codes for each or use a div:hover selector to change the opacity (which affects all children) I used the pseudo-class :before like in #Chris Boon's answer.
Because I wanted to do the coloring on the individual elements, I used :before to create a transparent white div on :hover. This is a very basic washout.
#categories div {
position:relative;
width:100px;
height:100px;
float:left;
border:1px solid black;
display:table-cell;
}
#categories div:before{
content:"";
position:absolute;
top:0px;
left:0px;
width:100px;
height:100px;
}
#categories div:hover:before {
background-color:white;
opacity:0.2;
}
#a_Particular_Div {
background-color:red;
}
According to CanIUse.com, this should have something like 92% support as of early 2014. (http://caniuse.com/#feat=css-gencontent)
You can do this with CSS variables, although it's a little messy.
First, set a variable containing just the RGB values, in order, of the color you want to use:
:root {
--color-success-rgb: 80, 184, 60;
}
Then you can assign an RGBA value for a color and pull everything but the alpha value from this variable:
.button--success {
background: rgba(var(--color-success-rgb), 0.8);
}
This isn't super pretty, but it lets you use the same RGB values but different alpha values for a color.
Update: It's not possible to do that unfortunately. You'll need to write two separate selectors of:
a.green:hover {background-color: rgba(118,76,41,1);}
a.brown:hover {background-color: rgba(118,76,41,1);}
According to the W3C, the rgba property doesn't have/support the inherit value.
I faced a similar problem. Here's what I did and it works fine( only alpha changes on hover and also the text is not affected) by the following steps:
1) Apply a highlighted(or any of your choice) class to whichever element you wish to change background alpha of.
2) Get the background color rgba
3) Store it in a string and manipulate it(change alpha) as you want on hover(mouseenter and mouseleave)
HTML Code:
<div class="highlighted brown">Link 1</div><br><br>
<div class="highlighted green">Link 1</div>
CSS Code:
.brown {background-color: rgba(118,76,41,.8);}
.green {background-color: rgba(51,91,11,.8);}
Javascript Code:
$(document).on({
mouseenter: function() {
var rgba_str = $(this).css("background-color");
var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.5)";
$(this).css("background-color",new_rgba_str );
},
mouseleave: function(){
var rgba_str = $(this).css("background-color");
var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.8)";
$(this).css("background-color",new_rgba_str );
}
},'.highlighted');
Working Fiddle:http://jsfiddle.net/HGHT6/1/
Simple workaround with opacity if you can accommodate a slight change in background-color:
.yourClass {
// Your style here //
opacity: 0.9;
}
.yourClass:hover, .yourClass:focus {
opacity: 0.7;
}
.yourClass:active {
opacity: 1;
box-shadow: none;
}
.yourClass:hover, .yourClass:focus, .yourClass:active {
text-decoration: none;
outline: none;
}
Building on Yu Zhang's answer:
In :root, (or parent component in Blazor) set css variables:
--bg-img-light: linear-gradient(hsla(255,100%,100%,.2) 100%, transparent 100%);
--bg-img-dark: linear-gradient(hsla(0,0%,0%,.2) 100%, transparent 100%);
Then on any element that you want to apply a hover effect on:
.buttontomakelighter:hover {
background-image: var(--bg-img-light);
}
.buttontomakedarker:hover {
background-image: var(--bg-img-dark);
}
This is about the simplest way; put this in your css stylesheet:
a:hover { color : #c00; }
done!
Is it possible to have one CSS class reference another? Instead of rewriting all the css code again?
For example, I have this:
.btn{
/* Whatever btn related styles I have */
}
.btn:hover{
box-shadow:0 0 4px black;
}
.btn:active{
/* This is where I want to reference the '.red' class */
}
.red{
/* There is a LOT of CSS code here for cross browser gradients */
}
The thing is, I'm already using the .red class as is in certain places, and I'd also like to apply the same gradient style to the 'active' state of all elements with the .btn class...
If you can help solve (it need not be the way I've requested it) this, I'd greatly appreciate it...
You can't actually do a reference (one of CSS's major failings), but you can do this:
.btn:active, .red {
/* Block A: Most (or all) of what used to just be in .red below */
}
.btn:active {
/* Block B: Stuff *just* for .btn:active, if any */
}
.red {
/* Block C: Stuff *just* for .red, if any */
}
The comma means that the definitions in the body of Block A apply separately to each of those selectors, and so they apply to any ".btn" elements that are ":active", and separately apply to any ".red" elements.
Block B and Block C are optional. They're for any definitions you only want to apply to the given selector. You usually list these after Block A because rules of equal specificity are applied top-to-bottom, so you can override anything from Block A that you want to in Block B or Block C, and those blocks will "win".
For call class to another class.
.classA{
}
.classB .classA:hover{
visibility: visible;
/*classA -> onmouseover , classB -> visible*/
}
classB{
visibility: hidden;
}
Sample code show popUp onmouseover
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup:hover .popuptext{
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
/*onmouseover .popup class .popuptext is visible*/
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
</head>
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup">over me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup! </span>
</div>
</body>
</html>