
**Building a stars/rating component and need to support fractional values like 4.2 or 3.7 but don't want to use images? This post explains how to make fractional stars using just CSS and inline SVGs.**


I was working on displaying reviews on an ecommerce site when needing a component displaying the customers ratings. The previous version of the website used multiple png images overlayed on top of each other, contributing to unnessecary requests and [CLS](https://web.dev/cls/) issues. The criteria for the new component was:

- Should use inline SVG:s instead of images
- The number of stars should be dynamic
- Should support fractional values

## Final component

Here's the component we are building:

<Rating />

The code:

```jsx
import IconStar from 'star.svg';

const Rating = ({ value, max, className }) => {
	/* Calculate how much of the stars should be "filled" */
  const percentage = Math.round((value / max) * 100);

  return (
    <div className={styles.container}>
    {
      /* Create an array based on the max rating, render a star for each */
    }
      {Array.from(Array(max).keys()).map((_, i) => (
        <IconStar key={i} className={styles.star} />
      ))}
    {
      /* Render a div overlayed on top of the stars that should not be not filled */
    }
      <div className={styles.overlay} style={{ width: `${100 - percentage}%` }} />
    </div>
  );
}
```

The component basically consists of two parts:

1. A list of star icons based on the max rating (`max` prop)
2. An "overlay" div that will be responsible for changing the color of the stars underneath. This is the magic that makes the fractional part work. 

The overlay is just a plain div the same size as the part of the stars that should be a different color/unfilled. We calculate the width of the div by first dividing the rating with the maximum, then subtracting that value from 100.

```jsx
const percentage = Math.round((value / max) * 100);

<div className={styles.overlay} style={{ width: `${100 - percentage}%` }} />
```

Add the styles below in order to lay out the stars:

```css
.container {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.star {
  width: 18px;
  margin-right: 2px;
  display: flex;
  color: #f8d448;

  &:last-of-type {
    margin-right: 0;
  }
}

.overlay {
  background-color: black;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
```

Now the overlay is just plain black though, lets change that:

## Using mix-blend-mode to change SVG color

The final step is making the overlay div only affect the star SVGs beneath, not the background. We can do this by using the CSS `mix-blend-mode` property with the `color` value.

The color spec reads as following:

<Warning type="info">Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images.</Warning>

Tinting color images is exactly what we want to do, so let's add the property and see what happens:

```css
.overlay {
  background-color: black;
  mix-blend-mode: color;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
```

This is exactly what we want! It changes the hue and saturation of the stars, but keeps the backgrund color unchanged. You can play with the background-color to change the tint of the stars. For example if I use background-color: red instead I get a red tint instead of gray stars.

The browser support is pretty good (supported in all modern browsers) but for older browsers we can fall back to opacity instead:

```css
.overlay {
  background-color: black;
  mix-blend-mode: color;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;

  @supports not(mix-blend-mode: color) {
    opacity: 0.7;
  }
}
```

You can find the full source code [here](https://github.com/samuelkraft/samuelkraft-next/blob/master/components/blog/rating.tsx). Let me know if you found this CSS tip useful by pressing the heart below 👇


**Apple recently announced the latest version of Safari on iOS 15 with a completely new design featuring a bottom floating tab bar. What does this mean for web developers and designers?**

Safari on iOS has had a problem for a long time when it comes to building websites and web apps with bottom-aligned navigation due to the browser toolbar's dynamic height. As you scroll the toolbar disappears making any element that is fixed to the bottom of the screen look great, but as soon as you try to tap any link inside the browser toolbar appears again. 

<video playsInline autoPlay loop muted width="708" style={{ width: '100%' }}>
    <source src="/blog/safari-15-bottom-tab-bars-web/twitter-bad.mp4" type="video/mp4" />
    Sorry, your browser doesn't support embedded videos.
</video>

This makes for a really poor UX so designers and developers have mostly resorted to user "hamburger" menus instead. This is a shame as bottom tab bars increase discoverability by not hiding links behind a tap and are also easier to reach one-handed on todays large mobile devices.

## Updates with Safari 15

The new Safari 15 now has a tab bar floating at the bottom of the screen. At first it might seem like this makes it even harder to create tab bar navigations, and by browsing the web using iOS 15 it's easy to spot issues like this:

<video playsInline autoPlay loop muted width="708" style={{ width: '100%' }}>
    <source src="/blog/safari-15-bottom-tab-bars-web/pinterest-bad.mp4" type="video/mp4" />
    Sorry, your browser doesn't support embedded videos.
</video>

## Fixing Tab Bar Overlap with Safe Areas

Thankfully solving this issue is very easy by using the `env()` CSS function together with `safe-area-inset-bottom`. This API was shipped with iOS 11 making it possible to customize how websites render when using devices with a notch. By inspecting pinterests code we can see that their tab bar has a fixed position anchored to the bottom, the relevant parts look something like this:

```jsx
.tabbar {
	position: fixed;
	bottom: 0;
}
```

To respect the safe area and make sure that nothing from the browser UI overlaps let's add another bottom property with `env(safe-area-inset-bottom)` as a value. This function works like a CSS variable, returning the minimum amount of inset needed to keep your UI from overlapping with the browser's. We keep the old style rule as a fallback browsers that do not support it:

```jsx{4}
.tabbar {
  position: fixed;
  bottom: 0;
  bottom: env(safe-area-inset-bottom);
}
```

Now when scrolling nothing overlaps:

<video playsInline autoPlay loop muted width="708" style={{ width: '100%' }}>
    <source src="/blog/safari-15-bottom-tab-bars-web/pinterest-good.mp4" type="video/mp4" />
    Sorry, your browser doesn't support embedded videos.
</video>

Be sure to use `env()` every time something is anchored to the bottom of the screen or overlap will likely appear. `env()` can also be combined with css `calc()` or `min()` and `max()`, so if your design needs more padding you can add it like this:

```jsx{4}
.tabbar {
  position: fixed;
  bottom: 0;
  bottom: calc(1rem + env(safe-area-inset-bottom));
}
```

You can learn more about respecting the safe-area in [this excellent article](https://webkit.org/blog/7929/designing-websites-for-iphone-x/) published on the webkit blog or Apple's WWDC session called [Design for Safari 15](https://developer.apple.com/videos/play/wwdc2021/10029/?time=777&t=66) (Relevent part starts around 13 minutes in).

The best way to see if you got it right is to use a physical device with iOS 15, but if you don't have access to one you can download the Xcode 13 beta from [Apples developer portal](https://developer.apple.com/download/) and use an iOS 15 simulator by going to `Xcode > Open Developer Tool > Simulator`

## Tab Bar UX in iOS 15

Remember the issue in previous versions of Safari where you had to click twice when using bottom tab bars? Once for showing the safari toolbar and another tap for actually triggering your link? That is no longer an issue 🙌. Safari 15 now respects and follows links or buttons, which is a big improvement! Check out how much better Twitter's tabbar works when switching tabs on Safari 15:

<video playsInline autoPlay loop muted width="708" style={{ width: '100%' }}>
    <source src="/blog/safari-15-bottom-tab-bars-web/twitter-good.mp4" type="video/mp4" />
    Sorry, your browser doesn't support embedded videos.
</video>

Even if tab bars now technically work better than before we still have to consider the design and UX to create something that people understand and that looks good. The browser UI is now very bottom-heavy and placing more actions next to it might feel cluttered. What do you think? Let me know on twitter [@samuelkraft](https://twitter.com/samuelkraft).

I'm excited to see how everyone adapts to the new UI and if we will see a return of tab bars on the web or not.



Back in 2013 I created this [CodePen](https://codepen.io/samuelkraft/pen/Farhl) of the chat bubble UI from iOS 7's messages app. It has since received an impressive 50k views and 170+ likes, apparently people like to build chat apps 😉. In this post I'll walk you through how it works, while also improving my previous code a bit.

Here's what we're building:

<Messages />

I'm building this in a Next.js/react app with css modules & sass. If you're looking for a more bare-bones css solution check out the codepen above.

Let's start by creating a list of messages, we'll add a `sent` key to our objects in order to differentiate between you own sent messages and the received messages. Add a .shared class for each message, and another class based on the sent key.

```tsx
import cn from 'classnames'
import styles from './messages.module.scss'

const messages = [
  { text: "Hey there! What's up", sent: true },
  { text: 'Checking out iOS7 you know..' },
  { text: 'Check out this bubble!', sent: true },
  { text: "It's pretty cool!" },
  { text: "And it's in css?" },
  { text: "Yeah it's pure CSS &amp; HTML", sent: true },
  { text: "(ok.. almost, I added a tiny bit of JS to remove sibling message tails)", sent: true },
  { text: "Wow that's impressive. But what's even more impressive is that this bubble is really high." },
]

const Messages = (): JSX.Element => (
  <ol className={styles.list}>
    {messages.map(({ text, sent }) => (
      <li key={text} className={cn(styles.shared, sent ? styles.sent : styles.received)}>{text}</li>
    ))}
  </ol>
)

export default Messages
```

That's all we need for the markup, let's create our css (or scss) file and add some styling!

We start by adding some basic styles like a max-width to contain our messages, remove the default list styling and change the display to flex. We do this because then we can make our messages collapse/decrease in width based on the message length by using the `align-self` property. If all messages were block elements they would always be the same size regardless of content.

If you don't already have a theme setup this is also a good place to add some css variables for the message colors and our page background-color. We need to know our page's background-color as we're going to overlay two different elements, one of which should mimic our background to achieve our effect.

```scss
.list {
  --sentColor: #0b93f6;
  --receiveColor: #e5e5ea;
  --bg: #fff;

  display: flex;
  flex-direction: column;
  max-width: 450px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

[data-theme='dark'] {
  .list {
    --bg: #161515;
  }
}
```

<Warning type="info">
  If you don't know your background-color or if your background is an image I'm pretty sure you can accomplish the same effect with css <Link href="https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image">mask-image</Link> and a background-gradient. Let me know if this is something you'd like to see, or why not open a <Link href="https://github.com/samuelkraft/samuelkraft-next">PR</Link>?
</Warning>

There are some shared styles both sending and receiving messages should have, so let's make a .shared class. It's styles are pretty basic; we set the max-width of each message to a little bit more than half of our list width, add some padding and margin etc.

Really the only tricky part about this component are the bubble "tails". We will render them using [psuedo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) to not add unnecessary items to the DOM. For each tail we are using two psuedo elements, :before for the colored part and :after overlayed on top to "cut out" the colored part.

Since all tails will all have the same size and be positioned absolutely at the bottom of our bubbles let's add that to our shared class.

```scss
.shared {
  position: relative; /* Setup a relative container for our psuedo elements */
  max-width: 255px;
  margin-bottom: 15px;
  padding: 10px 20px;
  line-height: 24px;
  word-wrap: break-word; /* Make sure the text wraps to multiple lines if long */
  border-radius: 25px;

  &:before {
    width: 20px;
  }

  &:after {
    width: 26px;
    background-color: var(--bg); /* All tails have the same bg cutout */
  }

  &:before,
  &:after {
    position: absolute;
    bottom: 0;
    height: 25px; /* height of our bubble "tail" - should match the border-radius above */
    content: '';
  }
}
```

Let's continue to the specific messages, starting with the 'sent' styles. As mentioned before we want to make sure our message collapses if it's a very short one and we can do this by adding  `align-self: flex-end` . Our element will then only take up as much space as the content needs (maxing out at 255px which we set in our shared class), aligned to flex-end which in this case is right. For our receiving message we'll instead use `align-self: flex-start` as we want those aligned to the left.

## Styling our tails

If we take a closer look at the tails we're trying to accomplish we'll notice that there are basically two curved shapes. One curved shape extending from the bottom edge (the colored section, marked as blue below) and another one extending from the outer edge (our cutout/backgrund, marked as green below). Hover the message below and see how the blue creates our tail shape when overlaid with the green one.

<div style={{ padding: '50px', backgroundColor: 'var(--boxBg)', borderRadius: '5px', textAlign: 'center' }}>
  <TailBreakdown />
  <p style={{margin: 0, opacity: 0.75}}>Hover to arrange tail 👆</p>
</div>

Let's recreate these shapes with our pseudo elements. Start by setting the color of our bordered shape, then set the curve using border-radius, we can mimic the iOS one using different values for the horizontal and vertical axis. Then tweak the `right` value until it's positioned correctly.

Now we need to hide the parts that extend to the right of the bubble. We do this by almost recreating the same shape but filled with our background-color instead, and position it over the previous shape.

```scss
.sent {
  align-self: flex-end;
  color: white;
  background: var(--sentColor);

  &:before {
    right: -7px;
    background-color: var(--sentColor);
    border-bottom-left-radius: 16px 14px;
  }

  &:after {
    right: -26px;
    border-bottom-left-radius: 10px;
  }
}
```

For our received messages we do the same thing but to the left instead of to the right and change the colors.

```scss
.received {
  align-self: flex-start;
  color: black;
  background: var(--receiveColor);

  &:before {
    left: -7px;
    background-color: var(--receiveColor);
    border-bottom-right-radius: 16px 14px;
  }

  &:after {
    left: -26px;
    border-bottom-right-radius: 10px;
  }
}
```

We're almost there but there's one tiny detail left. Notice that when there are multiple messages in a row from the same person there's a tail for each message? We only want to add a tail for the most recent message in that case. Unfortunately there is no "previous sibling selector" in css so we have to go back to our markup and add a `noTail` class. We'll add the class if the next message's sent key is the same as the current message.

```typescript
{messages.map(({ text, sent }, i) => {
  const isLast = i === messages.length - 1
  const noTail = !isLast && messages[i + 1]?.sent === sent
  return (
    <li key={text} className={cn(styles.shared, sent ? styles.sent : styles.received, noTail && styles.noTail)}>
      {text}
    </li>
  )
})}
```
Back in our css we can now hide the tail when the class is applied. We can also optionally decrease the margin a bit so our messages feel more "connected".

```scss
.noTail {
  margin-bottom: 2px;

  &:before,
  &:after {
    opacity: 0;
  }
}
```
That's it! We can now display a list of nicely styled messages, and based on the "sent" key the messages will either display as sending or receiving. If there are multiple messages in a row from the same person only the most recent message will get a tail.

## ✨ Bonus: Animating our messages!

Building a chat app? We can easily animate our component with just a couple of lines of code using [Framer Motion](https://www.framer.com/motion/)!

Wrap your messages in `AnimatePresence` and then make each message a `motion.li`. Apply the `layout` prop to make our messages magically animate smoothly when messages are added or removed. Then specify how the enter animation should look like by adding the initial state (slightly offset with 0 opacity) and the entered state (reset position and full opacity). This time I'm generating the messages with [random-words](https://www.npmjs.com/package/random-words) to make sure our component works with different types of content. [See the full source code on my GitHub](https://github.com/samuelkraft/samuelkraft-next/blob/master/components/animatedmessages.tsx).

```tsx
import { motion, AnimatePresence } from 'framer-motion'
import styles from './messages.module.scss'

const transition = {
  type: 'spring',
  stiffness: 200,
  mass: 0.2,
  damping: 20,
}

const variants = {
  initial: {
    opacity: 0,
    y: 300,
  },
  enter: {
    opacity: 1,
    y: 0,
    transition,
  },
}

const Messages = (): JSX.Element => (
  <AnimatePresence>
    <ol className={styles.list}>
      {messages.map(({ text, sent }) => (
          <motion.li
            key={text}
            className={cn(styles.shared, sent ? styles.sent : styles.received)}
            initial="initial"
            animate="enter"
            variants={variants}
            layout
          >
            {text}
          </motion.li>
        ))}
    </ol>
  </AnimatePresence>
)
```

That's it! If this helped press the like button below or let me know on [twitter](https://twitter.com/samuelkraft).

<AnimatedMessages />



My site is a place to learn and try new tech, so after seeing Lee Robinsons post on [Using the Spotify API with Next.js](https://leerob.io/blog/spotify-api-nextjs) this was definitely something I wanted to try out. The goal was to add a "Now playing" widget to the footer showing what I'm currently listening to on Spotify.

A few years back I purchased the first version of  Apple Watch, and I remember that the "Now playing" complication had a very pleasant animation with "bars" jumping up and down. This tutorial shows how to create a similar animation perfect for visualizing music. This is what we're building: (psst, if I'm listening to music right now you can watch a live example in the footer…)

<div style={{ padding: '50px', backgroundColor: 'var(--boxBg)', borderRadius: '5px', textAlign: 'center' }}>
  <NowPlayingIcon />
</div>

## Let's get started

This animation is written in css modules with sass in a Next.js/Typescript project but can easily be adjusted to pure css by not using nesting & creating unique classes.

Let's start by creating a wrapper div that will contain our bars, then we'll add a span tag for every bar:

```tsx
import styles from './nowplaying.module.scss'

<div className={styles.icon}>
  <span />
  <span />
  <span />
</div>
```

We'll add some containing styles to our wrapper element and style each bar:

```scss
.icon {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 13px;
  height: 13px;

  span {
    width: 3px;
    height: 100%;
    background-color: orange;
    border-radius: 3px;
    content: '';
  }
}
```
Which renders:
<div style={{ padding: '50px', backgroundColor: 'var(--boxBg)', borderRadius: '5px', textAlign: 'center' }}>
  <div style={{ position: 'relative', display: 'inline-flex', justifyContent: 'space-between', width: 13, height: 13 }}>
    <span style={{width: 3, height: '100%', backgroundColor: 'var(--brand)', content: '', borderRadius: 3 }} />
    <span style={{width: 3, height: '100%', backgroundColor: 'var(--brand)', content: '', borderRadius: 3 }} />
    <span style={{width: 3, height: '100%', backgroundColor: 'var(--brand)', content: '', borderRadius: 3 }} />
  </div>
</div>

To make our bars jump we'll create a keyframe animation, transforming each bar's scaleY up and down indefinitely and apply it to our bars.

<Warning>Because our bars have border-radius set, the radius will scale as well. This isn't ideal but I feel like it's a fair trade-off instead of animating the height in order to keep our animation at 60fps. <Link href="https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/">Read more about high performance animations</Link></Warning>
<br />

```scss
@keyframes bounce {
  10% {
    transform: scaleY(0.3); /* start by scaling to 30% */
  }

  30% {
    transform: scaleY(1); /* scale up to 100% */
  }

  60% {
    transform: scaleY(0.5); /* scale down to 50% */
  }

  80% {
    transform: scaleY(0.75); /* scale up to 75% */
  }

  100% {
    transform: scaleY(0.6); /* scale down to 60% */
  }
}

span {
  width: 3px;
  height: 100%;
  background-color: orange;
  border-radius: 3px;
  animation: bounce 2.2s ease infinite alternate;
  content: '';
}
```

The infinite property basically tells our animation to keep going forever, and alternate is the short-hand for [animation-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction) saying that the animation should be played forwards first, then backwards keeping our animation smooth.

<div style={{ padding: '50px', backgroundColor: 'var(--boxBg)', borderRadius: '5px', textAlign: 'center' }}>
  <div style={{ position: 'relative', display: 'inline-flex', justifyContent: 'space-between', width: 13, height: 13 }}>
    <span style={{width: 3, height: '100%', backgroundColor: 'var(--brand)', content: '', borderRadius: 3, animation: 'bounce 2.2s ease infinite alternate' }} />
    <span style={{width: 3, height: '100%', backgroundColor: 'var(--brand)', content: '', borderRadius: 3, animation: 'bounce 2.2s ease infinite alternate'  }} />
    <span style={{width: 3, height: '100%', backgroundColor: 'var(--brand)', content: '', borderRadius: 3, animation: 'bounce 2.2s ease infinite alternate'  }} />
  </div>
</div>

We have a few problems though. First, the bars are scaling from the center instead of the bottom. We can solve this by adding a transform-origin of bottom:

```scss
span {
  width: 3px;
  height: 100%;
  background-color: orange;
  border-radius: 3px;
  transform-origin: bottom;
  animation: bounce 2.2s ease infinite alternate;
  content: '';
}
```

<div style={{ padding: '50px', backgroundColor: 'var(--boxBg)', borderRadius: '5px', textAlign: 'center' }}>
  <div style={{ position: 'relative', display: 'inline-flex', justifyContent: 'space-between', width: 13, height: 13 }}>
    <span style={{width: 3, height: '100%', backgroundColor: 'var(--brand)', content: '', borderRadius: 3, animation: 'bounce 2.2s ease infinite alternate', transformOrigin: 'bottom' }} />
    <span style={{width: 3, height: '100%', backgroundColor: 'var(--brand)', content: '', borderRadius: 3, animation: 'bounce 2.2s ease infinite alternate', transformOrigin: 'bottom' }} />
    <span style={{width: 3, height: '100%', backgroundColor: 'var(--brand)', content: '', borderRadius: 3, animation: 'bounce 2.2s ease infinite alternate', transformOrigin: 'bottom' }} />
  </div>
</div>

Now our bars are animating in height but aligned to the bottom! The last thing we need to do is change so that they are not animating at the same time. We want each bar to start animating at a different time so we'll reach for the animation-delay property. But we can't simply delay each bar, because then the animation would't look good the first few seconds. If we add a negative value to animation-delay, the animation will begin immediately but partway through its cycle. From [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay):

> For example, if you specify -1s as the animation delay time, the animation will begin immediately but will start 1 second into the animation sequence.

Let's add different animation-delays to our bars with the :nth-of-type() selector:

```scss
span {
  &:nth-of-type(2) {
    animation-delay: -2.2s; /* Start at the end of animation */
  }

  &:nth-of-type(3) {
    animation-delay: -3.7s; /* Start mid-way of return of animation */
  }
}
```

<div style={{ padding: '50px', backgroundColor: 'var(--boxBg)', borderRadius: '5px', textAlign: 'center' }}>
  <NowPlayingIcon />
</div>

Voila! We now have a smooth working animation, perfect for building a music widget like the one on this website or similar! Check out the [full source code on GitHub](https://github.com/samuelkraft/samuelkraft-next/blob/master/components/nowplaying.module.scss).
