Category: Web design
-
Framer: Custom CSS in overrides
—
In Framer overrides you can’t directly “attach a CSS file”, but you can inject CSS into the page from the override. Option 1 (best): Inject a <style> tag once
-
How to Add an Override in Framer
—
Applying the override to a Framer Component Now that you’ve written your override, it’s time to connect it to an element or a Framer Component in your design. Using Pre-Made Framer Overrides Multiple online libraries provide free pre-made overrides that you can copy and paste directly into your project (including those available on our site).…
-
How to add a custom class to an element
—
To add a custom class, you’ll need to use an override that modifies the element’s className property. Overrides let you extend or adjust an element’s behavior without changing its core structure.
-
CSS scrollbars
—
in Web designHow To Always Show Scrollbars with CSS?https://www.geeksforgeeks.org/css/how-to-always-show-scrollbars-with-css/ How to move scrollbar from left to right in csshttps://stackoverflow.com/questions/17060845/how-to-move-scrollbar-from-left-to-right-in-css?noredirect=1&lq=1 Hide scroll bar if not neededhttps://stackoverflow.com/questions/18716863/css-hide-scroll-bar-if-not-needed Set overflow-y property to auto, or remove the property altogether if it is not inherited.
-
Add Lazy Loading to Background Images with CSS
—
in Web designPhoto by DALL·E (AI-generated illustration) Website speed isn’t just a technical detail — it’s a major factor in user experience and SEO performance. A slow-loading page can make visitors leave before they even see your content. Most developers already know how to lazy load regular images using the loading=”lazy” attribute.But here’s the catch: CSS background images don’t support native lazy loading.…
-
Add Advanced CSS Styling to Framer Code Components
—
in FramerFramer code components are powerful, but they have one limitation: you can’t include separate CSS files. This becomes problematic when you need to style pseudo-elements or use vendor-specific properties that don’t work with inline styles. The solution is straightforward: create a multiline string variable for your CSS styles and inject it using a style tag.…
-
Lazy Loading in WordPress: Lazy Load Images, Videos, and More
—
Lazy loading defers offscreen images, videos, and iframes until needed, reducing unnecessary requests. This eases pressure on bandwidth and processing, helping the browser manage the main thread and critical rendering path more efficiently. When implemented properly, it improves First Contentful Paint and often Largest Contentful Paint by prioritizing above-the-fold content.
-
WordPress Infinite Scroll: No Plugins, Pure Code
—
in Web designDiscover how to implement WordPress infinite scroll without plugins. Learn AJAX setup, lazy loading, and caching strategies for better performance. Address browser compatibility, pagination conflicts, and SEO concerns. Enhance user experience with hybrid solutions and customization options for your WordPress theme.
-
Cover Flow with Modern CSS: Scroll-Driven Animations in Action
—
Today, we can recreate this effect on the web using only HTML and CSS, thanks to advancements like CSS scroll-driven animations. Modern CSS to the Rescue: Scroll Snap & Scroll-Driven Animations Fast-forward to today: modern CSS has evolved to handle interactive animation patterns that previously required JavaScript. Two CSS features in particular make a pure-CSS…
-
Animating between variants on scroll (Scroll variants)
—
in FramerTrigger smooth transitions between component states as visitors move through the page
-
Property Controls
—
in FramerProperty Controls allow users to pass properties (or props) to a code component through the Framer interface. When a user selects a code component on the canvas, its Property Controls are visible on the properties panel. As a component author, it’s up to you to decide which Property Controls to add and what options they…
-
Framer Code Components and Code Override
—
in FramerCreating components in Framer is a breeze. It’s also extremely powerful. However, if you really need to go beyond the pixels and make something custom, you’ll need to venture into the space of “Code Components & Overrides”. They are amazing as they completely remove the ceiling of what you can achieve in Framer by adding…
-
Responsive Animations with Framer Motion (Media queries in Framer)
—
in FramerUsing media queries in javascript Responsive Animation with Variants Responsive Framer Motion with CSS Variables
-
The only video you need to learn Framer scroll animations
—
in FramerYou’ll discover how to set up sticky positioning, plan your animation timeline, and execute the animation using Framer’s scroll transform effect.
-
Viewport units
—
in CSSViewport units aren’t perfect. On mobile browsers, the “viewport” can shift when the address bar appears or disappears, meaning your perfectly calculated 100vh section might jump unexpectedly. Also, text sized in vw can become unreadably small on tiny screens—or gigantic on ultra-wide monitors. The workaround? Combine viewport units with other constraints. For example: Dynamic Viewport Units Dynamic viewport units…
-
Create a CMS Gallery Slideshow in Framer
—
in FramerFramer University article (non chiaro). Demo su X
-
Horizontal Scrolling Effect
—
in FramerThe demo clearly demonstrates how to set up a horizontal scrolling section on your Framer website. About the resource This effect leverages two key features of Framer. Remix project
-
Music Player Widget Interaction in Framer
—
in FramerThis is a music player widget interaction component recreated in Framer, original work by Vaun Blu.
-
Play Sound On Click
—
in FramerThis is a demo file that shows you how to create a component that plays sound when you click the element.
-
Updates – Overlay in CMS
—
in FramerAdd the ability to add Overlays to content in a CMS Collection List.
-
Updates – Workshop
—
in FramerTurn ideas into working components just by describing them. No code. No setup. Just a quick chat.
-
Scroll Animations
—
in FramerWe are thrilled to introduce our new feature in Framer: Scroll Animations!
-
10 parallax scrolling examples to inspire your web design
—
Framer’s built-in tools let you create a parallax effect directly on the canvas of your website without having to code.
-
Splt – A text splitter that just f*cking works
—
in Web designWorks with plain CSS and Javascript libraries.Explore the easiest text-splitting library around.
-
Basics of CSS Blend Modes
—
Multiply is a nice and useful one, but there is also: screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. And also normal which reset it.
-
Sara Soueidan – Blog
—
in Web design80 articles on Web UI engineering covering project case studies, thought process, front-end strategy, techniques and best practices, focused on HTML, CSS, SVG, accessiblity, and everything in between.