How to Make a Folder “Slit” Effect With CSS
When you put something — say a regular sheet of paper — in a manilla folder, a part of that thing might peek out of the folder a little bit. The same sort of thing with a wallet and credit …
When you put something — say a regular sheet of paper — in a manilla folder, a part of that thing might peek out of the folder a little bit. The same sort of thing with a wallet and credit …
There’s a serene warmth to the early evening sunlight peaking through rustling leaves. Artists use dappled light to create a soft, hypnotic effect.
Bedford Dwellings by Ron Donoughe (2013)We can create the same sort of dappled light effect in …
Scroll shadows are when you can see a little inset shadow on elements if (and only if) you can scroll in that direction. It’s just good UX. You can actually pull it off in CSS, which I think is …
My favorite kind of blog post is when someone takes a subject that I’ve spent all of five minutes considering and then says—no!—this is an enormous topic worthy of a dissertation. Look at all the things you can do with …
Why would we need to apply shadows to SVG?
:hover
, :focus
, or :active
) A bona fide CSS trick from Kirupa Chinnathambi here. To match a colored shadow with the colors in the background-image
of an element, you inherit
the background in a pseudo-element, kick it behind the original, then blur and filter it. …
Let’s talk shadows in web design. Shadows add texture, perspective, and emphasize the dimensions of objects. In web design, using light and shadow can add physical realism and can be used to make rich, tactile interfaces.…
Ask a hundred front-end developers, and most, if not all, of them will have used the box-shadow
property in their careers. Shadows are enduringly popular, and can add an elegant, subtle effect if used properly. But shadows occupy a strange …
Drop shadows. Web designers have loved them for a long time to the extent that we used to fake them with PNG images before CSS Level 3 formally introduced them to the spec as the box-shadow
property. I still reach …
Paul Lewis animated a 3D Card Flip. Straightforward enough there, but this needed a shadow element as well:
…The shadow may need to move around or fade, so we need a solution that we can animate with transforms & opacity,
Shadow along the top edge of the website, like this:
body::before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
z-index: 100;
}
…