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.
Related
Is there any way to check argument in mixins.
For example, I have a shadow mixin and want to include it (call it) different way in case of its argument.
#mixin shadow($shadow, $position, $color) {
.....
}
If I pass Top2 it should change only first parameter
.box { #include shadow(inset, Top2, #000); } => `box-shadow: inset, 2px 0 0 0, #000`
If I pass Bottom2 it should change the parameter to -2px
.box { #include shadow(inset, Bottom2, #000); } => `box-shadow: inset, -2px 0 0 0, #000`
I think you should use this type.
#mixin box-shadow($values) {
-webkit-box-shadow: $values;
-moz-box-shadow: $values;
box-shadow: $values;
}
#mixin box-shadow-inset($inset) {
-webkit-box-shadow: $inset;
-moz-box-shadow: $inset;
box-shadow: $inset;
}
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
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);
}
I'm playing at CodePen and trying to make a cinematic CSS3 lens flare like in multimillion blockbusters. I tried to make it through the box-shadows but I'm unable to make them with needed shape, this is totally wrong. I can't use canvas or JS at all, so the point is to make it only with css, if it's possible. The result effect I want to get is something like this:
http://codepen.io/byob/pen/azzbjB This is that pen
#-webkit-keyframes blink {
0% { box-shadow: none; }
100% {
box-shadow: inset 10px 0px 50px 0px rgba(255, 0, 0, 0.5),
inset -10px 0px 50px 0px rgba(255, 0, 0, 0.5),
1px 1px 500px 30px rgba(255, 0, 0, 0.5),
50px 0px 0px 0px rgba(255, 0, 0, 0.5),
-20px 0px 0px 0px rgba(255, 0, 0, 0.5);
}
}
The one i want to do, is way more complex, so, guess i need help or the fact that it is impossible w/o js.
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;
}