10 CSS Tricks To Improve Your Design Game
Published: 2024-03-19 13:52:58

by [Ugo Chukwuebuka](https://blog.openreplay.com/authors/ugo-chukwuebuka)


<blockquote><em>
You may come across a scenario where you want to style an HTML structure and you may use up to three to five lines of code for something you can use a single line of code for. Using the 10 different tips in this article can save you stress and time and help you do your work faster with less stress.
</em></blockquote>


<div style="background-color:#efefef; border-radius:8px; padding:10px; display:block;">
<hr/>
<h3><em>Session Replay for Developers</em></h3> 
<p><em>Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data.</em></p>
<img alt="OpenReplay" style="margin-top:5px; margin-bottom:5px;" width="768" height="400" src="https://raw.githubusercontent.com/openreplay/openreplay/main/static/openreplay-git-hero.svg" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<p><em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em><p>
<hr/>
</div>


## Creating Gradient Patterns and Transition Effects
In this section, we'll cover the `repeating-linear-gradient` and gradient transition hover effects and how they can be used.

### Exploring Infinite Patterns with `repeating-linear-gradient`
The `repeating-linear-gradient` [CSS property](https://blog.openreplay.com/the-power-of-custom-properties-in-css/) goes further than [linear-gradient](https://blog.openreplay.com/working-with-css-gradients/) in the way that it combines or blends two or more colors along a straight path, resulting in a pattern that repeats indefinitely.

The `repeating-linear-gradient` is often used to style backgrounds, buttons, and borders on a website. It is relevant since it saves time and effort when creating patterns. It provides a less complicated syntax than adding many `linear-gradient` properties, making it easier to achieve specific design results.

Now, let's explore an example.

In this example, we'll see how to use the `repeating-linear-gradient` as a `background-image`.

Add this code to your HTML file:

```html
<section>
  <div class="repeating-linear-gradient">
    <h3>Repeating Linear Gradient</h3>
  </div>
</section>
```

Add this code to your CSS file:

```css
.repeating-linear-gradient {
  border: 1px solid whitesmoke;
  margin: 0 auto;
  padding: 3rem;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  text-align: center;
  color: white;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(119, 9, 85, 0.5) 35%,
    rgb(11, 11, 88) 50%
  );
}
```

We created a circular element with a `repeated-linear-gradient` as its `background-image`. The gradient starts at a 45-degree angle and shifts between 35% purple and 50% dark blue.

Output:

![css9](https://blog.openreplay.com/images/ten-css-tricks-to-improve-your-design-game/images/image1.png)

We can see from the output above how the combined colors have been repeated in a particular pattern. The `repeating-linear-gradient` CSS property can also be used to create button backgrounds, border backgrounds, text backgrounds, and much more.

### Creating Smooth Gradient Transitions on Hover
This type of [CSS effect](https://blog.openreplay.com/effects-you-can-build-with-css-without-javascript/) is used when you hover over an element, like a button, to change its appearance. The change occurs with a smooth transition between gradient colors.

The gradient transition hover effect is useful because it offers a nice design and interaction with elements, making them more engaging for users. It can be applied to various web page elements, including buttons, links, backgrounds, etc.

I know you know what comes next. yeah? Let's get into it.

In this example, we will explore how to apply the gradient transition hover effect to a button.

Add this code to your HTML file:

```html
<section>
  <div class="btn-container">
    <button class="btn">Hover Me</button>
    <button class="btn1">Hover Me</button>
  </div>
</section>
```

Add this code to your CSS file:

```css
.btn-container {
  border: 1px solid red;
  margin: 0 auto;
  width: 400px;
  height: 160px;
  display: flex;
  gap: 20px;
  padding: 40px;
}
.btn,
.btn1 {
  border-radius: 10px;
  width: 200px;
  height: 70px;
  color: white;
  background-size: 200%;
  font-weight: 500;
  transition: 0.6s ease-in;
}
.btn {
  border: 1px solid white;
  background-image: linear-gradient(to left, #c0392b, #e74c3c, #3498db);
}
.btn1 {
  border: 1px solid white;
  background-image: linear-gradient(to left, #34495e, #2c3e50, #27ae60);
}
.btn:hover,
.btn1:hover {
  background-position: right;
}
```

Here, we defined a `background-image` for the buttons using `linear-gradient`, resulting in a gradient transition effect. We also added hover styles for the buttons to smoothly transition the `background-image` when they are hovered over.

Output:

<video autoplay loop muted playsinline src="https://res.cloudinary.com/dvofaxqpf/video/upload/c_crop,h_600,w_730/v1707313216/AngularUIpractice-GoogleChrome07_02_202414_23_44-ezgif.com-crop-video_trssaw.mp4" type="video/mp4"></video>


## Controlling Items Wrapping with `flex-wrap`
With the `flex-wrap` property, we do not always need to add `margin` or `padding` to each item in a container, as it makes it possible to manage the space between items in a container, irrespective of the size of the screen. 

We use the `flex-wrap` property to handle the wrapping behavior of flex items within a flex container, choosing whether they should wrap across several lines or remain on a single line. This property is of great importance since it allows you to create responsive layouts.

Let's take a look at an example without the use of `flex-wrap` and see what our result will be.

Add this code to your HTML file:

```html
<section class="container">
  <div>Container 1</div>
  <div>Container 2</div>
  <div>Container 3</div>
  <div>Container 4</div>
  <div>Container 5</div>
</section>
```

Here, we defined a container with items in it.

Add this code to your CSS file:

```css
.container {
  border: 1px solid red;
  color: white;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  width: 100%;
}
.container div {
  width: 120px;
  height: 50px;
  padding: 10px;
  text-align: center;
  background-color: salmon;
}
```

Here, we `flex` the items in the container, giving them a gap of `10px`.

Output:

<video autoplay loop muted playsinline src="https://res.cloudinary.com/dvofaxqpf/video/upload/c_fit,h_600,w_730/v1707185689/AngularUIpractice-GoogleChrome06_02_202403_09_52-ezgif.com-crop-video_mu4mbh.mp4" type="video/mp4"></video>

From the output above, you'll notice at some point there was spillage as the screen got smaller. To avoid that, we'll add the `flex-wrap` property.

Now, let's add the `flex-wrap` property and see what happens.

Update your CSS file as seen below:

```css
.container {
  /* existing code remains here*/
  flex-wrap: wrap;
}
```

Output:

<video autoplay loop muted playsinline src="https://res.cloudinary.com/dvofaxqpf/video/upload/c_fit,h_600,w_730/v1707186492/AngularUIpractice-GoogleChrome06_02_202403_16_10-ezgif.com-crop-video_1_sfrytg.mp4" type="video/mp4"></video>

Using the `flex-wrap` property, you'll notice that even as the screen got smaller, the items adjusted and there was an equal amount of space between them.


## Ensuring Element Visibility with `scroll-padding-top`
The `scroll-padding-top` property helps to add space to the top of an element that is scrolled to, so that it won't be covered up by other elements, such as a fixed navigation menu. 

This property is important for creating [smooth scrolling](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) interactions and making sure the content being scrolled to is not hidden by a fixed navigation menu or other elements at the top of the webpage. 

The illustration below demonstrates the top of an element covered up when it is scrolled to.

<video autoplay loop muted playsinline src="https://res.cloudinary.com/dvofaxqpf/video/upload/c_crop,h_600,w_730/v1707365386/AngularUIpractice-GoogleChrome08_02_202405_03_34-ezgif.com-crop-video_xnmchq.mp4" type="video/mp4"></video>

To avoid this, we'll use the `scroll-padding-top` property to add a space at the top of each heading. 

Enter the following code into your HTML file:

```html
<section class="scroll-container mt-5">
  <div class="navLinks p-2">
    <p (click)="scrollTo(homeSection)">Home</p>
    <p (click)="scrollTo(contactSection)">Contact</p>
    <p (click)="scrollTo(aboutSection)">About</p>
  </div>
  <div class="p-4 mt-5" #homeSection>
    <h3>Home</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt tempora
      voluptatum repellat distinctio aliquam laboriosam accusamus enim earum
      delectus in beatae deserunt eligendi, laudantium necessitatibus quisquam
      perferendis ipsum rem id quod tenetur, ea eaque dignissimos harum amet.
      Doloribus aliquid recusandae laudantium sunt necessitatibus, molestiae,
      quidem nisi voluptates, cum et quas? Lorem ipsum dolor sit amet,
      consectetur adipisicing elit. Et distinctio repellendus, totam magnam
      iusto ex, ad reprehenderit quae dolore ab excepturi placeat tenetur unde
      amet fugiat expedita minus dolor velit!
    </p>
  </div>
  <div class="p-4" #contactSection>
    <h3>Contact</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt tempora
      voluptatum repellat distinctio aliquam laboriosam accusamus enim earum
      delectus in beatae deserunt eligendi, laudantium necessitatibus quisquam
      perferendis ipsum rem id quod tenetur, ea eaque dignissimos harum amet.
      Doloribus aliquid recusandae laudantium sunt necessitatibus, molestiae,
      quidem nisi voluptates, cum et quas? Lorem ipsum dolor sit amet,
      consectetur adipisicing elit. Et distinctio repellendus, totam magnam
      iusto ex, ad reprehenderit quae dolore ab excepturi placeat tenetur unde
      amet fugiat expedita minus dolor velit!
    </p>
  </div>
  <div class="p-4" #aboutSection>
    <h3>About</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt tempora
      voluptatum repellat distinctio aliquam laboriosam accusamus enim earum
      delectus in beatae deserunt eligendi, laudantium necessitatibus quisquam
      perferendis ipsum rem id quod tenetur, ea eaque dignissimos harum amet.
      Doloribus aliquid recusandae laudantium sunt necessitatibus, molestiae,
      quidem nisi voluptates, cum et quas? Lorem ipsum dolor sit amet,
      consectetur adipisicing elit. Et distinctio repellendus, totam magnam
      iusto ex, ad reprehenderit quae dolore ab excepturi placeat tenetur unde
      amet fugiat expedita minus dolor velit!
    </p>
  </div>
</section>
```

Add the following CSS code:

```css
.scroll-container {
  border: 1px solid red;
  background-color: #d35400;
  margin: 0 auto;
  width: 500px;
  height: 300px;
  overflow-y: auto;
  color: white;
  scroll-padding-top: 50px;
}
.navLinks {
  border: 1px solid whitesmoke;
  position: fixed;
  width: 480px;
  display: flex;
  justify-content: space-evenly;
  background-color: white;
  color: black;
  font-size: 18px;
  font-weight: 600;
}
.navLinks p {
  cursor: pointer;
}
```

With the `scroll-padding-top` property added to the `scroll-container`, the headings of each section scrolled to will no longer be covered.

Output:

<video autoplay loop muted playsinline src="https://res.cloudinary.com/dvofaxqpf/video/upload/c_crop,h_600,w_730/v1707366876/AngularUIpractice-GoogleChrome08_02_202405_26_51-ezgif.com-crop-video_gkbnzi.mp4" type="video/mp4"></video>


## Exploring Color Mixing with `color-mix()` and Ensuring Element Size Limits with `clamp()`
In this section, we'll look at what each of these [CSS functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions) is and how to use them. 

Let's take a look at what the `color-mix()` function entails.

### Using the `color-mix()` Function
`color-mix()` is a CSS function that is used to create color harmonies on a website. We use this function to blend or mix two colors. You can apply the `color-mix()` function to a background, text, or even a border.

This function is essential, as it helps developers easily build challenging color combinations.

The `color-mix()` function syntax is as follows:

```css
color-mix(in hwb, white 20%, orange);
```

Syntax explanation:
* `in hwb`: This stands for the color model we want our resulting mixed color to be in. So in place of `hwb`, you can use `hsl` or any other color model of your choice.
* `white 20%`: This is the first color we want to start with. `20%` is the percentage of the first color we want to mix.
* `orange`: This is the color we want to blend or mix with. A percentage can also be added to `orange`.

Let's look at an example where this function can be applied:

In your HTML file, add this:

```html
<div class="colorMix p-4"></div>
```

In your CSS file, add this code:

```css
.colorMix {
  border: 10px solid color-mix(in hwb, #d35400 50%, #2c3e50);
  background-color: color-mix(in hwb, #9b59b6 40%, #16a085);
  font-size: 20px;
  margin: 0 auto;
  width: 350px;
  height: 350px;
  border-radius: 50%;
}
```

What we did above was add the `color-mix()` function to both the `border` and `background-color` properties of the `colorMix` CSS class. 

This is what it'll result in:

![css12](https://blog.openreplay.com/images/ten-css-tricks-to-improve-your-design-game/images/image2.png)


### Using the `clamp()` Function
The `clamp()` function allows us to provide a range of numeric values to resize elements depending on the size of a screen or page. It's just like saying a property should not go above a set value or below another set value, no matter the size of a web page. 

It can be used in CSS properties such as `width`, `height`, `font-size`, `margin`, `padding`, and so much more. 

The `clamp()` function is helpful as it helps to maintain your website's appearance on different devices by ensuring that items remain under specific size restrictions.

`clamp()` syntax:

```css
clamp(min-value, preferred-value, max-value);
```

Syntax explanation:

* The `min-value` represents the minimum value a CSS property can take. It means it will not receive a lesser value.
* The `preferred-value` is the value the property will take if the size of a screen falls in between the `min-value` and `max-value`.
* The `max-value` is the maximum value the CSS property can take. It means it will not receive a higher value.

Let's see an example where `clamp()` is used. In this example, we'll resize the `font-size` of the `h3` and `p` elements depending on the screen size.

In your HTML file, add this code:

```html
<div class="p-5">
  <h3>The Clamp CSS Function</h3>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta laboriosam
    voluptatem blanditiis necessitatibus nobis! Saepe a expedita optio quam vel
    sunt possimus odit nam assumenda aliquam iusto inventore unde placeat
    incidunt fugiat nulla, reiciendis voluptas, cumque eius qui perspiciatis eos
    aut dolor omnis! Corporis dolores repellendus, cupiditate rerum unde ducimus
    consequatur debitis inventore numquam, sunt sapiente, ullam dolorem! Aut
    iusto optio animi omnis neque vero, placeat unde rerum exercitationem illo
    quos tenetur fugiat. Delectus dignissimos earum nemo quae, fuga
    exercitationem deleniti pariatur, ut dolorem repellendus porro magni tempora
    laudantium aut libero dolor. Optio veniam ut corrupti, quod numquam non
    quam.
  </p>
</div>
```

In your CSS file, enter this code:

```css
h3 {
  font-size: clamp(48px, 10vw, 98px);
}
p {
  font-size: clamp(16px, 5vw, 32px);
}
```
 
Code breakdown:
* For `h3`, `48px` is the `min-value`, `10vw`, which is 10% of any viewport size, is the preferred value, and `98px` is the maximum value.
* Still on `h3`, If the viewport size is `1000px`, the preferred value will be `100px` exceeding the `max-value`. As a result, the `font-size` of `h3` will stay at `98px`. But if the viewport size is `300px`, the preferred value will be `30px` falling below the `min-value`. As a result, the `font-size` of `h3` will stay at `48px`. This means the `font-size` of `h3` cannot go above the `max-value` or below the `min-value`.

Output:

<video autoplay loop muted playsinline src="https://res.cloudinary.com/dvofaxqpf/video/upload/c_fit,h_600,w_730/v1707081938/AngularUIpractice-GoogleChrome04_02_202422_01_52-ezgif.com-crop-video_t0bayv.mp4" type="video/mp4"></video>


<CTA_Middle_Design />



## Customizing Dialog Appearance with the `::backdrop` Pseudo-Element
The `::backdrop` [pseudo-element](https://blog.openreplay.com/css-pseudo-elements--a-definite-guide/) is the background that appears behind a dialog box. The `::backdrop` pseudo-element, when used, covers the parent page of the dialog box. 

You can change the appearance of the `::backdrop` pseudo-element, such as color or transparency, to improve the look and user experience of dialogs. This property is particularly beneficial for generating stylish and user-friendly interfaces in web applications.

Let's look at an example.

In your HTML file, enter this code: 

```html
<section>
  <button (click)="openPopUpBox()">Open pop-up box</button>
  <dialog *ngIf="showPopUp" class="modal">
    <p class="modalContent">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis
      dolor, nobis neque accusantium deserunt a rerum inventore enim beatae. Id
      qui hic est laborum accusantium asperiores consectetur similique assumenda
      eius voluptatem, optio magni officia nulla ad. Odio error blanditiis
      reiciendis.
      <button class="mt-3" (click)="closePopUpBox()">Close</button>
    </p>
  </dialog>
</section>
```

Code breakdown:

* When the first button is clicked, it calls the `openPopUpBox` function, which shows the dialog box.
* The dialog element contains the content that will be shown in the dialog. It only pops up if the value of `showPopUp` is true.

In your JavaScript file, add the following code:

```typescript
 showPopUp: boolean = false;

  openPopUpBox() {
    this.showPopUp = true;
  }
  closePopUpBox() {
    this.showPopUp = false;
  }
```

In the code above, we defined two functions for opening and closing the dialog box.

In your CSS file, enter this code:

```css
.modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
::backdrop {
  --backdrop: color-mix(in hsl, white 20%, blue);
}
dialog::backdrop {
  background: var(--backdrop);
}
.modalContent {
  width: 518px;
  height: 220px;
  border-radius: 10px;
  padding: 2rem;
  background-color: #ffffff;
}
```

In the code above, we style a dialog box with a `::backdrop` pseudo-element using the `color-mix()` function to blend colors.

The resulting output will be as follows:

<video autoplay loop muted playsinline src="https://res.cloudinary.com/dvofaxqpf/video/upload/c_fit,h_600,w_730/v1707092999/AngularUIpractice-GoogleChrome05_02_202401_17_02-ezgif.com-crop-video_wjse4q.mp4" type="video/mp4"></video>

## Concealing Portions of Elements with the `mask` Property
The CSS `mask` property is used to cover specific portions of an element. [Masking](https://ishadeed.com/article/css-masking/) acts similar to a background image. You can use an image, shape, or gradient as your mask. 

This property is important since it allows you to monitor the visibility of elements depending on shapes or images. This can be handy for creating custom shapes or showing sections of an image.

We'll go through an example where we'll mask an image with another image.

In your HTML file, enter this code:

```html
<section class="p-4">
  <h1>The CSS Mask Property</h1>
  <main class="mt-3">
    <div class="maskImg">
      <img src="../../../assets/img1.jpeg" alt="img1" />
    </div>
  </main>
</section>
```

The above code specifies the image we want to mask. 

It'll result in this:

![css2](https://blog.openreplay.com/images/ten-css-tricks-to-improve-your-design-game/images/image3.png)


Let's add these `mask` properties to our CSS file as follows:

```css
.maskImg {
  --webkit-mask-image: url(../../../assets/johnEmma.png);
  mask-image: url(../../../assets/johnEmma.png);

  --webkit-mask-position: top center;
  mask-position: top center;

  --webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;

  --webkit-mask-size: 500px;
  mask-size: 500px;

  object-fit: cover;
  width: 100%;
}
```

Code breakdown:
* We used the `--webkit-` prefix because the `mask` properties may not be compatible with your choice of browser.
* The `mask-image` defines the image that will serve as the `mask` layer.
* The `mask-position` property sets the position of the masked image to the `top-center` of the element.
* The `mask-repeat` defines if the image to be masked will be repeated. Here, we specified it to be repeated towards the x-axis, which is horizontal.
* The `mask-size` defines the size of the `mask` image.

Here is the output:

![css3](https://blog.openreplay.com/images/ten-css-tricks-to-improve-your-design-game/images/image4.png)


## Achieving Text Balance with the `text-wrap` Property
The `text-wrap` property solves the problem of text not being balanced on a web page. So, what this property does is make the browser check the number of words you have in your text container, and when it does, it keeps the text balanced on the correct number of lines.

It helps to improve the ease of reading and appearance of text-filled content by retaining correct positioning and space around floated elements.

For example, the text below, which does not have a `text-wrap` balance property, will look as follows: 

![css4](https://blog.openreplay.com/images/ten-css-tricks-to-improve-your-design-game/images/image5.png)

Let's add a `text-wrap` balance property to see how the text form will change.

Add this code to your HTML file:

```html
<div class="border border-danger textWrap bg-primary text-white p-2">
  <h3>Text-wrap Balance</h3>
  <p class="f-4">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus,
    sapiente.
  </p>
</div>
```

In your CSS file, add:

```css
.textWrap {
  max-width: 400px;
  text-wrap: balance;
  margin: 0 auto;
}
```

In the code above, we added the `text-wrap` property to the `p` element, making it balanced on both lines.

This will be the output:

![css5](https://blog.openreplay.com/images/ten-css-tricks-to-improve-your-design-game/images/image6.png)

## Avoiding Manual Counting with CSS `counters`
With CSS `counters`, we can dynamically add numbers to our content. It can also be used to count the number of elements in a section of a web page.

It is useful for dynamically counting or labeling content, such as ordered lists or sections in a document, avoiding the need for manual counting. 

Let's take a look at an example.

The following are properties we should take note of when using `counters`:

* `counter-reset`: This property makes the `counter` start from a specified value. Your `counter-reset` value can start from any number, and it is not compulsory to use the default number, which is `0`.
* `counter-increment`: This property increments the `counter` for each element in the list.
* `content`: This property displays the `counter`.

In your HTML file, enter this code:

```html
<div class="border border-danger bg-primary text-white p-2">
  <h3>Counters</h3>
  <ol>
    <li>Beans</li>
    <li>Dauwa</li>
    <li>Bacon</li>
    <li>Berries</li>
    <li>Okpa</li>
    <li>Onion</li>
  </ol>
</div>
```

In your CSS file, enter this code:

```css
ol {
  counter-reset: foodType;
  list-style-type: none;
}
li {
  counter-increment: foodType;
}
li::before {
  content: "Food-Type " counter(foodType) ": ";
}
```

The value `foodType` represents the name of our `counter`, and it starts counting from `0` since we did not give a specific number for it to start counting from.

Output:

![css6](https://blog.openreplay.com/images/ten-css-tricks-to-improve-your-design-game/images/image7.png)


## Adding Depth with `drop-shadow` and Shaping Text Layouts with `shape-outside` Property
In this section, we'll look at what each of these properties is and how to use it. 

Let's look at what the `drop-shadow` CSS property entails.

### Applying the `drop-shadow` Effect
The `drop-shadow` property is used to apply a `drop-shadow` effect to an element. It can be applied to elements like images, buttons, and text to enhance the entire look and user experience.

Let's look at how a `drop-shadow` effect can be added to an image.

Add this code to your HTML file:

```html
<section>
  <div class="drop-shadow-container p-2">
    <img src="../../../assets/illustration.svg" alt="illustration" />
    <img src="../../../assets/illustration.svg" alt="illustration" />
  </div>
</section>
```

Add this code to your CSS file:

```css
.drop-shadow-container {
  border: 1px solid red;
  background-color: salmon;
  text-align: center;
}
.drop-shadow-container img {
  padding: 20px;
  width: 20%;
}
.drop-shadow-container img:last-child {
  filter: drop-shadow(5px 8px 12px red);
}
```

In the example above, we have two identical images, but the last image is the one with a `drop-shadow` effect.

Apart from images, the `drop-shadow` property can also be used on modals, backgrounds, texts, cards, and many more elements.

Output:

![css7](https://blog.openreplay.com/images/ten-css-tricks-to-improve-your-design-game/images/image8.png)


### Implementing the `shape-outside` Property
The `shape-outside` CSS feature comes in handy when you're dealing with a whole bunch of text, especially when the text is within an image. 

It is used to wrap text around certain shapes, such as a circle, resulting in more flexible and stylish layouts. It is useful for creating text that flows around images and more complex text arrangements.

Let's look at an example of paragraph text that is wrapped around an image.

Enter the HTML code below:

```html
<section class="shape-outside-container">
  <h2>Shape Outside</h2>
  <div>
    <img
      class="shape-outside-img"
      src="../../../assets/illustration.svg"
      alt="illustration"
    />
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus omnis
      iste odio perspiciatis hic officia delectus vel enim labore sint, id nulla
      cumque voluptas porro, voluptatem nostrum fugiat modi! Nobis dolorum
      necessitatibus, voluptates voluptate non quas ipsum in? Ipsum vel
      cupiditate consequatur alias veniam voluptate provident iste excepturi
      consectetur, fugit suscipit quasi qui laudantium nesciunt fuga placeat
      deleniti quod neque id facilis ex voluptates, ullam rerum. Dicta odit
      perspiciatis quod repellat dolor. Voluptas est rem debitis atque nemo
      possimus. Inventore. Lorem ipsum dolor sit, amet consectetur adipisicing
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia incidunt
      neque autem eos, esse tempora eligendi nemo fugit inventore quisquam vel
      rem id recusandae ex nesciunt! Neque fugiat nihil quasi.
    </p>
  </div>
</section>
```

Enter the following CSS code:

```css
.shape-outside-container {
  border: 1px solid red;
  padding: 2rem;
  background-color: salmon;
  color: white;
  font-size: 25px;
}
.shape-outside-container img {
  width: 20%;
}
.shape-outside-img {
  width: 300px;
  height: 300px;
  float: left;
  margin: 53px 0 0 4px;
  shape-outside: content-box circle(115px at 150px 150px);
}
```

In the code above, we used the `shape-outside` property to make the text wrap around the image. 

Here's an example of the `shape-outside` property in action:

![css8](https://blog.openreplay.com/images/ten-css-tricks-to-improve-your-design-game/images/image9.png)


## Understanding the `:has()` and `:is()` Pseudo-Classes for Element Interaction
[Pseudo-classes](https://blog.openreplay.com/css-pseudo-classes/) are keywords in CSS that give an element, like a button or text, extra interactivity. Some examples of pseudo-classes include: `:hover`, `:has`, `:is`, and `:active`.

### Styling Elements Based on Their Contents with the `:has()` Pseudo-Class
The `:has()` pseudo-class selects and adds styles to a parent element based on the presence of a child element. This goes to say that two or more parent elements can have the same CSS selector name, and then we can select and style any of the parent elements based on the presence of their child elements.

It can be used in a lot of scenarios, like styling a parent element if it has a certain type of child element or applying a `font-size` to a `div` if it contains a button.

Let's look at an example of where the `:has` pseudo-class can be used.

In your HTML file, enter the following code:

```html
<section class="has-pseudo-container">
  <div class="has-pseudo-example">
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit dolores
      atque eveniet magnam, fuga aperiam libero modi temporibus porro
      asperiores. Accusamus deserunt excepturi soluta sit eum recusandae
      repellendus pariatur corrupti!
    </p>
    <button>Click Me</button>
  </div>
  <div class="has-pseudo-example">
    <img src="../../../assets/johnEmma.png" alt="" />
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio maiores
      optio dolor commodi voluptas provident ab illo corporis explicabo a!
      Praesentium dicta dignissimos fugiat nobis officia ipsum, sapiente
      perferendis ducimus.
    </p>
  </div>
</section>
```

In your CSS file, enter the following code:

```css
.has-pseudo-container {
  border: 1px solid red;
  width: 800px;
  height: 300px;
  display: flex;
  gap: 20px;
  margin: 0 auto;
}
.has-pseudo-example {
  padding: 25px;
}
.has-pseudo-example:has(button) {
  background-color: #7f8c8d;
  text-align: justify;
  font-size: 16px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.has-pseudo-example:has(img) {
  background-color: #e74c3c;
  color: white;
  font-size: 18px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
```

We added the `:has` pseudo-class to parent elements having the same class name but styled differently based on their child element. For the first parent element, we checked if it had a `button` element before we gave it styles, and for the other parent element, we checked if it had an `img` element before styling it.

Output:

![css10](https://blog.openreplay.com/images/ten-css-tricks-to-improve-your-design-game/images/imagea.png)

With the `:has` pseudo-class, we can go further by styling the child element. So, if we want to design the button on the first parent element, we may do the following:

```css
.has-pseudo-example:has(button) > button {
  border: 1px solid salmon;
  background-color: salmon;
  color: white;
  font-size: 14px;
}
```

What the code does is check for the parent element that has a button element, then style the button element.

### Simplifying Element Selection with the `:is()` Pseudo-Class
The `:is` pseudo-class helps us select multiple child elements of the same parent element and give them the same styles.

It is useful for simplifying [CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors), especially when you have to deal with several selectors that have similar styles. 

If you have styled different descendants of a parent element as follows: 

```css
.is-container h1,
.is-container p,
.is-container button {
  background-color: salmon;
}
```

Then, you now have a better way of doing that by using the `:is` CSS pseudo-class.

Supposing we want to give the `p`, `h5`, and `button` elements of a particular parent element the same `background-color`, we can do that using the `:is` pseudo-class as follows:

```html
<section>
  <div class="is-container">
    <h5>The :is CSS Pseudo Class</h5>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi totam id
      sint itaque fugiat neque, laborum doloribus alias modi cumque optio
      reiciendis maxime at possimus quis perferendis magni, dignissimos
      exercitationem.
    </p>
    <button>Click Me</button>
  </div>
</section>
```

Add the following CSS code:

```css
.is-container {
  border: 1px solid red;
  background-color: salmon;
  margin: 0 auto;
  width: 400px;
  height: 250px;
  padding: 20px;
}
.is-container button {
  border: 1px solid rgb(0, 15, 15);
  background-color: rgb(0, 15, 15);
  font-size: 12px;
}
.is-container :is(h5, p, button) {
  text-align: center;
  color: white;
}
```

In the code above, we used the `:is` pseudo-class to select and style elements from the same parent element, giving them the same styles.

Output:

![css11](https://blog.openreplay.com/images/ten-css-tricks-to-improve-your-design-game/images/imageb.png)

We can see how it was very easy using the `:is` pseudo-class to select as many elements of the same parent and style them instead of calling them separately.

## Conclusion
We've come a long way, having seen some CSS tricks and the practical ways they can be applied. There's no limit to what we can do with CSS and how it can make the life of a developer less stressful.