Sorry, I lost few years in IT )
So, here is my question:
I have a long ".css" file and a lot of structures like
color: #567567;
in it. So, Is here a metрod to use some construction like
color: $mycolor
or not?
PS: sorry for my English.. I drank a few years )))))))
This is not (yet) possible across all browsers in pure CSS, it's currently just an experimental technology (also see this compatibility table).
A way to achieve that is using tools like less or sass that support variables and then compile their files into pure CSS.
An example taken from the less website:
#base: #f938ab;
.box-shadow(#style, #c) when (iscolor(#c)) {
-webkit-box-shadow: #style #c;
box-shadow: #style #c;
}
.box-shadow(#style, #alpha: 50%) when (isnumber(#alpha)) {
.box-shadow(#style, rgba(0, 0, 0, #alpha));
}
.box {
color: saturate(#base, 5%);
border-color: lighten(#base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
compiles to:
.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
Related
I am trying to add a blur/glass effect to a Chrome Extension to look like https://css.glass/
These are the styles I used on the <html> of the popup
.extension-html {
background: rgba(0, 0, 0, 0.7);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.9px);
-webkit-backdrop-filter: blur(4.9px);
}
And this is how it looks like:
This is how it should look like: (Photoshop edit)
Is adding a glassy transparent effect like this doable with chrome? If so, any guidance would be appreciated
I am having trouble creating a #mixin for a drop shadow. The drop shadow I want in regular CSS is as follows
-webkit-box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.2);
The #mixin I have created is as such
#mixin box-shadow(
$top, $left, $blur, $size, $color) {
}
Then to use this I have added the below to my scss file
#include box-shadow(0, 2px, 3px, 2px, rgba(0, 0, 0, 0.2));
However, it is broken as I do not see any drop shadow CSS being applied once the SCSS is compiled.
Try this: Fiddle
#mixin box-shadow($top, $left, $blur, $size, $color) {
-webkit-box-shadow: $top $left $blur $size $color;
-moz-box-shadow: $top $left $blur $size $color;
box-shadow: $top $left $blur $size $color;
}
.box{
width:150px;
height:150px;
background:blue;
#include box-shadow(2px,2px,5px,0, rgba(0,0,0,0.6));
}
It looks like you've left out declaring the box-shadow rules in your mixin.
It should look like this:
#mixin box-shadow($top, $left, $blur, $size, $color) {
box-shadow: $top $left $blur $size $color
}
Add the vendor prefixes as you need.
fiddle
I use this
/* BOXSHADOW */
#mixin boxshadow(#x: 0, #y: 0, #blur: 0, #spread: 0, #rgba: rgba(0, 0, 0, 1.0)) {
-webkit-box-shadow: #x*#rem #y*#rem #blur*#rem #spread*#rem #rgba;
-moz-box-shadow: #x*#rem #y*#rem #blur*#rem #spread*#rem #rgba;
box-shadow: #x*#rem #y*#rem #blur*#rem #spread*#rem #rgba;
}
#include boxshadow(0, 0, 10, -5, rgba(220, 220, 220, 1.0));
You could try to use Compass. It provides a lot of mixins for the most common CSS rules, including box-shadow. It also transparently add cross-browser prefixes while using its mixins.
I am fairly new to Less and I was just running through some of the simple concepts and found that when ever I use a parametric mixin, it doesn't compile to the CSS file.
Example, this is my style.less file:
#color: #000;
.boxshadow (#shadow:2px 2px 5px rgba(0,0,0,.4)) {
-webkit-box-shadow: #shadow;
-moz-box-shadow: #shadow;
box-shadow: #shadow;
}
.box{
.boxshadow;
color: #color;
}
and this my compiled style.css file:
.box {
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
color: #000;
}
It's recognising the values on .boxshadow and carrying them through to .box, but it isn't compiling .boxshadow as it's own CSS class.
I have compiled with the command line and a Sublime Text 3 package, both outputting the same css.
Am I missing something simple?
Thanks in advance!
If you want to create a mixin but you do not want that mixin to be output, you can put parentheses after it.
See here
I'm developing a website using the Twitter Bootstrap CSS framework. Rather than host the (significantly sized) file and Font Awesome myself, I plan to use the Bootstrap CDN by NetDNA instead to get both, Bootstrap's CSS as well as Font Awesome.
However, some of the button styles in Bootstrap do not appeal to me, and I've decided to override them in a custom stylesheet.
I've already read this question about overriding CSS styles involving images, but does the same apply for background gradients and other assortments? (which make my (quite old) computer groan if used too much, leading me to believe they do put some strain on the computer)
For example, one of bootstrap's style rules is as follows:
.btn-primary {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #006dcc;
*background-color: #0044cc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
which I'm tentatively overriding with:
.btn-primary {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-image: none;
background-color: #057CB8;
border: none;
border-radius: 4px;
}
Will the earlier (possibly CPU intensive) properties be loaded anyway?
The browser starts reading the html from the top, and starts fetching all CSS. The page will not be painted until all the CSS has been downloaded.
The bootstrap CSS will get loaded, but it won't be painted.
I got a requirement for text that looks like this:
Top shadow: 2px, #000, 75%
What does that mean? Is that just a text-shadow? What's the 75% mean?
Top Shadow, as described in this post, uses CSS3's box-shadow and the :before pseudo selector to add a shadow under the browsers bar by targeting the body element.
There is no top-shadow property in CSS, regarding the Top shadow: 2px, #000, 75% bit. There is however text-shadow & box-shadow.
It is not valid text-shadow.
May be you need such example (with correct syntax):
text-shadow: 0 0 2px rgba(0, 0, 0, .75);
or
text-shadow: 0 2px 2px rgba(0, 0, 0, .75); /* down shadow */
Notes:
rgba(0, 0, 0, .75) = #000 with 75% opacity
Updates: #Xander found technique which you are asked us about. In it box-shadow with css generated content are using:
body:before {
content: '';
position: fixed;
top: -1px;
left: 0;
width: 100%;
height: 1px
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .75);
box-shadow: 0 2px 2px rgba(0, 0, 0, .75);
z-index: 100;
}