Tag: css
-
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.…
-
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.
-
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…
-
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.
-
::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…
-
The Shapes of CSS
—
CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals. We also get…
-
Codepen Challenges
—
Challenges are fun opportunities for leveling up your skills by building things. Each week, you’ll get a new prompt surrounding a monthly theme to riff on. The best Pens get picked and featured on the homepage!
-
Bricklayer.js
—
in Web designBricklayer is a Lightweight and Independent Pinterest-like Cascading Grid Layout Library.
-
Creating Fluid Typography with the CSS clamp() Function
—
In this article, we’ll dig into how to use the CSS clamp() function to scale the size of text across a range of device sizes.