DEV Community: Ahmod Musa

The Opposite Machine — Infinite CSS Marquee · Counter-Rotating Orbits · No JS

Ahmod Musa — Thu, 02 Apr 2026 08:43:05 +0000

The Opposite Machine — Infinite CSS Marquee · Counter-Rotating Orbits · No JS

CSS Glassmorphism Card with Neon Glow — Pure CSS, No JS

Ahmod Musa — Mon, 23 Mar 2026 05:33:32 +0000

Clean glassmorphism card with animated neon border glow. Drop into any dark-theme project — customize colors via CSS variables in under 2 minutes. No JavaScript required.

💼 Need this customized? → fiverr.com/ahmodmusa 🌐 More components: ahmosmusa.com

Auto-Dismiss Toast Notification — Pure HTML CSS JS, No Libraries

Ahmod Musa — Mon, 16 Mar 2026 15:23:34 +0000

Lightweight, accessible toast alert system. Auto-dismisses with progress bar. Supports success, error, warning, info types. Zero dependencies — drop into any project instantly. 💼 Need this customized? → fiverr.com/ahmodmusa 🌐 More components: ahmosmusa.com

Liquid Glass UI 2026 — CSS @property Morphing Cards, Zero JavaScript

Ahmod Musa — Fri, 13 Mar 2026 18:09:49 +0000

Liquid glass morphing cards built with pure CSS — zero JavaScript. Features CSS @property animated conic-gradient spinning borders, hover shine sweep via --shine-x / --shine-y custom properties, backdrop-filter refraction depth, SVG feTurbulence grain overlay, and staggered sparkline bars — all in CSS only.

Built by Ahmod Musa — Premium UI Components 💼 Hire me on Fiverr: https://www.fiverr.com/ahmodmusa/ 🌐 Portfolio: https://ahmosmusa.com

Auto-Dismiss Toast Notification — Pure HTML CSS JS, No Libraries

Ahmod Musa — Fri, 13 Mar 2026 17:31:09 +0000

CSS Glassmorphism Card with Neon Glow — Pure CSS, No JS

Ahmod Musa — Fri, 13 Mar 2026 17:10:22 +0000

Clean glassmorphism card with animated neon border glow. Drop into any dark-theme project — customize colors via CSS variables in under 2 minutes. No JavaScript required.

💼 Need this customized? → fiverr.com/ahmodmusa 🌐 More components: ahmosmusa.com

Creative Chevron Border-Shape Navigation Menu • Pure CSS Breadcrumb Style

Ahmod Musa — Sat, 07 Mar 2026 07:36:26 +0000

Modern breadcrumb-style navigation menu using CSS corner-shape (bevel for triangular/chevron corners) + border-radius. Chrome-forward experimental look with perfect fallback.

Features: • Pointy/beveled corners on active item • Chevron separators via pseudo-elements • Hover animations & smooth transitions • Fully responsive & accessible

Created by Ahmod Musa
Portfolio → https://ahmodmusa.com
Custom UI / creative menus / animations → https://www.fiverr.com/s/xX32B24

navigationmenu #breadcrumb #cssmenu #cornershape #chevron

Build a Cyberpunk Glitch Effect with Pure CSS (No JS) 🤖

Ahmod Musa — Wed, 21 Jan 2026 15:37:11 +0000

We all love that futuristic Cyberpunk 2077 aesthetic. The neon lights, the scanlines, and of course—the Glitch Effect.

Usually, developers rely on heavy JavaScript libraries (like GSAP or anime.js) to achieve this. But today, I want to show you how to do it with 100% Pure CSS.

Here is what we are building:

The Logic Behind the Glitch 🧠
To make this work without JavaScript, we use two simple tricks:

data-text Attribute: We pass the text string in HTML so CSS can access it via content: attr(data-text). This creates a "Ghost Layer" (duplicate text) without bloating the DOM.

clip-path: We use this to "slice" the ghost layer into random strips.

@keyframes: We animate the slice positions rapidly to create the jitter/glitch effect.

Here is the full, copy-paste ready code.

Stop Bloating Your WordPress Site: Register CPTs with Code (No Plugin Needed)

Ahmod Musa — Tue, 20 Jan 2026 13:53:00 +0000

We need to talk about our "Plugin Addiction" in the WordPress community.

As developers, we often prioritize speed of development over the quality of the codebase. The biggest culprit? Custom Post Type UI (CPT UI).

Don't get me wrong—it’s a great tool for non-coders. But if you call yourself a WordPress Developer or Engineer, you shouldn't rely on a GUI wrapper to execute a core WordPress function.

The Engineering Problem 🛠️

When you use a plugin to register a "Portfolio" or "Services" post type, here is what happens under the hood:

Database Queries: The plugin stores your CPT settings in the wp_options table. WordPress has to query this on every page load.
Admin Bloat: It adds a menu item and settings pages that your client doesn't need to see (and might break).
Dependency Hell: You are adding another plugin to your update list for a feature that should be native to the theme.
The Native Solution (The functions.php Way) ⚡

Registering a post type requires one function: register_post_type().

By moving this logic to your theme (or a site-specific plugin), you gain:

Version Control: You can track changes in Git.
Performance: PHP execution is faster than database queries.
Immutability: Clients can't accidentally delete the post type from the WP Dashboard.
"But I don't want to write the labels array manually..."

I get it. Writing out 'add_new_item' => 'Add New Project' 20 times is boring.

That's why I created a Production-Ready Snippet that you can just copy and paste.

It includes: ✅ Full support for Gutenberg (Block Editor) (show_in_rest => true). ✅ Custom Dashicons. ✅ Clean Admin Labels.

You don't need to reinvent the wheel. Just copy the code, drop it into your functions.php, and you have a fully functional Portfolio section in 30 seconds.

Get the Code Snippet 👨‍💻

I have hosted the full, clean code snippet on my personal blog to keep it updated.

Clean HTML Attributes Tool – Remove Data Tags & Metadata

Ahmod Musa — Sat, 17 Jan 2026 17:02:17 +0000

This lightweight tool is designed to clean messy HTML attributes (like data-path-to-node or data-index-in-node) often added by AI editors like Gemini or visual builders. It ensures your code is clean, professional, and ready for WordPress.

Why use this?

SEO Friendly: Strips unnecessary clutter for faster page loading.

WordPress Ready: Perfect for pasting clean content into Gutenberg or Classic editors.

One-Click Copy: Instant results with a simple user interface.

Created by: Ahmod Musa Explore more tools and resources: https://ahmodmusa.com

If you're a WordPress professional or developer, this utility will save you minutes of manual cleaning for every article!

Stop Manually Coding WordPress Child Themes (Automate It in 10 Seconds)

Ahmod Musa — Mon, 05 Jan 2026 04:36:41 +0000

If you are a WordPress developer or a site maintainer, you know the drill. You need to customize a theme, but you can't touch the parent theme files because the next update will wipe everything out.

So, you have to create a Child Theme.

The Old Way (The Boring Way) 🐢
Manually creating a child theme is repetitive. You have to:

Create a new folder.

Create a style.css and write the specific header comments.

Create a functions.php and write the wp_enqueue_scripts function to load the parent styles correctly.

It’s not "hard" code, but it’s boilerplate. And writing boilerplate code is a waste of time. Plus, if you mess up the dependency in the PHP function, your styles won't load correctly.

The New Way (The Smart Way) 🚀
I built a simple tool to automate this entire process. Instead of copy-pasting code snippets from the Codex/Documentation every time, you can generate a standard, bug-free child theme in seconds.

Meet the WordPress Child Theme Generator.

How it Works
It takes the tedious work out of the equation.

Enter your Parent Theme Slug (e.g., astra, twentytwentyfour).

Name your Child Theme.

Click Generate.

The tool instantly gives you a ready-to-install .zip file containing:

✅ A properly formatted style.css

✅ A correct functions.php (with proper enqueuing)

Why use this tool?
Speed: It takes literally 10 seconds.

Standards: It follows the official WordPress coding standards.

Safety: No bloatware, just the necessary files.

Try it out
Next time you start a project, save yourself those 15 minutes of setup time.

👉 Generate Your Child Theme Here

Let me know if you find it useful for your workflow!

I Built a Cyberpunk Neon Button with Real-Time Reflection (0% JS)

Ahmod Musa — Fri, 02 Jan 2026 14:42:31 +0000

In web design, buttons are usually the most boring part of a page. But they are also the most important part—it's where the user takes action.

I recently challenged myself to create a "High-End Cyberpunk Button" that looks like it belongs in a AAA game UI.

The Goal?

Neon Glow: It needs to look like a light source.
Floor Reflection: It must cast a reflection on the ground.
No JavaScript: It must run on 100% Pure CSS for 60FPS performance.

The Result (Live Preview)

Here is a sneak peek of what I built. Notice how the reflection reacts instantly when you hover?

The Logic Behind the Magic

I didn't use any heavy libraries or image files. The entire effect relies on two core CSS concepts:

Multiple Box Shadows: To create the "hazy" neon look, I layered multiple shadows with different blur radiuses.
The perspective Property: The reflection isn't a duplicate element in the HTML. It's a CSS pseudo-element (::before) that I flipped upside down and blurred using filter: blur().

By keeping it pure CSS, this button loads instantly and doesn't block the main thread.

Get the Source Code

I have documented the complete step-by-step tutorial, including the HTML structure and the exact CSS properties used for the glow and reflection, on my personal blog.

You can copy-paste the code directly into your project.

👉 Get the Full Source Code Here (AhmodMusa.com)

I regularly post about breaking the limits of CSS. Follow me for more creative UI experiments!