I wanted to create a responsive, filterable photo gallery with lightbox using CSS and JavaScript. And this is the result its a smooth gallery and looks slick with lightbox and offcource the power of CSS.

I needed some Javascript for the filters and lightbox but it stays fast and simple. You can take the code and use it for your own project and modify it if you want.

See the Pen Responsive lightbox gallery slideshow by marcello (@tofjadesign) on CodePen.

The main aspects of this timeline are CSS, scroll reveal and the Christmas theme. Additionally, gradients play a significant role, as they contribute to the ambiance of the background and can enhance the theme's atmosphere.

Libraries are utilized for functionalities such as the snow feature, which can be toggled on and off. Similarly, a library is employed for scroll reveal, along with the necessary JavaScript to ensure everything operates smoothly. While using libraries often offers the simplest solution, there are instances where maintaining full control and handling everything independently may be preferred.

Nonetheless, I've created this simply for enjoyment; it may not serve a practical purpose, but engaging in such projects can enhance your skills in CSS and JavaScript.

See the Pen timeline with scroll reveal by marcello (@tofjadesign) on CodePen.

I regularly participate in the Codepen challenge (CPC). This time, the task was to create something in the bento style, and here's what I came up with, among other things. Codepen challenges are a fun way to challenge yourself and improve your coding skills. What I particularly enjoy is the diverse interpretations and executions that people come up with for a Codepen challenge.

Before diving in, let me provide an explanation for those unfamiliar with what "bento" is and its connection to CSS. The term "CSS Bento" is derived from "bento box," a traditional Japanese lunchbox consisting of multiple compartments for serving various dishes. In the context of CSS (Cascading Style Sheets), "CSS Bento" refers to a technique where web developers divide their CSS code into different modules or compartments, akin to the compartments of a bento box.

This approach of segmenting CSS into modular pieces aids in organizing and maintaining the code, making it easier to make changes and troubleshoot issues. It also promotes better code reusability and allows for defining specific styles for different parts of a website or application without them interfering with each other.

CSS Bento is often used in larger projects requiring complex styling, such as websites, web applications, and frameworks. By adopting a modular approach, developers can better structure and manage the CSS code, making it easier to maintain and expand large and complex projects. This technique contributes to a more efficient development workflow and fosters better collaboration among team members.

See the Pen cpc-bento by marcello (@tofjadesign) on CodePen.

Mo7amed El DmrDash, created some awesome animated buttons. The nice that he did tho, is that he created the button with only CSS. With the use off the

::before and :after pseudo-elements

is allot posible these days no need for Javascript here. Check out how he acomplished this wihout the use off Javascript.

See the Pen animated buttons | adavanced by MO7AMED EL DMRDASH (@mo7amedk7alid29) on CodePen.

I wanted to create a simple yet stylish login form, where I mainly played with border-radius. Additionally, I utilized box-shadow and only four colors if you include the background color.

I used :root for defining colors, although I see its applications, it might not be necessary for this specific purpose. Therefore, I wouldn't use it this way again. Since it's a multi-step form, I'm using JavaScript to navigate to the next step of the form.

Feel free to adopt and use this form as is, or modify it to suit your own ideas.

See the Pen Signup in steps by marcello (@tofjadesign) on CodePen.

I wanted to create a responsive, filterable photo gallery with lightbox using CSS and JavaScript. And this is the result its a smooth gallery and looks slick with lightbox and offcource the power of CSS.

See the Pen responsive, filterable photo gallery by marcello (@tofjadesign) on CodePen.