Designing Instagram’s New DMs, Using HTML CSS

When I saw this screen I was not that intrigued, as to what was happening, until I scrolled.

Taken from google images(NOT MY DMs I don't write ‘get’ like that)

Once you scroll you see that the text color depends on the position of the text on the screen from the user’s end.

She does have an apple logo in her name, don't know how? Rachel How 😏, yes I am really proud of that joke…

As you can clearly see my friend and colleague Rachel, was suggesting me to get a keyboard cover for my new mac. Thanks to her suggestion, now I can eat chips while binge-watching a tv series without worrying about the butterfly keyboard messing up.

Where was I? Yeah, the scroll-based text background change.

I started to think, this looks kinda nice, to be honest, and I didn’t pay much attention to it. Until one fine groggy morning, I was scanning a QR code at my favorite coffee shop entrance, I saw next to the contact tracing notice(yes, we still are coming to terms with 2020), I saw a notice stating that “People without masks won't be allowed in”. What if the insta DM design is a mask!

So I did want every curious person does, google. And looked into how I can re-create something like this.

Expectations first:

• Replicate the masking feature
• Try to address as many CSS nitpicks as possible.

Okay so let’s break things down into simple steps…

Rachel’s avatar is at the bottom-left of a container which has Rachel’s texts, let’s name that classfriend-text-div . Notice the text boxes inside that div have a peculiar border-radius…

Something similar can be said about my-text-div . But my div has that changing background.

Upon breaking the task down you can clearly see that the style for both of them is similar, except for the background and maybe the avatar position. We’ll see that later. We are not involving any JS or UX solution-ing in this blog. Just the styling.

The background seems to be a fixed gradient. While these elements are masked over it, with my-text-div being the transparent div.

Disclaimer: I am making this without a Figma or a sketch file to have as a guide. I’ll try to make it as pixel-perfect as possible, but excuse small details if you do see them.

PS: I will post the link to the codepen at the end, you can just go ahead and play with it.

Solution walkthrough —

I found out there is a different feature I could use to replicate this effect and not masking called background-attachment , read up more about it here. What this does basically is that even if an element has a scrolling mechanism, the background doesn’t move with the element.

This would be used somewhere in my-text-div .

Whereas the body could just be,

body{
 background: #000000;
 height:100vh;
}

I wanted to have a base container to basically flex out friend-text-div
and my-text-div .

.base-container {
 width: 100%;
}

The friend-text-div is gonna have to take care of the text divs inside and the image avatar.

.friend-text-div {
 display: flex;
 margin-left: 0.5rem;
}
.friend-text-div > img {
 height: 2rem;
 align-self: flex-end;  //as the image needs to be at the bottom
}

The friend-text-div is supposed to have a container for the texts that can be flexed column-wise.

.friend-text-container {
 width: 10rem;
 display: flex;
 flex-direction: column;
}

This is the basic text box style I’m gonna use albeit without the background color.

.friend-text {
 background: #262626;
 border-radius: 0.5rem;
 color: #fff;
 height: fit-content;
 width: fit-content;
 padding: 0.5rem 1rem;
 margin: 0.12rem 0.5rem;
}

I repeated similar CSS for my-text-div also so gonna spare showing repetitive CSS here. Let’s jump to the main magic…

.my-text {
 background: linear-gradient(
 180deg,
 rgba(139, 47, 184, 1) 0%,
 rgba(103, 88, 205, 1) 51%,
 rgba(89, 116, 219, 1) 92%
 )
 no-repeat center;
 background-attachment: fixed;
 color: #fff;
 border-radius: 0.5rem;
 height: fit-content;
 width: fit-content;
 padding: 0.5rem 1rem;
 margin: 0.12rem 0.5rem;
}

This is where the magic happens. background-attachment feature when put to fixed, fixed the background regardless of the scroll position.

Minor CSS nitpicks

.my-text-container >div:first-child{
 border-radius: 0.5rem 1rem 0.2rem 0.5rem;
}
.my-text-container >div:last-child{
 border-radius: 0.5rem 0.2rem 1rem 0.5rem;
}

Same for friend-text-container .

Gives that extra border-radius to the first and last my-text-container as well as friend-text-container element.

Oh and almost forgot. I used ‘Montserrat’ as a font as I couldn’t find ‘Proxima Nova’ as readily available.

As promised, the link to the codepen,

This would work better if you run in on a mobile view as opposed to a desktop view. Even Instagram doesn’t do that yet 😉.

I have used some really non-sensical text to showcase my example but oh well, as long as it displays what I wanted to show.

Hope you had some fun and/or learned something new reading this that you can use going forward someday. Until next time! See ya!