drop-shadow-converter
v2.0.0
Published
Convert Photoshop Drop Shadows to CSS3 Box & Text Shadows - See more at: http://www.melanieceraso.com/psd-to-css3/
Downloads
5
Maintainers
Readme
#drop-shadow-converter Convert Photoshop Drop Shadows to CSS3 Box & Text Shadows - See more at: http://www.melanieceraso.com/psd-to-css3/ Use original photoshop drop shadow in your less or scss.
##Less
@import "../less/drop-shadow-converter";
/* just color */
div {
.dropShadowConverter(#123);
box-shadow: @boxShadow;
text-shadow: @textShadow;
}
/* opacity */
div {
.dropShadowConverter(#000, @opacity: 25%);
box-shadow: @boxShadow;
text-shadow: @textShadow;
}
/* distance */
div {
.dropShadowConverter(#000, @distance: 10px);
box-shadow: @boxShadow;
text-shadow: @textShadow;
}
/* distance and angle */
div {
.dropShadowConverter(#000, @angle: 45, @distance: 10px);
box-shadow: @boxShadow;
text-shadow: @textShadow;
}
/* spread and size */
div {
.dropShadowConverter(#000, @spread: 15, @size: 15px);
box-shadow: @boxShadow;
text-shadow: @textShadow;
}
/* all together */
div {
.dropShadowConverter(#123, @angle: 45, @distance: 10px, @spread: 15, @size: 15px, @opacity: 25%);
box-shadow: @boxShadow;
text-shadow: @textShadow;
}
##SCSS
// math functions are not included in sass
@import "../scss/mathfunctions";
// import converter
@import "../scss/drop-shadow-converter";
/* just color */
div {
box-shadow: drop-shadow-converter(#123);
text-shadow: drop-shadow-converter(#123, $is-text-shadow: true);
}
/* opacity */
div {
box-shadow: drop-shadow-converter(#000, $opacity: 25%);
text-shadow: drop-shadow-converter(#000, $opacity: 25%, $is-text-shadow: true);
}
/* distance */
div {
box-shadow: drop-shadow-converter(#000, $distance: 10px);
text-shadow: drop-shadow-converter(#000, $distance: 10px, $is-text-shadow: true);
}
/* distance and angle */
div {
box-shadow: drop-shadow-converter(#000, $angle: 45, $distance: 10px);
text-shadow: drop-shadow-converter(#000, $angle: 45, $distance: 10px, $is-text-shadow: true);
}
/* spread and size */
div {
box-shadow: drop-shadow-converter(#000, $spread: 15, $size: 15px);
text-shadow: drop-shadow-converter(#000, $spread: 15, $size: 15px, $is-text-shadow: true);
}
/* all together */
div {
box-shadow: drop-shadow-converter(#123, $angle: 45, $distance: 10px, $spread: 15, $size: 15px, $opacity: 25%);
text-shadow: drop-shadow-converter(#123, $angle: 45, $distance: 10px, $spread: 15, $size: 15px, $opacity: 25%, $is-text-shadow: true);
}