Gorithm

Transparentizing HTML Elements using CSS Only Part 1

Gorithm — Mon, 26 Feb 2024 13:01:10 GMT

Introduction :

Gorithm is here 👋

Transparentizing (creating a transparency) an element, whether it's html element or even a fontawesome icon, or a logo, could be a frustrating process if you don't understand what you are trying to do or what you'll have to deal with.

How this series is about ?

This Article is the First Part of a 3-parts series that I managed to write about my experience with transparentizing HTML elements using CSS only approach, First part deals with the usage of mix-blend-mode and understanding the difference between each blending mode and how it affects the the overall process of transparentizing and apply this on creating the design of this Article's Cover in action. Second part will deal with implementation of a blurry backdrop beneath the transparent element and how to apply different blend modes and get different results that suits various cases. Third part will deal with Transparent Element's Coloring and using any color as it's background, stroke, or a shadow also it will include implementing animations

Breakdown :

Assume you have a pre-written markup or some basic markup that I'm going to write down here, just make sure that:

Targeted element must have a parent that includes it only, something like a wrapper or a container to it,
Parent background color must be the same as the targeted element
You can clip the targeted element to it's background if you want to apply any kind of background-image, but for this first part make sure it's white or black

Basic Markup Implementation:

Notice the class names that clarify the relation between the elements

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css-transparent-texttitle>
    <style>
    /* The magic happens here */
    style>
head>

<body>
    <h1 class="parent">
        <span class="child">
            Transparent
            <br>
            Text
        span>
    h1>
body>

html>

Basic CSS Implementation:

Just a basic CSS that normalizes the markup, and assigns a fixed cover background image to the document's body

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            background-image:
                url(https://images.unsplash.com/photo-1516528387618-afa90b13e000?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
            background-size: cover;
            background-attachment: fixed;
        }

Trick Explanation:

Assume that the parent element is white so the child element also will need to be white, then you will blend the child to difference mode, and in the mode it will invert its color which is white, and any identical pixel colors between it and it's background will become black, then you will blend the parent element as well but to a screen blend mode for lighter colors above 50% opacity or hard-light for lighter colors beneath 50% opacity, although this is not a standards that is must, actually you can try different light colors with different opacities and different modes, but those two blend modes worked best for me

 .parent {
            position: absolute;
            top: 0;
            left: 0;
            width: 50vw;
            height: 100vh;
            background-color: rgba(255 255 255 / 1);
            mix-blend-mode: screen;
        }

 .child {
           position: absolute;
           top: 0;
           left: 0;
           width: 100vw;
           height: 100vh;
           display: grid;
           place-content: center;
           font-family: Poppins, sans-serif;
           font-weight: 900;
           color: #fff;
           mix-blend-mode: difference;
           font-size: 12vw;
           text-align: center;
           line-height: 1.2;
        }

Tutorial to watch and follow along

Subscribe to Gorithms's Youtube Channel

In the next two parts, I'm going to go further in implementing the blurry backdrop as well as Difference colors usage including the opposite state of darker colors, Animation, etc. Stay tuned

#css #html #frontend #webdevelopment

How to create CSS Skewed Background ft. Pseudo Element

Gorithm — Sun, 18 Feb 2024 22:40:30 GMT

There is many ways to create a skewed background in CSS, the one I prefer is using Pseudo Element, and this because of the nature of pseudo elements in general that makes it more flexible to handle, manipulate, transform, without affecting the original or target element that we want to make its background skewed

First after adding some Markup like this:

<section>
            <h1>Gorithm is hereh1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, quae! Voluptate esse placeat aperiam
                eos
                iusto tempore quaerat doloremque et voluptates commodi maiores consequatur corporis dolore sequi modi
                quas,
                pariatur tempora illum. In consequuntur distinctio recusandae labore, vitae consectetur sequi molestias
                illum tempore a possimus quod nihil. Adipisci, ducimus placeat.p>

        section>
        <section>
            <h1>Gorithm is here againh1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, quae! Voluptate esse placeat aperiam
                eos
                iusto tempore quaerat doloremque et voluptates commodi maiores consequatur corporis dolore sequi modi
                quas,
                pariatur tempora illum. In consequuntur distinctio recusandae labore, vitae consectetur sequi molestias
                illum tempore a possimus quod nihil. Adipisci, ducimus placeat.p>
        section>

Then the whole trick is in the CSS, which is adding a pseudo element that takes the full width of it's parent (the target element) and some kind of its parent height and half (like 150%) and using the transform skew():

  section:nth-child(1)::before {
            content: "";
            position: absolute;
            inset: 0;
            top: -50%;
            height: 150%;
            background-color: springgreen;
            z-index: -1;
            transform: skew(0deg, -10deg);
            box-shadow: 0 -50px 100px 50px transparent;
        }

Make sure that the parent element of the pseudo element has a position set to relative, otherwise the effect won't function well.

Tutorial: here
Live Demo & Code: here

Create a Gradient Border with CSS [Just 2 Lines]

Gorithm — Fri, 16 Feb 2024 01:27:18 GMT

The Problem with border-color and border-image:

When you try to add a gradient as a property value to the border-color or to the border itself (same) you will see nothing, the border is completely vanished, this happens because CSS border property doesn't allow gradients only allows colors, and if you tried the border-image it will do the same effect but only on rectangles, it won't respect the border-radius if you set the border-radius of the element, so the solution here must do the following:

Make the border color to be any kind of gradient (linear, radial, conic, etc)
respect the shape of the element and its radius

Returning to the Roots of CSS aka the BOX MODEL:

what is the CSS Box Model, will I could tell from experience it's concept that tells us about a BOX that wraps around every HTML element, and it consists of 4 different parts:

Content Box: where is the initial content of the element exist, and the width and height properties applied to it.
Padding Box: Clears an area around the Content Box but still inside the element this is the difference between it and margin-box.
Border Box: the area that wraps around the Padding Box and the Content Box.
Margin Box; Clears an area around the Border Box, so it's outside of the element itself.

Implementing the solution

We will make use of the padding-box and the border-box in creating to gradient backgrounds, first will be treated as the color of the content box so it will be a gradient of the the same color, second gradient will be treated as the color of the border, and this is the fun part of mixing colors, then you must assign the border-width to a certain value like (10px or what) and make sure it's transparent so the second background could be shown otherwise its color will cover our gradient

.element {
    ...
    background: 
        linear-gradient(#222, #222),
        linear-gradient(crimson, blueviolet);
    border: 10px solid transparent;
}

Also I made a short tutorial here so you could understand better