Who likes the flat design, especially in the website. Shadow is a more underrated recipe in the website, we don't talk much about it but it deserves greater attention.
I'll go into more detail on light and shadow and how to improve them later, but for now, let's look at how we can create a shadow around anything.
Four rules for CSS box-shadow
box-shadow: h-offset v-offset | blur-radius | spread-radius color;Horizontal offset: We also know it as offset-x. A positive value creates a shadow on the right side of the box, while a negative value creates a shadow on the left.
Vertical offset: We also know it as offset-y. A positive value creates a shadow on the bottom side of the box, while a negative value creates a shadow on the top.
.bottom-right-shadow {
box-shadow: 10px 10px rgba(0,0,0,0.2);
}
.top-left-shadow {
box-shadow: -10x -10px rgba(0,0,0,0.2);
}
We can manipulate the above values and make the bottom left shadow or top right.
Blur radius: It produces a fuzzy shadow. When the value is 0, the shadow is hard edged;
however, when the value is increased, the shadow becomes more diffused.
There are no negative numbers allowed.
See the Pen Box shadow CSS by Elpeeda (@Mahe76) on CodePen.
Spread radius: Shadow draws as the same size as an element but we can change the size of the shadow with spread radius, It causes the shadow to spread out in all directions.
Positive numbers force the shadow to grow by the specified radius. The shadow shrinks when the value is negative.
there is one notice point is that when offset and blur values are "0" and only spread radius specified,
it will create a solid colored border around an object.
See the Pen Box shadow - spread radius by Elpeeda (@Mahe76) on CodePen.
Color: We specify the color of the shadow here. If the color isn't specified, text color is used instead.
Inner Box Shadow In CSS
Inner box shadow is commonly used to casts an offset shadow on the canvas to make it appear as if the object has been cut out of it and shifted behind.
By using the 'inset' keyword we can dramatically change the appearance from the outer shadow to an inner shadow. it draws in the background.
box-shadow: h-offset v-offset | blur-radius | spread-radius | color inset;When we see the syntax of inner box shadow it is the same as we use for an outer shadow.
The difference is that the positive value of h-offset and x-offset create top-left inner shadow, while negative value creates bottom-right inner shadow.
See the Pen Inner box shadow all side & one side CSS by Elpeeda (@Mahe76) on CodePen.
Multiple Box Shadow
Box shadow property allows us to create multiple shadows, we can provide the list with comma-separated.
The shadows are applied one by one from front to back, with the first shadow on top and the rest beneath it.
For numerous outside shadows, we use offset, opacity, and spread syntax, while for multiple inner shadows, we use the 'inset' keyword.
Note: shadows have no influence on the layout and may overlap the shadows of neighboring boxes;
they also do not cause scrolling or enlarge the scrollable region.
See the Pen Multiple box shadow CSS by Elpeeda (@Mahe76) on CodePen.
Tips for making perfect shadow
The shadow on our page can be used to add realism and visual interest, as well as make buttons interactive. It also gives the piece a 3D look and elevates it slightly off the page.
Here is some information that will help you understand how to use shadows appropriately in a web page.
Light and Shadow
UX designers understand the notion of light and shadow extremely well, but coders do not, which is why I am discussing this topic here-
In the actual world, a light source casts a shadow that is blocked by the object itself; the same principle may be used in web design.
We utilise a random effect and adjust the length till we like it, similar to what I did in my demo above.
In the actual world, we don't do that. We can determine the position of an imaginary light source and construct a shadow based on it.
If we are utilizing more than one effect, it is recommended that we utilise the same effect for all of them so that they complement each other.
Soft shadow in CSS
When you look at other good designs, you'll find that they use soft shadow. Why is that?
We don't want our shadow to shout out to users, "Hey look here, I'm a shadow" because it would be unattractive. We create the illusion by increasing opacity and letting it whisper.
On the web in most cases, we illustrate shadow by providing only y-offset.
Layered box-shadow
We already know that shadow can improve visual impression, but how can we improve shadow? The second way is to apply many layers of the same color
with a diffusing alpha value. We can manipulate the illusion of lighting and darkness using the stacking technique.
See the Pen Soft shadow CSS by Elpeeda (@Mahe76) on CodePen.
If you want to learn more about soft and smooth shadows, I recommend reading this post. Smoother & sharper shadows with layered box-shadows
Elevation
Shadows can provide the impression of depth or distance, we called it elevation.
Elevation has the ability to identify the elements if it is closer to us, by applying a larger shadow to make elements rise to the top of a layout and stand out,
Conversely, if the element is closer to the surface, a small shadow at the edge gives the impression that it rises slightly above the surface.
opacity and color shadow
Shadows come in a variety of colors, not only grey. If we have a color background grey shades will not look mature.
By using the same color tones with opacity, we may improve the quality.
We can specify any value but we should provide alpha color so we can adjust its value and make it transparent.
Final Words -
Shadows are not for decoration it has the purpose to serve, so overdoing it will make your website ugly.
0 Comments:
Post a Comment