<div class="box"></div>
@import "shadow-scss";
.box {
width: 300px;
height: 120px;
background-color: #ccc;
box-shadow: box-shadow(
$stepX: -10px,
$stepY: 10px,
$count: 5
);
}
<div class="box-3d"></div>
@import "shadow-scss";
.box-3d {
margin-top: 36px;
width: 120px;
height: 120px;
background-color: #ccc;
box-shadow: box-shadow(
$stepX: .5px,
$stepY: -.5px,
$color: #999,
$count: 75
);
}
<div class="box-colors"></div>
@use "sass:math";
@use "sass:color";
@import "shadow-scss";
@function box-color($i, $count) {
@return color.mix(#666, #bbb, math.div($i, $count) * 100%);
}
.box-colors {
width: 300px;
height: 120px;
background-color: #ccc;
box-shadow: box-shadow(
$stepX: -6px,
$stepY: 6px,
$color: get-function("box-color"),
$count: 5
);
}
<div class="box-inset"></div>
@use "sass:math";
@use "sass:color";
@import "shadow-scss";
@function box-color-2($i, $count) {
@return color.mix(#0d8aee, #064474, math.div($i, $count) * 100%);
}
.box-inset {
width: 300px;
height: 120px;
background-color: #2196f3;
box-shadow: box-shadow(
$inset: true,
$stepX: 10px,
$color: get-function("box-color-2"),
$count: 5
)
}
<div class="circular"></div>
@use "sass:math";
@import "shadow-scss";
$radius: 60px;
@function circular-x($i, $count) {
@return $radius * math.cos(math.div($i, $count) * 360deg);
}
@function circular-y($i, $count) {
@return $radius * math.sin(math.div($i, $count) * 360deg);
}
.circular {
margin-top: 54px;
width: 72px;
height: 72px;
border-radius: 50%;
background-color: #2196f3;
box-shadow: box-shadow(
$x: get-function("circular-x"),
$y: get-function("circular-y"),
$count: 6
)
}
<div class="long-text"></div>
@import "shadow-scss";
.long-text {
color: #666;
font-size: 90px;
font-family: Arial;
font-weight: 900;
padding: 0 0 12px 0;
text-shadow: text-shadow(
$x: -.5px,
$y: .5px,
$color: #ccc,
$stepX: -.5px,
$stepY: .5px,
$count: 60
);
}
<div class="text-3d"></div>
@use "sass:math";
@use "sass:color";
@import "shadow-scss";
@function text-3d-blur-radius($i, $count) {
@return $i * 4px;
}
@function text-3d-color($i, $count) {
@return color.mix(#999, #eee, math.div($i, $count) * 100%);
}
@function text-3d-blur-color($i, $count) {
@return color.mix(rgba(0, 0, 0, .2), rgba(0, 0, 0, .05), math.div($i, $count) * 100%);
}
.text-3d {
color: #fff;
font-size: 100px;
font-family: Arial;
font-weight: 900;
text-shadow: text-shadow(
$stepY: 1px,
$color: get-function("text-3d-color"),
$count: 12
), text-shadow(
$y: -3px,
$stepY: 3px,
$blur-radius: get-function("text-3d-blur-radius"),
$color: get-function("text-3d-blur-color"),
$count: 5
);
}
<div class="plastic"></div>
@use "sass:math";
@import "shadow-scss";
@function plastic-x($i, $count) {
$r: $i % 9;
@if($r == 0) {
$r: 9;
}
@return (5 - $r) * .7px;
}
@function plastic-y1($i, $count) {
@return math.ceil(math.div($i, 7)) * 1px - 4px;
}
@function plastic-y2($i, $count) {
@return math.ceil(math.div($i, 6)) * 1px;
}
.plastic {
font-family: "Pacifico";
color: #fff;
font-size: 100px;
text-shadow: text-shadow(
$y: 1px,
$stepY: 1px,
$color: #ccc,
$count: 6
), text-shadow(
$y: 10px,
$stepY: 1px,
$blur-radius: 10px,
$color: rgba(0, 0, 0, .04),
$count: 6
), text-shadow(
$x: get-function("plastic-x"),
$y: get-function("plastic-y1"),
$color: red,
$count: 120
), text-shadow(
$x: get-function("plastic-x"),
$y: get-function("plastic-y2"),
$color: darkred,
$count: 150
);
}
<div class="outline"></div>
@import "shadow-scss";
@function outline-x($i, $count) {
@return if($i == 1 or $i == 4, -1, 1) * 1px;
}
@function outline-y($i, $count) {
@return if($i < 3, -1, 1) * 1px;
}
.outline {
color: #fff;
font-size: 90px;
font-family: "Poppins";
font-weight: 900;
text-shadow: text-shadow(
$x: get-function("outline-x"),
$y: get-function("outline-y"),
$count: 4
);
}
<div class="navbar">
<a href="#!" class="item">
<div class="item-main">
<svg viewBox="0 0 24 24"><path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg>
</div>
</a>
<a href="#!" class="item">
<div class="item-main">
<svg viewBox="0 0 24 24"><path d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z" /></svg>
</div>
</a>
<a href="#!" class="item">
<div class="item-main">
<svg viewBox="0 0 24 24"><path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z" /></svg>
</div>
</a>
<a href="#!" class="item">
<div class="item-main">
<svg viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" /></svg>
</div>
</a>
</div>
@use "sass:math";
@import "shadow-scss";
.navbar {
margin-top: 18px;
display: flex;
background: #000;
height: 72px;
border-radius: 12px;
.item {
.item-main {
position: relative;
display: flex;
background: #000;
top: 0;
left: 0;
width: 72px;
height: 72px;
transition: top .3s, left .3s, box-shadow .3s, background .3s;
svg {
margin: auto;
fill: #fff;
height: 36px;
}
}
&:first-child .item-main {
border-radius: 12px 0 0 12px;
}
&:last-child .item-main {
border-radius: 0 12px 12px 0;
}
}
$h: math.floor(math.div($navbar-item-count, 2));
$a: if($navbar-item-count % 2 == 0, 0, -1);
@for $i from 1 through $navbar-item-count {
$left: 0;
$z-index: 0;
@if($i <= $h) {
$left: -1px * $max-shift * math.div(($h - $i + 1), $h);
$z-index: $i;
} @else if($i >= $navbar-item-count - $h + 1) {
$left: 1px * $max-shift * math.div(($i - $h + $a), $h);
$z-index: $navbar-item-count - $i;
}
.item:nth-child(#{$i}) {
.item-main {
z-index: $z-index;
}
&:hover {
.item-main {
background: #2196f3;
left: $left;
top: -1px * $max-shift;
box-shadow: box-shadow(
$color: #0a6ebd,
$stepX: math.div(math.div($left, 1px), $max-shift) * -1px,
$stepY: 1px,
$count: $max-shift
);
}
}
}
}
}