Videos

colourful desi vibes only 🌹in @paulmiandharsh

Yorkshire Puddings in Germany

me vibe kr rai thi🤓shooting for @deeeclothing, launching new collection on 8th december✨

Create Apple’s Blurry Header in WordPress! 🚀 (Step-by-Step Tutorial)

Hello everyone! Welcome to my tutorial. My name is Ferdy, and today, I'll walk you through creating a sleek header like the one on Apple's website, where elements in the background appear blurry as you scroll. We will recreate this effect in WordPress using a fantastic free theme: Bloxy. This theme is my go-to for projects like this, but you can follow along with any theme that allows custom CSS!

I'll demonstrate how I captured Apple's header as a reference using the Go Full Page extension for Google Chrome, which allows me to save full-page screenshots as PNGs. I'll also show you how to extract SVGs, like Apple's logo, with the SVG Grabber extension.
Setting Up in WordPress with the Bloxy Theme

I'll start with my website and guide you through a few preparations to keep things straightforward. You’ll learn how to access and edit the header using the Bloxy Customizer, select a logo, adjust font and color, and create a minimalist look similar to Apple's. Creating the Sticky Header with a Transparent Background

A key part of Apple's design is the sticky header that changes as you scroll. I'll walk you through enabling sticky functionality in the Bloxy theme, adjusting transparency settings, and ensuring your header retains a smooth transition.
Applying the Blurry Background Effect Using Custom CSS

I'll share a custom CSS code that creates the iconic blurry backdrop. I’ll also show you how to experiment with various transparency and color settings, helping you achieve the ideal effect for your site. If you'd like to try creating custom blur effects, I’ll introduce you to CSS Gloss, a great tool for customizing CSS filters.
Making Adjustments for Different Screen Sizes

Ensuring that your design works seamlessly across devices is essential. I'll demonstrate how to tweak colors, font sizes, and layout elements to ensure the header looks great on tablets and smartphones.
Final Touches and Testing

After we've set everything up, we'll test the header by scrolling up and down to make sure the blur and sticky functionalities work smoothly. I'll also show you some adjustments you can make if you prefer a darker or lighter header effect.
By the end of this tutorial, you'll be able to create a clean, modern header that replicates the stylish look of Apple's website, complete with a transparent, sticky, and blurry background.

Anzeige | Freaky Freitag in Germany 🇩🇪🧍🏼‍♂️🔄 @bbhotels_de #bbhotels

How I prep my skin before a shoot day ⭐️

Plot twist 🇩🇪🌪️