I'm currently writing a mixin that would allow me to do a 3d box effect with layers of box-shadows.
The resulting code that gets returned would look something like this:
.someclass {
box-shadow: 1px 0 1px #203891, 0 1px 1px #3852B1, 2px 1px 1px #203891,
1px 2px 1px #3852B1, 3px 2px 1px #203891, 2px 3px 1px #3852B1;
}
this code is taken from css-tricks' buttons.
I need help appending/joining lists with a comma separation:
Given the following two lists:
$bottom: 1px 0 1px $bottomcolor
$right: 0 1px 1px $rightcolor
I would like to join them to get:
$joined: 1px 0 1px $bottomcolor, 0 1px 1px $rightcolor
here's what I got when using Sass' built in list functions:
append($bottom, $right, comma) => 1px, 0, 1px, red, 0 1px 1px red
join($bottom, $right, comma) => 1px, 0, 1px, red, 0, 1px, 1px, red
just realized why the above code didn't work because $bottom and $right aren't 2D lists, only 1D lists....
I ended up solving my mixin like so:
#import compass
=boxeffect($depth, $bottomcolor, $rightcolor)
$layers: 1px 0 1px $bottomcolor, 0 1px 1px $rightcolor
#for $i from 1 through $depth
$layers: append($layers, (#{$i + 1}px #{$i}px 1px $bottomcolor), comma)
$layers: append($layers, (#{$i}px #{$i + 1}px 1px $rightcolor), comma)
+box-shadow($layers)
.test
+boxeffect(2, #222222, #333333)
with the outcome of:
/* line 18, ../sass/temp.sass */
.test {
-webkit-box-shadow: 1px 0 1px #222222, 0 1px 1px #333333, 2px 1px 1px #222222, 1px 2px 1px #333333, 3px 2px 1px #222222, 2px 3px 1px #333333;
-moz-box-shadow: 1px 0 1px #222222, 0 1px 1px #333333, 2px 1px 1px #222222, 1px 2px 1px #333333, 3px 2px 1px #222222, 2px 3px 1px #333333;
box-shadow: 1px 0 1px #222222, 0 1px 1px #333333, 2px 1px 1px #222222, 1px 2px 1px #333333, 3px 2px 1px #222222, 2px 3px 1px #333333;
}
This works as well:
$cat: ();
$a: 1px 0px url(http://domain.com);
$b: 0px 1px #bbb;
$cat: append( unquote( $a ), $b, comma );
Hope this helps.
Related
After the first line of text the second line of text goes to the bottom of image and i don't know why! help? Here is my coding:
< div style="border-radius:5px; border: 1px solid #E6DFDF; color:black; margin: 3px; margin-top: 3px; padding: 3px; min-height:20px; background-color: #8bc5c0; -moz-box-shadow:1px 1px 2px 1px #333; -webkit-box-shadow:1px 1px 2px 1px #333;box-shadow:1px 1px 2px 1px #333;" >
< img src="{AskerPortraitURL-30}" width="30" align="left" style="margin-right:3px; box-shadow: 0px 0px 0px 0px #E6DFDF; border-radius: 3px;"/>< askky >{Asker} asked:< /askky > {Question}< br >< /div >
You are all set. Only give disply: inline-block; and define its width: 30%; or whatever you want. Now it would behave as an inline element for others but block for itself. Hope this works.
I have a trouble that I can't solve in a blog of WordPress. I don't know if it's bug or they are in confilcts. Firstly, see the image:
http://i.imgur.com/K4gWjh9.png
Notice the 3D rounded border and the white and black shadow in this image. This image is above the author avatar image's box. I can't correct it. See the example of JSFiddle:
http://jsfiddle.net/ZUben/
I use the Graphene theme for Wordpress the which is updated:
http://www.khairul-syahir.com/wordpress-dev/graphene-theme#.UXCgoivwLRY
Follow my styles:
.gutter-right {
margin-right: 10px;
}
...
.post-avatar-wrap {
float: right;
width: 48px;
height: 48px;
background: #fff center;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
-webkit-box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
margin-top: -10px;
}
...
.author-avatar-wrap {
width: 48px;
height: 48px;
background: #fff center;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
-webkit-box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
margin-top: -10px;
}
Thank you!
Okay, here we go: set the image relative and also apply a z-index for this image which is lower than the z-index of the wrapper. Moreover we will have to apply the CSS3 border-styles to both, div and img.
So go and take a look at my fork of your fiddle: http://jsfiddle.net/ShwkP/
I've also created a separate class called border-styles in case we will have more elements with the same effect. Simply apply it to all elements to get this kind of border.
Remembar that this is CSS3 and will not work cross browsers, because neither border-radius nor box-shadow is fully supported!
I have an entertainment blog with a lot of pictures. Can someone please help me with a code that auto-numbers the pictures inside a post? (eg: www.chive.com, www.acidcow.com)
This is my CSS for pictures if it helps for anything...
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 0px solid $(image.border.color);
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);}
Im extremely newbie in SCSS (or anyother kinda of coding rs) was just playing sass, then I stopped in a problem.
I was trying to use a mixing for multiple shadows to a box-shadow, how we all know in the tradicional css, it should be like that:
box-shadow: 0 1px 1px #333, 0 0 10px #222
Then I've coded this mixin:
#mixin set_shadow($shadows){
-moz-box-shadow:$shadows;
-webkit-box-shadow:$shadows;
box-shadow:$shadows;
}
and the result was almost what I wanted:
-moz-box-shadow: "0px 1px 1px black, 0px 0px 3px black";
-webkit-box-shadow: "0px 1px 1px black, 0px 0px 3px black";
box-shadow: "0px 1px 1px black, 0px 0px 3px black";
Buuut... sadly..
The quotes don't allow code works
How can I parse a string param in .scss (SASS), or one way to remove the quotes from the resulting css?
It seems like the unquote() function is what you are looking for:
#mixin set_shadow($shadows){
-moz-box-shadow: unquote($shadows);
-webkit-box-shadow: unquote($shadows);
box-shadow: unquote($shadows);
}
h1 {
#include set_shadow("0 1px 1px #333, 0 0 10px #222");
}
Alternatively, you can use variable arguments. And then pass an unquoted list of shadows.
#mixin set_shadow($shadows...){
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
h1 {
#include set_shadow(0 1px 1px #333, 0 0 10px #222);
}
Is there a way to make an outer glow in Firefox using a CSS :focus rule? (similar to what Chrome already has)
You could add a -moz-box-shadow (or just box-shadow if you are only interested in Firefox 4 and later) for your :focus rule. You can add glow of various degrees using that.
You can do the same thing like this:
HTML:
<button id="a">click</button>
CSS:
button{
background:#f7f7f7;padding: 0 .5em;
height: 2.0833em;
border: 1px solid #CCC;
color: black;
background: #F6F6F6;
background-image: -moz-linear-gradient(top,white,#EFEFEF);
background-image: -webkit-gradient(linear,left top,left bottom,from(white),to(#EFEFEF));
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=white,endColorStr=#EFEFEF);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
overflow: visible;}
button:hover{
box-shadow:0 0px 3px #999;
-webkit-box-shadow:0 0px 3px #999;
-moz-box-shadow:0 0px 3px #999;
}
Check on jsfiddle: http://jsfiddle.net/naveed_ahmad/LZGq6/
This can be done by multiple shadows:
CSS
color: #000;
background: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
see example 5.5:
http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/