DEV Community: Adeyele Paul

The Hidden CSS Tricks That Facebook Developers Actually Use

Adeyele Paul — Wed, 30 Oct 2024 12:08:47 +0000

Ever wondered how Facebook manages to create such smooth, responsive interfaces that work flawlessly across millions of devices? While their tech stack is complex, many of their most impressive UI features rely on clever CSS techniques that often fly under the radar. Let's go through some of these hidden gems that Facebook's developers leverage to build their platform.

1. Content-Visibility: The Performance Game-Changer

One of Facebook's biggest challenges is rendering thousands of posts, comments, and interactions without crushing browser performance. Their secret weapon? The content-visibility property:

.feed-post {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

This seemingly simple declaration tells the browser to skip rendering off-screen content, dramatically improving initial page load times. The contain-intrinsic-size provides an estimated height, preventing layout shifts as users scroll. Facebook's implementation of this technique has reportedly reduced rendering time by up to 50% in post-heavy feeds.

2. Variable Fonts for Brand Consistency

Facebook's typography looks consistently polished across different weights and sizes, but they're not loading multiple font files. Instead, they use variable fonts with custom properties:

:root {
  --fb-font-weight: 400;
  --fb-font-stretch: 100%;
}

.dynamic-text {
  font-variation-settings: 
    'wght' var(--fb-font-weight),
    'wdth' var(--fb-font-stretch);
  transition: font-variation-settings 0.3s ease;
}

.dynamic-text:hover {
  --fb-font-weight: 600;
}

This approach allows for smooth animations between font weights and widths while keeping the bundle size small. It's particularly noticeable in their reaction animations and comment emphasis effects.

3. Container Queries: The Responsive Design Secret

Facebook's UI components need to work everywhere - from tiny mobile screens to ultra-wide monitors. Their solution? Container queries:

.post-card {
  container-type: inline-size;
  container-name: post;
}

@container post (min-width: 700px) {
  .post-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
  }
}

@container post (max-width: 699px) {
  .post-content {
    display: flex;
    flex-direction: column;
  }
}

This allows components to respond to their parent container's size rather than the viewport, enabling truly modular design that works in any context - whether it's in the main feed, a modal, or a sidebar.

4. The Scroll Snap Illusion

Ever noticed how smoothly Facebook's stories and carousel content snaps into place? They use scroll snap alignment with some extra tricks:

.story-container {
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE/Edge */
}

.story-container::-webkit-scrollbar {
  display: none; /* Hide scrollbar in Chrome/Safari */
}

.story-item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex: 0 0 auto;
}

The magic comes from combining this with touch gesture handling:

.story-container {
  overscroll-behavior-x: contain;
  touch-action: pan-x pinch-zoom;
}

This creates that perfect, app-like feeling when scrolling through stories, even in a browser.

5. The Invisible Performance Boost

Facebook uses GPU acceleration strategically by creating new stacking contexts for animated elements:

.animated-element {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

However, they're careful to apply these properties only when needed:

.animated-element {
  @media (prefers-reduced-motion: no-preference) {
    transform: translateZ(0);
    will-change: transform;
  }
}

This ensures smooth animations while respecting user preferences and device capabilities.

6. Custom Properties for Theme Management

Facebook's dark mode implementation is particularly clever, using CSS custom properties with HSL colors:

:root {
  --fb-surface-alpha: 1;
  --fb-surface-base: 0 0% 100%;
  --fb-text-primary: 0 0% 0%;
}

[data-theme="dark"] {
  --fb-surface-base: 0 0% 0%;
  --fb-text-primary: 0 0% 100%;
}

.surface {
  background-color: hsla(var(--fb-surface-base), var(--fb-surface-alpha));
  color: hsl(var(--fb-text-primary));
}

This approach allows for dynamic opacity adjustments and smooth transitions between themes while maintaining contrast ratios.

7. The Aspect Ratio Trick

For media-heavy content, Facebook maintains aspect ratios without layout shifts using modern CSS:

.media-container {
  aspect-ratio: 16 / 9;
}

@supports not (aspect-ratio: 16 / 9) {
  .media-container::before {
    float: left;
    padding-top: 56.25%;
    content: '';
  }

  .media-container::after {
    display: block;
    content: '';
    clear: both;
  }
}

This progressive enhancement approach ensures consistent layouts across all browsers while gracefully falling back on older ones.

Conclusion

While these techniques might seem simple in isolation, their true power comes from how Facebook combines and applies them strategically. The key takeaways are:

Performance optimizations should be invisible to users but noticeable in metrics
Progressive enhancement ensures features work across all platforms
Modern CSS features can replace many JavaScript solutions
Strategic use of GPU acceleration and content-visibility can dramatically improve performance
Container queries and custom properties enable truly modular, maintainable code

Remember, these techniques are most effective when used judiciously and with performance monitoring in place. Facebook's success comes not just from using these CSS features, but from knowing exactly when and where to apply them for maximum impact.

The HTML Tags That Will Make Your SEO Explode

Adeyele Paul — Tue, 22 Oct 2024 23:59:23 +0000

Think of HTML tags as secret messages to search engines - while your visitors see a beautifully rendered webpage, search engines are reading between the lines, analyzing these tags to understand what your content is about.

In this guide, we'll explore the HTML elements that can dramatically improve your search engine visibility,so let's ride together.

1. The Title Tag: Your First Impression

Just as you wouldn't go to a job interview without rehearsing your elevator pitch, your webpage shouldn't go live without a carefully crafted title tag. The title tag is your website's first impression on both search engines and potential visitors.

<title>Artisanal Coffee Roasters | Small-Batch Coffee in Portland | Bean & Brew</title>

Best Practices:

Keep titles between 50-60 characters
Include your primary keyword near the beginning
Add your brand name at the end
Use vertical bars (|) or dashes (-) to separate concepts

Think of your title tag as a newspaper headline - it needs to be compelling enough to grab attention while accurately representing the content that follows.

2. Meta Description: Your Search Result Sales Pitch

While not directly affecting rankings, the meta description is your search result's elevator pitch. It's like the blurb on the back of a book - it needs to convince readers to click through.

<meta name="description" content="Discover hand-roasted, small-batch coffee from Portland's premier artisanal roasters. Enjoy free shipping on orders over $30 and weekly coffee subscriptions. Visit our downtown tasting room.">

Pro Tip: Think of the meta description as a 155-character advertisement. Include:

Your main keyword
A clear value proposition
A call to action
Unique selling points

3. Heading Tags: Creating a Clear Content Hierarchy

Heading tags (H1-H6) are like the table of contents in a book - they help both readers and search engines understand how your content is organized.

<h1>Portland's Finest Small-Batch Coffee Roasters</h1>
<h2>Our Signature Roasts</h2>
<h3>Ethiopian Yirgacheffe</h3>
<h3>Colombian Single Origin</h3>
<h2>Coffee Subscription Services</h2>
<h3>Monthly Tasting Box</h3>

Hierarchy Best Practices:

Use only one H1 tag per page
Keep headings nested logically
Include relevant keywords naturally
Make headings descriptive and meaningful

4. Image Alt Text: Making Visual Content Searchable

Alt text is like having a friend describe a photo to someone who can't see it. It serves both accessibility and SEO purposes.

<img src="coffee-roasting.jpg" 
     alt="Master roaster carefully monitoring small-batch coffee beans in a copper roasting drum"
     width="800" 
     height="600">

Alt Text Tips:

Be specific and descriptive
Include relevant keywords naturally
Keep it under 125 characters
Avoid keyword stuffing

5. Schema Markup: Speaking Search Engines' Language

Schema markup is like providing search engines with a detailed instruction manual for your content. It helps them understand the context and relationships between different elements on your page.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Bean & Brew Artisanal Coffee",
  "image": "https://www.beanandbrew.com/store-front.jpg",
  "description": "Portland's premier small-batch coffee roasters",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Coffee Lane",
    "addressLocality": "Portland",
    "addressRegion": "OR",
    "postalCode": "97201"
  },
  "openingHours": "Mo-Su 07:00-19:00"
}
</script>

6. Semantic HTML Elements: Context is King

Modern HTML5 semantic elements help search engines better understand your content's structure and purpose.

<article>
  <header>
    <h1>The Art of Coffee Roasting</h1>
    <time datetime="2024-03-15">March 15, 2024</time>
  </header>

  <section>
    <h2>Understanding Roast Profiles</h2>
    <!-- Content here -->
  </section>

  <aside>
    <h3>Quick Roasting Tips</h3>
    <!-- Related content -->
  </aside>
</article>

Key Semantic Elements:

<article> for self-contained content
<section> for thematic grouping
<nav> for navigation menus
<aside> for related content
<footer> for page or section conclusions

7. Link Elements: Building Strong Connections

Internal and external links help search engines understand relationships between content and establish topic authority.

<link rel="canonical" href="https://www.beanandbrew.com/coffee-roasting-guide">
<a href="/brewing-methods" title="Complete Guide to Coffee Brewing Methods">brewing guide</a>

Linking Best Practices:

Use descriptive anchor text
Implement canonical tags for duplicate content
Create logical internal linking structures
Use relevant external links to authoritative sources

Measuring Success

Remember that implementing these tags is just the beginning. Monitor your success using tools like:

Google Search Console for search performance
Screaming Frog for technical SEO audits
SEMrush or Ahrefs for keyword tracking

Conclusion

Think of these HTML tags as the foundation of your SEO strategy - they're the building blocks that help search engines understand and properly index your content.

By implementing these elements thoughtfully and monitoring their impact, you can create a strong technical foundation for your website's search engine visibility.

Remember: Good SEO is like tending a garden - it requires initial setup, ongoing maintenance, and patience to see results. Start with these fundamental HTML tags, and you'll be well on your way to improved search engine visibility.

My Very First React Project: Building a FAQ Accordion Component

Adeyele Paul — Mon, 20 May 2024 08:47:46 +0000

After like three days of learning a few basics in React, I tested my newfound knowledge by doing a Frontend Mentor challenge.

Here's the challenge:

At first, my plan was to use plain JavaScript and HTML for the challenge, as usual. But then I had this lightbulb moment: "Wait a minute, why not try building this with my new React knowledge?" I mean, what better way to solidify what I've learned about components, props, JSX, and styling React apps than by actually creating something this functional?

So, I tried it, and congratulations to me—I finished my very first React project from Frontend Mentor!

Here's mine:

Let me show you how I did it...

Understanding the challenge && challenges I faced

First of all, I had to sit down and understand what I was about to build, since this was my first time building something from scratch in React.

Nothing too hard here; it was just an FAQ accordion, something I could close my eyes to and build with pure vanilla JavaScript, but this was React! 😔

The goal of the project was to show and hide an answer when those plus and minus buttons are clicked.

It was here that I discovered while trying to build it that I needed useState to achieve that toggling magic, but unfortunately, I haven't learned anything about it yet, so I had to learn it on YouTube from Web Dev Simplified. After much explanation and coding along, I finally got what it was and how to use it.

Another challenge I faced was that at first, I couldn't make that two-face background, but after much trial and error and a little frustration, I did it.

Now let me walk you through my building process:

Setting the project:

With a clear understanding of what I needed to do, it was time to set up the project. I decided to use the Create React App.

I opened my terminal and ran the following command:



npx create-react-app faq-accordion

After some time, it created my faq-accordion folder with all the files and dependencies needed for a React application.

However, instead of using the default file structure, I started from scratch by deleting some of the unnecessary files, code, and folders that, of course, I wouldn't need for this small project. I also choose to keep things simple and code all my React components inside the index.js file.

Inside the index.js file, I imported the React and ReactDOM libraries and also my index.css:



import React from 'react';
import ReactDOM from 'react-dom';
import "./index.css"

// my codes goes here

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <MyApp />
  </React.StrictMode>
);

Then I went on with setting my folders right and creating a simple myApp component that returns "Hello world" to make sure everything was working fine.



function MyApp(){
  return <h1>Hello world</h1>;
}

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<MyApp />);

After which, I ran npm start in the terminal, which opened my default browser and gave me a preview of what I had coded: "Hello world", confirming that everything is working.

With everything set it was time to start writing my components. This was where the joy was.

Building the Components

As I was already familiar with React's components-based setup and other core things like props and JSX, I decided to take a structured approach to building my FAQ Accordion part.

First, I created an array of objects to store the questions and their answers. This would make it easy to map over the array and dynamically render the questions and answers in the UI.

I made it in this format for all the questions and answers:



const queAns = [
  {
    question: "What is Frontend Mentor, and how will it help me?",
    answer: "Frontend Mentor offers real coding challenges to help developers improve their frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for all levels and ideal for building a portfolio."
  },
  // ...
];

Having this data setup in place allowed me to focus on the component logic and showing without having to hard-code the questions and answers directly in the component.

With the data ready, I broke down the UI into three main components: Header, Main, and Question.

Header:

This one seemed straightforward—just a simple section to display a title for the FAQ. But even with something basic, I practiced creating a functional component and returning JSX.



function Header() {
  return (
    <header className="header">
      <img src="/svgs/icon-star.svg" alt="star icon" />
      <h1>FAQs</h1>
    </header>
  )
}

Then I updated myApp component by calling the Header component and main component that I will build later:



function MyApp() {
  return (
     <main className="container">
      <Header />
      <Main />
     </main>
  );
}

I know, not groundbreaking stuff. But for a React newbie, just being able to create and show a component felt like a small win!

Main component

Now, this is where things got interesting. The Main component would render the list of questions and answers. That's why I created the array of objects so as to map through it.



function Main() {
  return (
    <section>
      {queAns.map((que) => (
        <Question faqObject={que} key={que.question} />
      ))}
    </section>
  )
}

Question

The Header and Main parts were straightforward to create, as I had already understood things like functional components, JSX, and rendering arrays with the map function.

However, the real challenge (and learning chance) came with the Question component, which would handle the core functionality of toggling the visibility of the answer text and other functionalities.

First, I went on to create a global variable for the icons:



const plusIcon = "/svgs/icon-plus.svg";
const minusIcon = "/svgs/icon-minus.svg";

Then created my Question component:



function Question({ faqObject: { question, answer } }) {
  const [currentIcon, setIcon] = useState(plusIcon); //VSCODE automatically imported useState hook for me
  const handleOnClick = () => {
    setIcon(currentIcon === plusIcon ? minusIcon : plusIcon);
  };

  const handleKeyDown = (e) => {
    console.log(e.key);
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      handleOnClick();
    }
  };

  return (
    <div className="faq-box">
      <h4>{question}</h4>
      <img
        className="icon"
        src={currentIcon}
        alt="icon plus"
        onClick={handleOnClick}
        onKeyDown={handleKeyDown}
        tabIndex={0}
        role="button"
        aria-expanded={currentIcon === minusIcon}
      />
      <p className={`answer ${currentIcon === plusIcon ? "hidden" : ""}`}>
        {answer}
      </p>
    </div>
  );
}

While I was familiar with props, the idea of useState was new to me.

At first, I felt a bit lost when I couldn't make that toggling magic and was tempted to go back to vanilla JavaScript. But after asking some questions on ChatGPT, it was then that I discovered I could use useState! And that's what made me to go watch it on YouTube and eventually achieve the code above.

I totally felt like a star…

Before I forget, here's the entire CSS that I was actually coding out as I was building the React components, which made it comfortable to follow through on the original Frontend Mentor challenge:



:root {
  --clr-white: hsl(0, 0%, 100%);
  --clr-main: hsl(292, 42%, 14%);
  --clr-bg: hsl(276, 100%, 97%);
  --clr-gray: hsl(292, 16%, 49%);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  font-size: 1.4rem;
  font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: var(--clr-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 1.5rem;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36vh;
  background-image: url("/public/svgs/background-pattern-desktop.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  max-width: 50rem;
  background: var(--clr-white);
  color: var(--clr-main);
  padding: 2.5rem;
  border-radius: 10px;
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 9999;
}

.header {
  display: flex;
  column-gap: 2rem;
  margin-bottom: 2rem;
}

h1 {
  font-size: 4.8rem;
}

.faq-box {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 3rem;
  row-gap: 1.5rem;
}

.faq-box:not(:last-child) {
  border-bottom: 1.5px solid var(--clr-bg);
  padding-bottom: 1.4rem;
}

h4 {
  font-weight: 700;
  margin: 0.8rem 0;
}

.answer {
  font-size: inherit;
  color: var(--clr-gray);
  grid-column: 1 / -1;
}

.answer.hidden {
  display: none;
}

.icon {
  cursor: pointer;
  width: 2.6rem;
  height: 2.6rem;
}

.icon:hover {
  padding: 0.1rem;
  background-color: var(--clr-bg);
  border-radius: 50%;
}

@media (max-width: 48em) {
  body::before {
    background-image: url("/public/svgs/background-pattern-mobile.svg");
  }

  h1 {
    font-size: 3.2rem;
  }
}

And that's all… My frontend Mentor challenge was totally working as intended.

Lesson learnt:

Building this FAQ thingy was a super awesome learning process for a React newbie like me! Along the way, I hit some road bumps but also had tons of "ah-ha!" moments that taught me valuable stuff moving forward.

This project showed me one important thing: Even if you don't know much about coding languages or frameworks, you can still build really cool stuff.

I also learned how powerful it is to learn on your own. When I didn't understand things like "useState", I didn't give up. Nope! I asked questions, played around, and kept trying until it finally clicked.

Styling with React was tricky too but I kept things nice and simple. Even making that two-toned background wasn't too bad once I figured it out.

You can see my FAQ live right here.

If you're new to React or already an experienced coder, I encourage you to try making stuff like this. Seeing your creation come alive is an incredible feeling that teaches you so much.

So feel free to shower me with compliments, advice, suggestions, or criticisms! I'm all ears because every bit of feedback helps me grow.

How to Create the Perfect Transparent Login Form

Adeyele Paul — Thu, 09 May 2024 18:55:29 +0000

How you design forms with CSS makes a big difference. They can either catch someone's attention in a good way or turn them away

One form style sure to catch eyes is a transparent login. These see-through forms just look sleek and modern. They command focus in a very nice way.

So recently I tried creating this type of attractive form myself using HTML, CSS and some JavaScript. And guess what? I succeeded!

After some work, I ended up with a simple transparent login blending into the background smoothly. No harsh lines or opaque boxes that look bad. Just a clean, integrated experience.

Now I'll walk through every step for coding your own transparent login form. We'll cover the setup, styles, user-friendly touches, everything. It's straightforward when you know how.

After this guide, you will be able to code your own stylish, see-through login form with ease. The steps are simple enough for anyone to understand.

Let's get started!

Step 1: Building the HTML Structure

Let's start by making the key HTML pieces for the login form. First, make a div container for the full-screen background image. Give it the class "fullscreen-container".

<div class="fullscreen-container">
  <!- Our login container will go here ->
</div>

Inside that, create another div with the class "login-container". This will hold the form itself and a heading. Now, in the "login-container", add an h3 element with class "login-title". Put the text "Welcome back" to greet users.

<div class="login-container">
  <h3 class="login-title">Welcome back</h3>
  <!-- our Form structure -->
</div>

Below the header, but inside the login-container, make a form element with your input fields and submit button. For each input (email and password), wrap a label and input in a div called "input-group" just like this:

<form>
  <div class="input-group">
    <label>Email</label>
    <input type="email">
  </div>
  <div class="input-group">
    <label>Password</label>
    <input type="password">
  </div>
  <button type="submit" class="login-button">Sign in</button>
</form>

For the email we used <input type="email">. We also did the same for password but instead of email it's type="password". Finally, a <button> with type="submit", class="login-button", and text "Sign in."

When you finish and load the page, you'll see a basic working login form! Plain for now, but styling will make it look awesome.

Step 2: Style the Background Image

With the HTML structure ready, let's focus on visuals - starting with the full-screen background image. First, the body element has margins by default, preventing images from stretching edge-to-edge. Remove those margins:

body {
  margin: 0;
}

Next, target the .fullscreen-container class and specify your background image URL:

.fullscreen-container {
  background-image: url('https://www.dropbox.com/scl/fi/h8rpjs220906yos05en5g/mountain-wolves.jpeg?rlkey=omnh97cntwh21low438a4uwn3&raw=1');
}

Note: You can get free beautiful background image on site like unsplash and pexels

After setting your background image, make it fill the whole viewport by setting minimum height and width to 100vh and 100vw respectively:

.fullscreen-container {
  min-height: 100vh;
  width: 100vw;
}

Now give it background-size and background-position property and set it to cover and center respectively, so that we can have a perfectly scaled, centered look:

.fullscreen-container {
  background-size: cover;
  background-position: center;
}

Lastly, let's use flexbox to vertically and horizontally center the .login-container inside the .fullscreen-container:

.fullscreen-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

By this time, our background should now fill the entire viewport beautifully, creating a proper setting for the see-through login form.

Step 3: Styling the Login Box

Now that the background looks good, we need to make the main login div itself look really nice too. This nested container holds the login form, so we want it to look pretty and see-through.

First, pick a background color that goes well with your background image.

Then use hsla to set your preferred color, because this will actually lets us easily manipulate and adjust how see-through the background color of our login-container:

.login-container {
  background-color: hsla(201, 100%, 50%, 0.6);
}

Incase you don't know what Hsla stands for, it stands for hue, saturation, lightness, alpha.

The hue is a color circle from 0-360 degrees (201 is bluey-green). Saturation is how intense the color is from 0-100% (100% here is very intense). Lightness is how light/dark the color should be from 0-100% (50% is right in the middle). Alpha is how see-through the color is from a range of 0-1 (0.6 here makes it pretty see-through).

Feel free to play with it, try out different color that could probably blend with your background image. You can also learn more about hsla here: https://www.w3schools.com/cssref/func_hsla.php

Next, put some space around the inside of the box:

.login-container {
  padding: 50px 30px;
}

Now, to make our login-container responsive on any screen, set a percentage width but limit the maximum, just like this:

.login-container {
  width: 50%; /* The div will be 50% of the screen width */
  max-width: 600px; /* But it can't get bigger than 600 pixels wide */
}

So as the browser window gets smaller, the login box will shrink until it hits 600px wide. Then it won't shrink anymore.

These few styles we just applied made the login form look really slick - it has a nice see-through colored background that goes with the image behind it. Plus it's the perfect size on any screen. Next we should style the stuff inside the box!

Step 4: Making the Title Look Okay

Now let's work on the big "Welcome" text at the top that greets people. We want to make some small changes so it really pops out and looks good with the rest of the design.

First, let's make the text white so it shows up nicely against the see-through colored box:

.login-title {
  color: white;
}

To make the text centered, we can align it using text-align:

.login-title {
  text-align: center;
}

By default, the big "Welcome" heading has some space above and below it. Let's remove the space above but keep 40 pixels of space below:

.login-title {
  margin: 0 0 40px;
}

Lastly, make the letters bigger. But we don't want them too thick or dark, so use a regular font weight instead of bold.

.login-title {
  font-size: 2.5em; /* 2.5 times bigger than normal text */
  font-weight: normal; /* Not bold, just regular weight */
}

With just those few styles, the welcome title should now looks really nice!

Step 5: Making the Email and Password Sections Look Nice

Right now, the boxes for typing the email and password are side-by-side. But we want them stacked going up and down instead of across.

Let's use flexbox to fix this:

.input-group {
  display: flex;
  flex-direction: column;
}

This simple code makes the email box go above the password box. Not next to each other anymore.

Next, add a tiny bit of space between those two boxes:

.input-group {
  margin-bottom: 20px;
}

This puts a small 20 pixel gap under each box. So there's a little room between the email part and password part.

Adding that tiny gap makes it way clearer where one section stops and the next starts. Awesome!

Step 6: Making the Email and Password Labels Look Cool

The Email and password labels need to look pretty cool too. We want them to match the see-through colored box style.

First, make the label text white so it shows up nicely:

.input-group label {
  color: white;
}

Next, make the label text thinner and a bit bigger than normal:

.input-group label {
  font-weight: lighter;
  font-size: 1.2em;
}

Lastly, add a tiny 7 pixel gap between the labels and the text boxes below them:

.input-group label {  
  margin-bottom: 7px;
}

Just those few little changes make the labels look good enough! The white, slightly bigger, thinner text looks super modern. And that tiny gap gives a nice breathe between the labels and boxes.

With the labels looking this slick, the whole form is really coming together nicely. Just the actual text input boxes to style up next!

Step 7: Making the Text Boxes Look Awesome

Right now the boxes for typing your email and password just look boring and plain. Let's spice them up to match the cool see-through vibe!

First, get rid of all the default browser styles on those boxes:

.input-group input {
  background: none;
  border: none; 
  outline: none;
}

This clears everything so we can rebuild the styles exactly how we want.

Next, give the boxes a slightly see-through bluish background color:

.input-group input {
  background-color: hsla(201, 30%, 95%, 0.4);
}

The "hsla" part makes a bluey color that's sort of see-through.

Then make the text inside bigger and give it some nice breathing space:

.input-group input {
 font-size: 1.5em;
 padding: 10px;
}

For the border, we'll use a subtle dark blue color with slightly rounded corners:

.input-group input { 
  border: 1px solid hsl(201, 6%, 20%);
  border-radius: 5px;
}

Almost done! Let's make the text white and a bit thinner:

.input-group input {
  color: white; 
  font-weight: lighter;
}

Lastly, a cool trick - when you click in the box, the border gets a brighter blue:

.input-group input:focus {
  border-color: hsl(201, 50%, 50%);
}

Boom! Those input boxes look absolutely better now than when we started. The colors, spacing, everything fits the translucent theme perfectly.

Step 8: Making the Login Button Look good

The login button is the most important part - it's what people click to actually sign in. So we have to make this button look good enough.

First up, clear out all the default browser button styles:

.login-button {
  background: none;
  border: none;
  outline: none;  
}

Next, we'll give it a slightly see-through bluish background color:

.login-button {
  background-color: hsla(201, 100%, 50%, 0.1);
}

That "hsla" color code makes a nice calm blue that's just a bit see-through.

Then make the button nice and big, with slightly rounded corners:

.login-button {
  padding: 10px 30px;
  border-radius: 5px;
}

To match the text boxes, give it that same subtle dark blue border:

.login-button {
  border: 1px solid hsl(201, 6%, 20%);
}

For the text itself, make it bigger, white, and slightly thinner:

.login-button {
  color: white;
  font-size: 1.5em;
  font-weight: lighter;
}

We'll put a little 20px gap between the button and text boxes too:

.login-button {
  margin-top: 20px;
}

Last part - when you hover over the button, it gets a brighter blue background!

.login-button {
  cursor: pointer;
}

.login-button:hover, 
.login-button:focus {
background-color: hsla(201, 50%, 50%, 0.3); /* Brighter blue bg */
border-color: hsl(201, 50%, 50%); /* Brighter blue border */
}

If you've been following along, here should be the final outcome of our transparent login form:

That's all

We made a really simple pretty see-through login form with HTML and CSS! By styling it step by step, we were able to make our basic html into something that looks awesome.

So if you haven't been following along, open your code editor and try out what you learned here! Once you get it, go crazy with designs and make it your own.

Awesome design doesn't have to be complicated. If you work hard on the basics, you can make websites that look great and are fun to use.

How to create a responsive video background in HTML and CSS

Adeyele Paul — Wed, 01 May 2024 14:52:27 +0000

Nowadays, getting people's attention is really important for websites - and one awesome way to do that is by using background video behind some content on your site. But making those videos look perfect on any screen size can be tricky.

Luckily, with some little HTML and CSS tricks, you can make a video background that works great no matter how big or small the screen is.

In this article, I'll explain step-by-step on how to make this super cool video background effect. So stay with me!

Things you may need

To get started with our responsive video masterpiece, we'll need a few key things.

First up, a code editor - anything from bare-bones Notepad to fancy pants Adobe Dreamweaver works. As long as it lets you write HTML and CSS, you're golden.

Next, a modern web browser like Chrome, Firefox, Safari etc. to actually view our handiwork.

And finally, the star of the show - a video file to use as our full-screen background. MP4 format tends to be a safe bet since it plays nice with most browsers.

With those basic tools in our toolkit, we're ready to start writing some code! The process isn't too complex, so follow along.

Step 1: HTML structure

Okay, let's kick things off by coding the HTML bones for our responsive video background

We'll start by making a div to contain both the video itself and the visible page content. Give this div a class name like "fullscreen-video-container" so we can easily style it later in CSS:



<div class="fullscreen-video-container">
  <!-- Our video and text content will live here -->
</div>

Next, drop in the <video> element inside this container. This tag ultimately holds the video file, but first, we'll want to set up a few attributes:



<video autoplay loop muted>
  <!-- We'll plug in the video source next -->
</video>

autoplay - This tells the video to automatically begin playing once loaded, no click required.
loop - When the video finishes, this loops it right back to the start for continuous playback.
muted - Unless you're going for a loud insurgence, keeping things muted is wise.

For our actual video file, we'll use <source> inside the <video> tags:



<source src="https://www.dropbox.com/scl/fi/eg0c3th4vyjnnz09cwxam/22512-328261507_tiny.mp4?rlkey=sk0uvs93a3uby17qbzdx1c3cx&raw=1" type="video/mp4">

Here, src points to our video file's path and type clues the browser into expecting an MP4 video format.

Lastly, our container div needs a spot for the text overlaying the video background:



<div class="fullscreen-video-content">
  <h1>Some Text</h1>
</div>

With these elements mapped out in HTML, we've framed up the foundation to start making our video to be a responsive background!

Step 2: Basic CSS Styles

We've got the HTML ready. Now let's do some CSS magic!

First up, we'll work on that .fullscreen-video-container class. We want the video acting like a background, but in order to prevent unnecessary space we've to do some default setting in our CSS file:



* {
  margin: 0;
  padding: 0;
}

Now, let position the container relatively because we'll absolutely position the video inside:



.fullscreen-video-container {
  position: relative;
}

Next, in order to make the video container fill the whole screen, set width and height to 100vh and 100vw:



.fullscreen-video-container {
  height: 100vh; 
  width: 100vw;
}

The vh(viewport height) and vw(viewport weight) basically mean cover 100% of the viewable screen height and width.

Let's also add overflow: hidden to clip anything spilling outside:



.fullscreen-video-container {
  overflow: hidden;
}

Container done! Onto that <video> element positioning. First we'll absolutely position it relative to it's parent element:



.fullscreen-video-container video {
  position: absolute;
}

Now, set width and height to auto. This respects the video's aspect ratio when filling space:



.fullscreen-video-container video {
  width: auto;
  height: auto;
}

Finally, let's add min-width: 100% and min-height: 100% so that it stretches the video to fill it parent container while keeping the aspect ratio:



.fullscreen-video-container video {
  min-width: 100%;
  min-height: 100%;
}

If you've been following along your background video should look somewhat like this:

Yeah, I know it's not perfectly centered yet, but we'll fix that in step 3!.

Step 3: Centering the video

First, use top and left at 50% to shift the positioning point dead center:



.fullscreen-video-container video {
  top: 50%;
  left: 50%;
}

Now, you will notice that your background video became smaller and shifted to the bottom right:

To fix that use the transform's translate property:



.fullscreen-video-container video {
  transform: translate(-50%,-50%);
}

Lastly, set a z-index to control stacking order compared to other elements:



.fullscreen-video-container video {
  z-index: -1;  
}

This low z-index of -1 will push our video behind everything allowing our main content to come out like the "some text".

Here's the result:

You can see that our background video is perfectly centered, fills the full screen and responsive.But we're not quite done yet. We still need to handle styling that "Some text" heading text.

Right now it's just a plain h1 element lazily plopped on top of the video. To really make that content pop and complement our gorgeous video backdrop, we'll want to style up the text now.

Step 4: Styling the Content Overlay

We'll start by centering the content horizontally and vertically over the video using flexbox.

Now add this to your fullscreen-video-container:



.fullscreen-video-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Remember in our html file we gave the h1 a parent container of fullscreen-video-content

Now let style it with a clean background behind text:



.fullscreen-video-content {
  background-color: rgba(255,255,255,0.8);
  padding: 30px;
  border-radius: 5px;
}

The rgba value gives a semi-transparent white, so video shows through a bit. Padding and border-radius add nice spacing and rounded corners.

To style the text itself, target the h1 (or whatever element you used):



.fullscreen-video-content h1 {
  font-size: 3rem;
  font-weight: 700;
  color: #333;
}

We increased the font size, added bold weight, and gave it dark gray text color.

And that's it! Content should now center vertically and horizontally over our full-screen video with slick semi-transparent background.

Conclusion

And there you have it - everything you need to know about implementing a seamless, responsive video background with some HTML and CSS!

We started by building out the proper HTML structure - a container div housing our video element and a content overlay. Then it was on to styling that video to behave like a full-screen, ratio-respecting background through clever positioning and some transform trickery.

From there, we brought focus to the overlay content by centering it vertically and horizontally with flexbox. A slightly transparent background helped the text pop against the moving video backdrop.

This technique is completely responsive out-of-the-box. Resize the container, flip to mobile, go full widescreen - that video background will effortlessly adapts while keeping its crisp quality.

If you get stuck or have any other questions along the way, just drop a comment below. I'm always happy to help!

7 ways you can center a div

Adeyele Paul — Wed, 24 Apr 2024 08:05:22 +0000

Throughout my coding journey, I have seen a lot div center differently.

Each time I look at a codebase or watch a YouTube tutorial, I'm often met with different techniques used to center divs.

And you know what? That's actually really helpful!

I remembered when I was first learning CSS, centering a div was so frustrating for me. I would spend so much time trying to get it right, only to end up with a div that looked completely off-center.

It drove me crazy, but seeing all these different methods makes me confident that I can really rely on anyone at anytime.

And yes, having multiple ways to center a div gives you options to find the right approach for your project's needs.

So here are the 7 ways to easily center a div, of course some of them are quite weird but it still works.

1. Text-align

This one is as straightforward as it gets – just set text-align: center on the parent, and display: inline-block on the child, and voila! Your div is centered horizontally.

<div class="parent">
  <div class="child">Centered Div</div>
</div>

.parent {
  text-align: center;
}

.child {
  display: inline-block;
  background-color: red;
  padding: 20px;
  color: #fff;
}

Here's the result:

2. Margin: auto:

The margin: auto trick is a classic - It is common to those who prefer a little more control,

Just set margin: 0 auto on your child div, and it'll obediently center itself horizontally within its parent.

<div class="parent">
  <div class="child">Centered Div</div>
</div>

.parent {
  text-align: center;
}

.child {
  display: block;
  margin: 0 auto;
  background-color: red;
  padding: 20px;
  width: 200px;
  color: #fff;
}

The result:

3. Position: absolute with transform:

Now, this one's a bit more advanced, but it also does the trick. It seems that this particular technique is quite common to senior devs.

This method will accurately center your div both horizontally and vertically within its parent container.

<div class="parent">
  <div class="child">Centered Div</div>
</div>

.parent {
  position: relative;
  height: 500px;
  background-color: red;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ccc;
  padding: 20px;
}

Here's the result:

4. Position: absolute with margin: auto:

Another position: absolute approach, but this time using the margin: auto trick to center the child both horizontally and vertically.

Just set top: 0, bottom: 0, left: 0, right: 0, and margin: auto, and your div will happily sit in the center of its parent container.

<div class="parent">
  <div class="child">Centered Div</div>
</div>

.parent {
  position: relative;
  height: 100vh;
  background-color: #5A4253;
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #ccc;
  padding: 20px;
  width: 200px;
  height: 100px;
}

The result:

5. Grid:

This is actually my favourite, because it's the quickest way to center your divs both horizontally and vertically.

You just need to set place-items: center and all the immediate child elements of that parent will align themselves to the center.

<div class="parent">
  <div class="child">Centered Div</div>
</div>

.parent {
  display: grid;
  place-items: center;
  height: 100vh;
}

.child {
  background-color: #ccc;
  padding: 20px;
}

Result:

6. Flexbox:

Flexbox centering has become second nature to me – it's the method I instinctively reach for when aligning a div.

And this is, of course, the most common approach nowadays. Just set display: flex on the parent, justify-content: center to align horizontally, and align-items: center to align vertically. Boom! Your div is perfectly centered, allowing you to sit back and focus on the other important parts of your project.

<div class="parent">
  <div class="child">Centered Div</div>
</div>

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: #FF7373
}

.child {
  background-color: #ccc;
  padding: 20px;
}

Result:

7. Table-cell with vertical-align:

This technique involves setting display: table-cell and vertical-align: middle on the parent. It's a bit unconventional, but I have seen devs who used this.

<div class="parent">
  <div class="child">Centered Div</div>
</div>

.parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-color: #440A0A;
  height: 300px;
  width: 500px;
}

.child {
  display: inline-block;
  background-color: #ccc;
  padding: 20px;
}

Result:

Wrap up

There you have it, folks! Seven ways to actually center a div!

You'll agree with me that some are straightforward, while others might make your head spin a bit, but that's just part of the fun!

With these techniques centering should now be easy for me and you!!!

I built these 5 types of loading animation in HTML and CSS, which do you prefer?

Adeyele Paul — Mon, 22 Apr 2024 15:00:10 +0000

As a lover of clean UI design and smooth animations, I've always been fascinated by the creative possibilities of the humble loading state. From minimal spinners to energetic shape-shifters, the permutations are endless.

So I recently challenged myself to explore different loading styles and see how many unique yet practical animations I could craft with just HTML and CSS.

After lots of coding,inspiration, doodling, and chromatic experimentation, I landed on this collection of 5 distinctive loading animations to share.

Want to see the 5 cool ones I came up with?

Let's go.

Animation 1: The Minimalist Spinner

Sometimes less is more when it comes to loading animations. This first style keeps things clean and simple with a minimalist spinning line.

Code:

HTML:



<div class="loader">
  <div class="line"></div>
</div>

CSS:



.loader {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 3px solid #FF9900;
  border-radius: 50%;
  border-top-color: transparent;
  animation: rotate 1s infinite linear;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

This uses a div element with a border to create the circle outline, and border-top-color: transparent to leave a gap for the spinning line effect. The animation rotates it 360 degrees for a smooth endless spin.

Result:

Use Cases:
This simple spinner works well in minimal UI designs or tight spacing contexts where you don't want the loading state to be too obtrusive. Its subtle rotation conveys just enough activity without being distracting.

Animation 2: The Bouncing Ball

This next loading animation is fun and bouncy! It creates an infinite loop of a ball bouncing up and down, injecting some delightful movement into an otherwise dull loading period.

Code:

HTML:



<div class="loader">
  <div class="ball"></div>
</div>

CSS:



.loader {
  width: 70px;
  height: 120px;
  margin: 0 auto;
  position: relative;
}

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #255426, #8bba8c);
  position: absolute;
  bottom: 0;
  left: 10px;
  animation: bounce 0.6s ease-in-out infinite alternate;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-70px); }
}

Here I used CSS positioning to place the ball at the bottom initially, and the animation makes it translate (move) vertically between 0 and -70px to create the bounce effect.

Result:

Use Cases:
I think since the bouncing ball loading injects some fun, playful movement that catches the eye - It works well for communicating a lengthier loading process where you want to keep users engaged and interested. That looping bounce just provides that constant reassurance that data is still loading.

Animation 3: The Morphing Blob

This one was quite hard but I pull through. It has that wonderfully organic, amorphous feel to it. A shapeshifting blob seamlessly transitions between different forms in an endless loop.

Code:

HTML:



<div class="loader">
  <div class="blob"></div>
</div>

CSS:



.loader {
  width: 100px;
  height: 100px;
  position: relative;
}

.blob {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #8EC5FC, #E0C3FC);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px rgba(142, 197, 252, 0.5);
  animation: morph 5s linear infinite;
}

@keyframes morph {
  0%, 100% {
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
  }

  33% {
    border-radius: 30% 70% 70% 30% / 30% 29% 71% 70%;
    transform: translate(-50%, -50%) rotate(90deg) scale(1.2); 
  }

  66% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: translate(-50%, -50%) rotate(180deg) scale(0.8);
  }
}

The magic is in the @keyframes animation, where I changed the border-radius and apply different transform values to warp the blob's shape over time. The background gradient and box-shadow create a soft, glowing effect.

Result:

Use Cases:
Use it for situations where you want to convey an active "shape-changing" state, like applying image filters, updating data visualizations, or maybe processing graphic-intensive tasks.

Animation 4: The Pulsing Dots

This loader keeps things simple yet visually engaging with a few pulsing dots creating a rippling, wave-like effect.

The Code:

HTML:



<div class="loader">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

CSS:



.loader {
  width: 100px;
  height: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ABB2B9;
  animation: pulse 1.5s infinite ease-in-out;
}

.dot:nth-child(1) {
  animation-delay: 0s;
  background: #EF476F;
}

.dot:nth-child(2) {
  animation-delay: 0.5s; 
  background: #FFD166;
}

.dot:nth-child(3) {
  animation-delay: 1s;
  background: #06D6A0;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

It's when I coded the pulse animation with the staggered delays, that the magic actually happened. Each dot scaled up and down at different times, creating this cascading pulsing sequence. Varying the dot colors adds extra visual flair.

Result:

Use Cases:
This one can work well when you need something simple that provides subtle visual feedback during shorter loading scenarios. Its clean, minimalist pattern won't overwhelm or distract, but still signals that content is loading. Use it for quick load transitions like pulling data from an API or partial page renders.

Animation 5: The Filling Rotating Square

This loader has an incredibly satisfying fill-up motion that builds anticipation as the square gets closer and closer to completion. I got this design inspiration from a YouTube short and I decided to make my own in what is called steal like an artist.

Code:

HTML:



<div class="loader">
  <div class="fill-box"></div>
</div>

CSS:



.loader {
  width: 50px;
  height: 50px;
  border: 2px solid #333;
  position: relative;
}

.fill-box {
  width: 100%;
  height: 100%;
  transform: rotate(0);
  background: conic-gradient(#39CCCC, #AA66CC, #39CCCC);
  animation: filling 1s infinite linear;
}

@keyframes filling {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

The square outline is created with a div border, while the inner .fill-box uses a rotating conic gradient background to produce the filling animation effect.

Result:

Use Cases:
The square fill loader is bright, bold, and direct - it commands your attention which makes it fit for loading periods where you really want that in-your-face "Watch me load!" experience, like launching an app or game, uploading large files, or processing intensive tasks.

Wrap up

And that's a wrap on all 5 loading animation demos! We covered a range of styles from cool and minimal, to vibrant and playful.

But now I want to know - which one was your favorite? Was it the minimalistic? The cute lil bouncy ball? That shapeshifting, amorphous blob? The simple pulsing dot pattern? Or did that vivid, filling rotating square just scratch your loading animation itch perfectly?

Let me know your top pick in the comments! And of course, feel free to grab any of the code snippets and build your own remixed versions.

The #1 Skill Every Newbie Coder Needs (But Most Are Afraid To Use)

Adeyele Paul — Sat, 13 Apr 2024 08:58:08 +0000

I'm still pretty new to this whole programming world, but there's one tip I've learned already that has been an absolute game-changer: asking questions.

When I first started trying to learn to code, I'll admit I was terrified of looking stupid or getting in over my head.

Any time I got stuck trying to figure something out, my instinct was to just bash my head against it for hours and hours rather than reaching out for help.

I didn't want to bother anyone or have them think I didn't know what I was doing.

Big mistake! Let me save you some pain right now: swallowing your pride and just asking questions is one of the most valuable skills you can develop as a coding newbie.

The Struggle Is Real When You're Learning

Let's keep it real - when you're first diving into programming, everything seems confusing and complicated.

You're being exposed to all these new languages, tools, concepts and problem-solving approaches all at once. It can make your head spin!

For me, issues came up constantly where I had no idea what was going on or why my code wasn't working like I expected.

I'd spend way too much time banging away and getting more and more frustrated, feeling completely stuck.

Eventually I realized - I was making things way harder than they needed to be! Rather than agonizing alone, I needed to take advantage of the experience of other developers around me.

Don't Be Afraid to Admit What You Don't Know

Looking back now, I realize my biggest mistake was being too afraid to admit when I didn't understand something.

I thought asking questions would mean I looked incompetent. But you know what's truly incompetent?...

Staying stuck and spinning your wheels indefinitely because you won't ask for help!

Here's the truth: every single developer, no matter their experience level, has to ask questions constantly in order to learn and improve.

Nobody wakes up one day and suddenly "knows it all." Heck, even the most skilled programmers reach out to others for advice or explanations on new concepts. It never ends!

The sooner you get over the fear of raising your hand, the sooner you'll be able to overcome obstacles and advance your skills.

Asking questions doesn't make you look stupid - it means you're putting in the work, are self-aware about your knowledge gaps, and care about developing your craft.

Those are awesome traits to have!

How to Ask Good Questions

Once you've made peace with being a perpetual question-asker, there are a few tips that can make your questions more effective:

Don't bury the lead - get right to the point! You don't need to say "Hey, can I ask you a question about..." Just cut straight to stating the actual issue at hand.
Provide all the helpful context you can upfront - what you're trying to do, your code, error messages you're getting, what you've tried already. That way the person has everything they need to actually understand what's tripping you up.
If it's something common, do a quick Google or StackOverflow search first. You may find your answer even faster!

But if you do search and still don't understand, definitely ask someone. We've all been there.

Be Patient, Keep Asking Questions

Learning to code can be a long, challenging journey with lots of speed bumps and roadblocks along the way.

It's easy to get flustered and feel like you're never going to "get it." But I'm here to tell you - keep asking questions!

Every question you ask provides an opportunity for you to gain new knowledge.

Every developer you ask has been where you are now and can probably empathize with the struggles you're facing.

By keeping that line of communication open, you'll be constantly filling those gaps in your understanding.

So embrace being a question-asker! Put your pride aside and get comfortable admitting what you don't know yet. In the long run, it'll be one of your biggest assets as you progress on this coding journey.

Goodluck!!!

Creating an animated loading spinner with pure CSS

Adeyele Paul — Mon, 08 Apr 2024 07:24:41 +0000

You know that little loading spinner that shows up whenever a website is loading?

The one that spins around and around, almost hypnotizing you as you impatiently wait for the content to appear?

Yeah, those things. They may seem simple, but creating a smooth, mesmerizing loading animation like that with pure CSS is actually pretty darn cool.

I recently challenged myself to code up one of those animated spinners from scratch, using only CSS animations and styles - no JavaScript tricks allowed.

Why?

Because CSS animations are just plain fun to work with!

They allow you to bring some movement and life to your website components without having to lean on JavaScript.

Here's the final product:

Now, I'm not gonna lie - seeing the final product spin so effortlessly after getting it all coded up gave me a silly sense of accomplishment.

Maybe I need to get out more often?

In any case, I'm going to walk through exactly how I built this living spinner step-by-step.

Our HTML Spinner Markup

Before we can start coding our CSS, we need to lay out the basic HTML elements that will serve as the skeleton for our loading spinner.

Now, I'll be honest - this markup isn't going to win any awards for complexity. It's about as bare-bones as markup gets, consisting of just a few div containers:



<div class="spinner">
  <div class="spinner-text">Loading</div>
  <div class="spinner-sector spinner-sector-red"></div>
  <div class="spinner-sector spinner-sector-blue"></div> 
  <div class="spinner-sector spinner-sector-green"></div>
</div>

See? Told you it was simple! We've got a parent .spinner div that will contain the entire spinner.

Inside that, we have:

A div for our "Loading" text
Three divs for each colored spinning sector

I've given each of the sector divs a secondary class name like .spinner-sector-red to easily identify and style them individually later on.

A little organization never hurt, right?

With our HTML building blocks ready, we can now jump into the fun part - styling and animating these divs into a spinning loading icon!

First up, let's deal with that .spinner parent container...

Centering and Sizing

Okay, now we want the .spinner parent container to be properly size, centered and contained to a perfect circle.

Here's how we'll make that happen:



* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.spinner {
  width: 300px;
  height: 300px;
  position: relative;
}

First up, we apply a global box-sizing: border-box style to all elements.

This makes our dimensions and padding/borders behave consistently across different elements.

Next, we target the body and apply some flex centering!

By setting display: flex, justify-content: center, and align-items: center...

...we make sure our .spinner (and anything else) is vertically and horizontally centered within the full viewport height of 100vh.

With the body flexbox styles in place, our .spinner element will be positioned right in the middle of the screen.

For the .spinner itself, we set an equal width and height of 300 pixels.

This determines the overall size of our circular spinner area. Adjust this value up or down if you want a bigger or smaller loading icon.

Finally, we make the .spinner position: relative. This seems innocent enough, but it's actually a crucial step. Those colored sector divs inside are going to be positioned absolutely within this relative parent.

So we've got our spinner all centered up and properly contained now.

But those inner divs are still unstyled. No spinning, no color, no animation - just some sad, boxed up html.

We need to make these elements!

Shaping the Sectors: Circles, Borders and Colors

With the spinner container set up, it's time to transform those inner divs into the vibrant, circular sectors we need for our animation.

This is where things get a bit more interesting:



.spinner-sector {
  position: absolute;
  width: 100%;
  height: 100%; 
  border-radius: 50%;
  border: 15px solid transparent;
  mix-blend-mode: overlay;
}

.spinner-sector-red {
  border-top-color: lightcoral;
}

.spinner-sector-blue {
  border-top-color: lightblue; 
}

.spinner-sector-green {
  border-top-color: lightgreen;
}

Let's break this down bit-by-bit:

position: absolute - This allows us to absolutely position the sectors inside the relatively positioned .spinner parent. This is the key to getting that overlapping circular layout.
width/height 100% - Making the sectors fill the entire spinner container area.
border-radius: 50% - Applying a 50% border radius to create a circular shape.
border: 15px solid transparent - Using a fat transparent border as a sneaky trick to create just the outer circle perimeter we want. The transparent middle is where we'll rotate through.
mix-blend-mode: overlay - This PDNSensitive property allows the sector colors to overlay and blend when they overlap during animation. It's how we get those awesome combined hues!

Finally, we set the border-top-color for each sector to the respective red/blue/green shades.

Since the transparent border doesn't render any color in the middle, the top border creates those thin colored rings that we want for the spinner segments.

This is how our code looks so far:

Not fancy yet, I know, but we're making progress!

We've now styled those sector divs from sad boxes into circular, colored rings. They're shaping up quite nicely (pun very much intended).

But they're just...sitting there. Frozen in time. We need to harness the true powers of CSS and make these sectors spin!

Luckily, that's where CSS animations really shine. It's...keyframe time!

Spinning the Sectors

The core of any CSS animation is the @keyframes rule.

This allows us to define specific points along an animation sequence that transform the styled element.

For our loading spinner, we want a continuous rotating animation for those colored sector rings.

Here's how we'll animate that circular spin using keyframes:



@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg); 
  }
}

.spinner-sector {
  animation: rotate 1.5s ease-in-out infinite;
}

That @keyframes rule at the top defines the start and end points of the rotation animation we want each sector to follow.

At 0% (from), we start with no rotation transform. Then at 100% (to), we rotate the full 360 degrees to complete one full spin.

With those keyframes set, we can hook up the animation on the .spinner-sector elements themselves using the animation property shorthand.

The rotate value corresponds to our @keyframes name, 1.5s sets the duration to 1.5 seconds, and ease-in-out makes it ease gently into and out of the spin.

The infinite value is what makes this animation run on a continuous loop - no stopping after one spin!

As soon as it hits that 360deg rotation, it resets and keeps on spinning indefinitely.

So, if you coded this up with me so far, you'd see those sector rings animating in a perfect, smooth, endless rotation cycle much like the one above.

But...something's still missing.

If you remember the original loading icon, those sectors aren't all spinning at the same pace.

We need to mix up the speeds and stagger the animations so they create that hypnotic overlapping effect.

Staggering the Spin: Randomizing Animations

Having all three sector rings spinning at the same constant speed is cool and all, but it lacks that extra little something to really grab your attention.

To replicate the hypnotic loading icon we're aiming for, we need to throw in some randomization to how those sectors animate.

Luckily, that's as easy as tweaking a few animation properties for each sector. Check it:



.spinner-sector-red {
  animation: rotate 2.2s ease-in infinite;
}

.spinner-sector-blue {
  animation: rotate 1.6s ease-out infinite; 
}

.spinner-sector-green {
  animation: rotate 2s linear infinite;
}

Instead of applying the same 1.5s ease-in-out animation to every sector, we mix it up with different duration and timing function values.

The red sector has a longer 2.2 second duration with an ease-in timing, meaning it has a slower start before speeding up.

The blue sector clocks in at a snappier 1.6 second pace with an ease-out effect for a faster start.

And the green sector keeps it simple with a 2 second linear animation for constant, unwavering spin speed.

With these randomized animations in place, the sectors are now out of sync - constantly overlapping and unlocking from each other in visually appealing ways as they spin.

But we're still missing one crucial element - the pulsating text indicator in the center to really drive home that "loading..." message.

Not to worry, I've got one more trick up my sleeve for that!

Pulsating the Text

What's a loading icon without some text to let you know...well...that it's loading?

Our spinner is looking great with those staggered, spinning sectors.

But it's missing that pulsating "Loading..." text in the center to really tie the whole animation together.

Adding that fade-in-out text effect is just a few more CSS keyframe rules away:



@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.spinner-text {
  font-size: 2rem;
  animation: pulse 1.5s ease-in-out infinite;
}

This @keyframes rule called "pulse" defines how we want the text's opacity to change over the course of the animation loop.

At 0% and 100%, we keep it fully visible with opacity: 1. But at the 50% midpoint, we fade it down to an opacity of 0.25 to create that subtle pulsating effect.

With those opacity keyframes set, we apply the "pulse" animation to our .spinner-text element, setting the duration to 1.5 seconds with an ease-in-out timing function.

We also bump up that font-size to 2rem so the text has a little more presence.

And just like that, we've got ourselves a beautifully pulsating "Loading..." message fading in and out in the center of our spinning icon!

The final piece of the puzzle to recreate that classic loading animation.

Between the staggered spin speeds, the color blending overlaps, and the pulsating text, this thing is a transfixing masterpiece of CSS animation.

Honestly, I could get lost watching it for hours...which may or may not be a good thing when you're waiting for content to load.

Either way, I hope this step-by-step coding journey has helped demystify how you can create these types of mesmerizing animations using just HTML and CSS!

The key is thinking through each piece - container, shapes, animations - and building up the parts using core CSS principles.

With a few creative tricks and some keyframe magic, you can craft all sorts of living, breathing interfaces.

That's all for now, thank you for following to this point. Wishing you a happy coding career.