← Back to Gallery
The Scribble Pad Sidebar
Live Preview
A skeuomorphic 'Notepad' themed sidebar designed to look like a physical legal pad or spiral notebook. It uses CSS linear gradients to create realistic ruled paper lines and a red margin line. The sidebar features a 'binder spine' with punched holes and uses handwritten typography for an authentic analog feel. The layout is compact for desktop previews while remaining fully responsive for mobile viewports.
Features
- Dynamic ruled paper background using CSS gradients
- Skeuomorphic binder spine with punched-hole effects
- Handwritten Google Fonts (Architects Daughter) for a personal touch
- Highlighter-style active states for navigation items
- Responsive slide-in animation for mobile devices
- Shadow stacking to simulate depth and physical paper
Uses
- Creative portfolio navigation
- Personal journaling or diary applications
- To-do list and productivity tools
- Educational or student-focused web portals
Benefits
- High visual engagement through familiar physical metaphors
- Clear visual hierarchy using analog design cues
- Lightweight implementation without external images (all CSS)
- Unique branding that stands out from standard flat UI designs
Techniques Used
Repeating linear gradients for ruled lines, inset box-shadows for skeuomorphic depth, CSS transitions for smooth toggle effects, and Flexbox for precise alignment of binder holes.
Frequently Asked Questions
How can I synchronize the line-height of the Architects Daughter font with the CSS linear-gradient background to ensure text always sits perfectly on the ruled lines?
To maintain alignment, you must set the CSS line-height of the text elements to match the background-size property of the repeating-linear-gradient used for the lines. For example, if the gradient repeats every 28px, setting the font-size to 18px and line-height to 28px ensures each line of handwritten text rests directly on the blue ruled rule without drifting vertically.
What CSS technique is used to render the binder spine's punched holes without adding extra SVG assets or DOM nodes?
The punched-hole effect is generated using a repeating-radial-gradient on a ::before pseudo-element. By defining a transparent circle center followed by a sharp color stop for the paper color, the CSS creates a 'mask' effect. A secondary box-shadow applied to the spine container provides the subtle inner-bevel that gives the holes a 3D recessed appearance.
How does the 'Shadow Stacking' property achieve the physical appearance of a thick legal pad rather than a flat sheet?
We utilize a multi-layered box-shadow approach where several shadows are stacked with increasing offsets and decreasing opacities. The first few layers use small 1px offsets with solid gray colors to simulate the physical edges of paper sheets, while the final layer uses a larger blur radius (15px-20px) and lower alpha transparency to provide the soft ambient occlusion shadow beneath the entire pad.
Can the 'Highlighter' active state be customized to use a rough, non-uniform edge instead of a standard rectangular selection?
Yes, the highlighter effect is achieved by applying a background-color with an rgba value and a CSS clip-path or a border-radius with '80% 20% 75% 25% / 20% 85% 30% 70%' values. This 'blobby' radius, combined with a slight 2-degree rotation, mimics the organic, imperfect stroke of a real felt-tip marker over the sidebar's navigation links.
How is the red vertical margin line implemented so it remains fixed while the content area scrolls horizontally on narrow viewports?
The red margin line is defined as a specific 2px wide linear-gradient layer within the background-image property. By setting its background-attachment to 'local', the margin line will scroll vertically with the text content, but by using a fixed pixel-based background-position (e.g., 40px 0), it remains at a consistent horizontal offset from the 'binder spine' regardless of the viewport width.