Category: Web design
-
Grid Sizing and How to Size Columns and Rows
when to use fixed units like px, flexible units like fr, and responsive functions like minmax().
-
CSS scrollbars
How 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
Photo 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.…
-
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
Discover 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…
-
Viewport units
Viewport 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…
-
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
Works 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
80 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.
-
Implementing a Browser-Window Fullscreen Video
Learn how to display a video in full browser view without taking over the entire monitor
-
ScrollyVideo.js
Responsive scrollable videos without obscure video encoding requirements. Compatible with React, Svelte, Vue, and plain HTML.
-
Lightship website – Communication Arts
Locomotive, Manual and Studio Malvah created a grand, immersive e-commerce experience ahead of this vehicle company’s new electric RV model’s production. Technology: The Lightship website was developed on our open-source Charcoal CMS, while Locomotive Boilerplate was used to provide a solid foundation. To add interactive and engaging elements, we employed Locomotive Scroll for scrolling animations such as parallax effects, as…
-
How to fix “Headers already sent” error in PHP
Usato per le pagine deck di mwindaacademy.com Turning on output buffering should make the problem go away; all output after the call to ob_start is buffered in memory until you release the buffer, e.g. with ob_end_flush.
-
Login page, 2 approcci
Due approcci diversi provati per la pagina delle presentazioni Mwinda: L’approccio con javascript includeva la password in un file .js e quindi non era sicuro. L’approccio con PHP molto più sicuro e facile (un unico file)
-
CSS-Only Lightbox
https://webdesignerhut.com/pure-css-image-lightbox .lightbox { /** Hide the lightbox */ opacity: 0; top: -100%;}.lightbox:target { /** Show lightbox when it is target */ opacity: 1; outline: none; top: 0;}
-
A new volcanic era – CNN
But in another part of Iceland, scientists and engineers are hoping to harness magma’s immense power to solve the planet’s biggest problem.
-
::before / ::after
The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. Every browser that supports the double colon (::) CSS3 syntax also supports just the (:) syntax, but Internet Explorer (IE) 8 only supports the single-colon, so for now, it’s recommended to just use the single-colon for…