CSS-only shadow-scrolling effect

Developer
Twikito
Size
3,062 Kb
Views
42,504
  1. CSS-only shadow-scrolling effect Previews
  2. CSS-only shadow-scrolling effect HTML Codes
  3. CSS-only shadow-scrolling effect CSS Codes

How do I make an css-only shadow-scrolling effect?

Scrolling shadows by @kizmarh and @leaverou. Only works in browsers supporting background-attachment: local; & CSS gradients. Degrades gracefully.. What is a css-only shadow-scrolling effect? How do you make a css-only shadow-scrolling effect? This script and codes were developed by Twikito on 11 September 2022, Sunday.

CSS-only shadow-scrolling effect Previews
IQ Test

CSS-only shadow-scrolling effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS-only shadow-scrolling effect</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* =============================================== * Scrolling shadows by @kizmarh and @leaverou * Only works in browsers supporting background-attachment: local; & CSS gradients * Degrades gracefully * Original code http://lea.verou.me/2012/04/background-attachment-local/ =============================================== */
html { background: #B0D1E5; font: 120% sans-serif; color: #5AD; }
h1 { text-align: center; }
.scrollbox {	overflow: auto;	width: 300px;	max-height: 250px;	margin: 50px auto; padding: 20px;	background:	/* Shadow covers */	linear-gradient(white 30%, rgba(255,255,255,0)),	linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,	/* Shadows */	radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),	radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;	background:	/* Shadow covers */	linear-gradient(white 30%, rgba(255,255,255,0)),	linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,	/* Shadows */	radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),	radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;	background-repeat: no-repeat;	background-color: white;	background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;	/* Opera doesn't support this in the shorthand */	background-attachment: local, local, scroll, scroll;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>CSS-only shadow-scrolling effect.</h1>
<div class="scrollbox"> <p>Not enough content to scroll.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed justo enim. Proin faucibus nisl leo, ut lacinia est rhoncus at.</p>
</div>
<div class="scrollbox"> <p>Ah! Scroll below!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed justo enim. Proin faucibus nisl leo, ut lacinia est rhoncus at. Mauris viverra ligula nec arcu tincidunt elementum. Suspendisse non elit nibh. Nulla rhoncus nisi sem, id venenatis lorem sodales vel. Nam pharetra libero at neque malesuada, sed placerat magna fermentum. Ut iaculis luctus sapien, fringilla tempus tortor bibendum sollicitudin. Ut at fringilla sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ac aliquet sapien. In nec viverra felis. Sed varius, velit ac ullamcorper porta, nisi justo vulputate urna, eu fermentum est magna quis nisi. Morbi arcu elit, tempor eu enim in, ornare mattis felis.</p>	<p>The end!</p>	<p>No shadow there.</p>
</div>
</body>
</html>

CSS-only shadow-scrolling effect - Script Codes CSS Codes

/* =============================================== * Scrolling shadows by @kizmarh and @leaverou * Only works in browsers supporting background-attachment: local; & CSS gradients * Degrades gracefully * Original code http://lea.verou.me/2012/04/background-attachment-local/ =============================================== */
html { background: #B0D1E5; font: 120% sans-serif; color: #5AD; }
h1 { text-align: center; }
.scrollbox {	overflow: auto;	width: 300px;	max-height: 250px;	margin: 50px auto; padding: 20px;	background:	/* Shadow covers */	linear-gradient(white 30%, rgba(255,255,255,0)),	linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,	/* Shadows */	radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),	radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;	background:	/* Shadow covers */	linear-gradient(white 30%, rgba(255,255,255,0)),	linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,	/* Shadows */	radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),	radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;	background-repeat: no-repeat;	background-color: white;	background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;	/* Opera doesn't support this in the shorthand */	background-attachment: local, local, scroll, scroll;
}
CSS-only shadow-scrolling effect - Script Codes
CSS-only shadow-scrolling effect - Script Codes
Home Page Home
Developer Twikito
Username Twikito
Uploaded September 11, 2022
Rating 3
Size 3,062 Kb
Views 42,504
Do you need developer help for CSS-only shadow-scrolling effect?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Twikito (Twikito) Script Codes
Name
Tooltip with pseudo-element
Lightbox without JS, with lazy load
Flexible Google-style loader with CSS
Full page table inside the grid
Image with hover CSS3 effect and bottom overlay
Easy CSS3 checkboxes and radio buttons
Input focus effect with only CSS
Summary with pseudo-element
Realistics radio buttons with only css
LavaLamp effect with CSS
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!