Category: Web design
-
Implementing a Browser-Window Fullscreen Video
—
Learn how to display a video in full browser view without taking over the entire monitor
-
ScrollyVideo.js
—
in Web designResponsive 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
—
in Web designUsato 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
—
in Web designDue 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
—
in CSShttps://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…
-
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.
-
A Complete Guide to calc() in CSS
—
CSS has a special calc() function for doing basic math. In this guide, let’s cover just about everything there is to know about this very useful function.
-
A Complete Guide to Flexbox
—
in CSSOur comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).
-
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.
-
Native CSS Masonry Layout In CSS Grid
—
There is now a specification for native CSS masonry layout, as part of the Grid Layout spec. In this article, Rachel Andrew explains how it works with the help of a couple of demos you can try out in Firefox Nightly.
-
Approaches for a CSS Masonry Layout
—
Nothing against JavaScript, but it’s understandable we might not want to lean on it for doing layout. Is there anything we can do in CSS directly these days?
-
Packery – Gapless, draggable grid layouts
—
in Web designPackery is a JavaScript library and jQuery plugin that makes gapless and draggable layouts. It uses a bin-packing algorithm to fill in empty gaps. Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in a specific spot, or dragged around. It’s perfect for draggable dashboard and seamless Masonry image galleries.
-
Smush – Optimize Images | Compress and Lazy Load Images | Convert WebP
—
WordPress plugin, preso da https://wordpress.org/plugins/search/lazy+load/