Understanding CSS Logical Properties

Azam — Mon, 26 Jun 2023 03:34:52 +0000

CSS logical properties are a powerful tool for building flexible, responsive web layouts. By using logical properties instead of traditional physical properties in your CSS code, you can create designs that adapt automatically to different screen sizes and orientations, without having to write multiple versions of the same layout rules. Logical properties allow you to express your layout logic in terms of start/end instead of left/right or top/bottom, which makes it easier to create layouts that work in any language or writing direction. With logical properties, you can simplify your code, reduce redundancy, and build more efficient, dynamic websites that are ready for the modern web.

CSS Logical Properties provide a way to define layout rules based on the logical (start/end) values rather than the physical (left/right) values. This makes it much easier to create layouts that work across different writing modes such as LTR (left-to-right) and RTL (right-to-left).

Here's an example of using logical properties for a simple layout:

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  display: flex;
  flex-direction: column;
}

.box {
  height: 50px;
  width: 50px;
  background-color: red;
  margin: 10px;

  /* Logical Properties */
  margin-inline-start: 20px;
  margin-inline-end: 20px;
}

In this example, we have a box layout with two boxes stacked on top of each other in a container. We've set the container to be a flexbox with a vertical direction, which means that the boxes will stack on top of each other instead of side-by-side.

To space the boxes out evenly, we could use margin-left and margin-right properties in the box styles. However, this can cause problems if the text direction changes, such as with languages that are read right-to-left instead of left-to-right.

Instead, we've used CSS logical properties called margin-inline-start and margin-inline-end. These properties behave like margin-left and margin-right, but adjust themselves based on the writing mode. This means that if the text direction is left-to-right, margin-inline-start will act like margin-left. If the text direction is right-to-left, margin-inline-start will act like margin-right.

This makes it much easier to create layouts that work well across different languages and writing modes without having to adjust the styles manually.

Another Example

<div class="box">
  <p>Hello World!</p>
</div>

.box {
  width: 50%;
  height: 200px;
  padding-inline: 10%;
  margin-inline: auto;
  border-block-end: 2px solid black;
}

p {
  padding-block: 1em;
  margin-inline: 0;
}

In this example, we have a div element with the class of .box that contains a p element. We're using all the available CSS logical properties to style them.

width: Sets the width of the box to 50% of its containing block.
height: Sets the height of the box to 200 pixels.
padding-inline: Sets the horizontal padding of the box to 10% of its containing block. This property replaces padding-left and padding-right
margin-inline: Centers the box horizontally by setting the left and right margins to auto. This property replaces margin-left and margin-right.
border-block-end: Adds a 2-pixel thick black border to the bottom of the box. This property replaces border-bottom.
padding-block: Adds vertical padding of 1em to the p element. This property replaces padding-top and padding-bottom.
margin-inline: Removes the default left and right margins from the p element. This property replaces margin-left and margin-right.

By using logical properties, we can write more maintainable and flexible code that adapts better to different screen sizes and orientations.

Building Better Websites with CSS and JavaScript Motion Design

Azam — Sun, 23 Apr 2023 19:18:36 +0000

Animations are a powerful tool for enhancing the user experience on a website. They can be used to add visual interest, draw attention to important elements, and create a sense of interactivity and responsiveness. Animations can also help to guide users through a website and make it easier for them to navigate and understand the content.

Here's a simple example of an animation that can be used to draw attention to a call-to-action button:

.button{
    background-color: #3498db;
    color:#fff;
    padding:.75rem 1.5rem;
    border:none;
    border-radius: 5px;
    transition: transform 0.3s ease-in-out;
}

.button:hover{
    transform: scale(1.1);
}

In this code, we have a call-to-action button with a blue background color. When the user hovers over the button, it scales up slightly to draw attention and indicate that it is clickable. This creates a subtle but effective animation that can help to increase conversions and engagement.

Now, let's take a look at a more complex example. In this case, we'll use JavaScript to create a scroll-triggered animation that reveals content as the user scrolls down the page:

const revealElements = document.querySelectorAll('.reveal')

function revealOnScroll() {
    revealElements.forEach(element => {
        const elementTop = element.getBoundingClientRect().top;
        const windowHeight = window.innerHeight
        if (elementTop < windowHeight - 100) {
            element.classList.add('visible')
        } else {
            element.classList.remove('visible')
        }
    });
}
window.addEventListener('scroll', revealOnScroll)

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);

}

In this code, we have a set of elements with the "reveal" class that are initially hidden using CSS. When the user scrolls down the page, a JavaScript function checks if each element is within the viewport and adds the "visible" class if it is. This triggers an animation that fades in and translates the element slightly to create a smooth reveal effect.

This type of animation can be used to add interest and interactivity to long-form content such as blog posts or product pages. By breaking up the content into smaller sections that are revealed as the user scrolls, you can create a more engaging and memorable user experience.

I hope these examples help to illustrate how animations can bring a website to life and provide some inspiration for your own projects!

Forem: Azam

Understanding CSS Logical Properties

Another Example

Building Better Websites with CSS and JavaScript Motion Design