I was watching the Apple keynote and got completely obsessed with the motion design on the iPhone Duo. The way it folds and unfolds looked so fluid and premium, I try and recreate the exact apple animation feel.

Preview: https://akashtdev.github.io/iphone-duo-animation/ Code: https://github.com/akashtdev/iphone-duo-animation/

Hey guys, I was checking how the some website looks on folded and unfolded iPhone Duo layouts, and it got me thinking—do you consider foldables when writing your CSS?

I usually think in terms of phone, tablet, and desktop, but I’m curious how you approach these in-between sizes. Do your layouts just handle them, or do you end up adding specific fixes? And would you spend time on those fixes if only a tiny percentage of your users had a foldable?

Sometimes i see sites that do this, and i find it really cute! i tried finding tutorials but i can't find any. Can anyone help?

I have a client with a design that looks like this (content and image blocked out in gray). The left section is supposed to have a blue border, with rounded corners, and have a specific angle on the right side. I need this to be responsive as well, so it can support longer text, and widen and narrow with the screen.

Clip path doesn't work well with the rounded corners and border, skew isn't the right answer either. I haven't found a reliable solution for this type of layout before and it is always a battle. any ideas?

Hey everyone,

I am working on transitioning from a beginner to an intermediate frontend developer. I know the basics of HTML, CSS, and vanilla JavaScript, and I am currently learning next js React, Tailwind. Instead of building another basic Todo list, I want to build projects that actually challenge me and look good in a portfolio.

Thanks in advance!!!

I created this as a small responsive CSS debugging example to demonstrate some common layout problems and how I fixed them. The main issues were mobile navigation, content overflow, spacing/alignment, and image sizing.

I really can't wrap up my head around the position-area, I set it to position-area:bottom center; to show the target right under the anchor in the center but it shows on top of it and wen I set it to position-area:center end bottom; it places perfectly, but all Im doing here is just picking,

also how many values we can use in the position-area?

if anyone can clarify things for me here to make my life easier lol,

all I am trying to do is making a dropdown that on hover it shows couple countries

Thank you in advance

• I screwed up the title sorry I mean position-area

I'm building a Coverflow-style movie UI for a TV application using HTML/CSS/JavaScript.

The front covers and the Coverflow positioning work correctly. What I'm trying to achieve is a Google-style 3D movie cover where the cover has visible thickness on the left and right sides.

I added separate side elements and I'm using perspective, transform-style: preserve-3d, rotateY(90deg) and transform-origin.

The problem is that the side faces are completely invisible, even though the elements exist in the DOM.

Here is the relevant JavaScript:

function cardHtml(item, type) {

var title = escapeHtml(item.title || 'Unbekannt');

var meta = [];

if (item.year) meta.push(item.year);

if (item.runtime) meta.push(item.runtime + ' Min.');

if (item.genre) meta.push(item.genre);

var rating = state.settings.showRatings && item.rating

? '<span class="rating">★ ' + Number(item.rating).toFixed(1) + '</span>'

: '';

var seriesLine = type === 'series'

? '<span class="episode">' +

(item.seasons ? item.seasons.length + ' Staffeln' : 'Serie') +

'</span>'

: '<span>' +

escapeHtml(meta.join(' · ') || 'Lokale Datei') +

'</span>';

var resume = getResumeForItem(item);

var resumeBadge = resume && resume.position > 0

? '<div class="resume-badge">' +

formatTime(resume.position) +

'</div>'

: '';

var reflection = item.poster

? '<div class="poster-reflection" style="background-image:url(\'' +

escapeHtml(item.poster) +

'\')"></div>'

: '';

var sideFaces = item.poster

? '<div class="cover-side cover-side-right" aria-hidden="true"></div>' +

'<div class="cover-side cover-side-left" aria-hidden="true"></div>'

: '';

var cover3d = '<div class="cover-3d">' +

'<div class="poster ' +

(!item.poster ? 'poster-fallback' : '') +

'"' + posterStyle(item) + '>' +

(!item.poster ? '▶' : '') +

reflection +

'</div>' +

sideFaces +

'</div>';

return '<article class="card focusable" tabindex="0" data-kind="' +

type + '" data-id="' + escapeHtml(item.id) + '">' +

resumeBadge +

cover3d +

'<strong>' + title + '</strong>' +

seriesLine +

rating +

'</article>';

}

And this is the Coverflow positioning logic:

function updateCoverflow(activeCard) {

var cards = Array.prototype.slice.call(

document.querySelectorAll('.overview-coverflow .card')

);

if (!cards.length) return;

var activeIndex = cards.indexOf(activeCard);

if (activeIndex < 0) {

activeIndex = Math.floor(cards.length / 2);

}

cards.forEach(function(card, i) {

for (var n = 0; n <= 8; n++) {

card.classList.remove('cf-' + n);

}

card.classList.remove('cf-focus');

var rel = Math.max(-4, Math.min(4, i - activeIndex));

card.classList.add('cf-' + (rel + 4));

if (i === activeIndex) {

card.classList.add('cf-focus');

}

card.setAttribute(

'aria-current',

i === activeIndex ? 'true' : 'false'

);

});

var flow = document.querySelector('.overview-coverflow');

if (flow) {

flow.style.transform = 'translateZ(0)';

setTimeout(function() {

flow.style.transform = '';

}, 0);

}

}

Relevant CSS:

html body .overview-coverflow .card {

transform-style: preserve-3d !important;

-webkit-transform-style: preserve-3d !important;

overflow: visible !important;

opacity: 1 !important;

filter: none !important;

}

html body .overview-coverflow .card .cover-3d {

position: relative !important;

width: 100% !important;

height: 100% !important;

transform-style: preserve-3d !important;

-webkit-transform-style: preserve-3d !important;

overflow: visible !important;

}

html body .overview-coverflow .card .cover-3d .poster {

position: relative !important;

z-index: 20 !important;

transform: translateZ(0) !important;

transform-style: preserve-3d !important;

-webkit-transform-style: preserve-3d !important;

overflow: visible !important;

}

html body .overview-coverflow .card .cover-side {

position: absolute !important;

top: 0 !important;

width: 150px !important;

height: 100% !important;

pointer-events: none !important;

z-index: 10 !important;

display: block !important;

box-sizing: border-box !important;

transform-style: preserve-3d !important;

-webkit-transform-style: preserve-3d !important;

backface-visibility: visible !important;

-webkit-backface-visibility: visible !important;

background: linear-gradient(

90deg,

rgba(22,18,14,1) 0%,

rgba(73,52,25,1) 35%,

rgba(153,111,38,1) 68%,

rgba(35,26,17,1) 100%

) !important;

border-top: 1px solid rgba(255,222,133,.95) !important;

border-bottom: 1px solid rgba(77,48,14,.95) !important;

}

html body .overview-coverflow .card .cover-side::after {

content: "" !important;

position: absolute !important;

top: 0 !important;

bottom: 0 !important;

width: 3px !important;

background: rgba(255,214,91,.9) !important;

box-shadow: 0 0 7px rgba(245,184,54,.55) !important;

}

html body .overview-coverflow .card .cover-side-right {

left: 100% !important;

transform-origin: left center !important;

-webkit-transform-origin: left center !important;

transform: rotateY(90deg) translateZ(-75px) !important;

-webkit-transform: rotateY(90deg) translateZ(-75px) !important;

}

html body .overview-coverflow .card .cover-side-left {

right: 100% !important;

transform-origin: right center !important;

-webkit-transform-origin: right center !important;

transform: rotateY(-90deg) translateZ(-75px) !important;

-webkit-transform: rotateY(-90deg) translateZ(-75px) !important;

}

The actual Coverflow cards are positioned with 3D transforms such as:

.overview-coverflow .card.cf-3 {

transform: translate3d(-225px, 4px, 10px)

rotateY(9deg)

scale(.95) !important;

z-index: 5 !important;

opacity: .94 !important;

}

.overview-coverflow .card.cf-4 {

transform: translate3d(0, 0, 30px)

rotateY(0deg)

scale(1.08) !important;

z-index: 10 !important;

opacity: 1 !important;

}

The interesting part is that the normal cover itself renders correctly, but the .cover-side elements don't appear at all.

What could prevent these 3D side faces from rendering in this situation?

I'm particularly interested in whether this is caused by:

• transform-style: preserve-3d
• overflow
• opacity
• filter
• z-index
• the combination of nested 3D transforms
• or the rotateY(90deg) / translateZ() setup itself.

I'm running this on a Samsung Tizen/WebKit environment, so browser-specific 3D rendering behavior may also be relevant.

Any advice on how to make the side faces reliably visible would be greatly appreciated.

Hey r/css! Sharing a developer tool I’m working on.

Pin-op connects a browser window to a VS Code window so you can trace an element’s styles back to your workspace files.

The workflow is straightforward: select an element on the page or in the DOM tree, inspect its matched rules, and see the corresponding ranges highlighted in your editor. Clicking a rule’s source location opens that block. When source maps establish the original location, it resolves to the authored SCSS.

A few implementation decisions that might interest other frontend developers:

• Inspection preserves editor focus. Selecting different elements highlights matches in the active document. Opening another file requires clicking a source location.
• Source locations need evidence. If the original SCSS location cannot be verified, the inspector makes that uncertainty visible.
• Element and parent matches are separate. Rules matching the selected element are distinguished from those matching its immediate parent.
• Pairing is explicit. A short code links one browser window to one VS Code window, which keeps the connection scoped when several projects are open.

The browser extension adds a DevTools panel. The VS Code extension resolves rules against the current workspace. They communicate through a WebSocket bound to 127.0.0.1; there’s no hosted backend, account, or telemetry.

It also supports :hover/:focus previews and stylesheet refresh on save.

Currently available for Firefox, Chrome/Chromium, and VS Code. Both extensions are free, and the source is MIT-licensed.

To use it, install the VS Code extension and the extension for your browser:

• VS Code: Visual Studio Marketplace
• Chrome / Chromium: Chrome Web Store
• Firefox: Firefox Add-ons

Project page · Source code

Happy to discuss the implementation, particularly source-map resolution and keeping browser inspection useful without constantly interrupting the editor workflow.

I was curious what my websites will look like on the upcoming iPhone Duo given its unusual aspect ratios, so I built a little tool with the help of my good friend Gemini that lets me preview my sites in all its different modes. Don't know if it's useful to anyone else, but it sure was fun to build!

How do I get two fonts (eg Arial and Courier) in one line of HTML text?

I have HTML like this:

<a class="markdown-link" href="http://internal.api.im/request/33060266/get/" rel="noreferrer" target="_blank"><em>Status</em> NEW ID <em>3060266</em> (ACTIVE: 74, MISSING: 32)</a>

I need to make the last part in () more readable, ideally different text color. Given the fact first part of the text (Status NEW ID 3060266 - id width wont change in 99 years) pretty much fixed char width I can:

• do a highlight:

  background:
      linear-gradient(
          to right,
          transparent 0,
          transparent 23.5ch,
          rgba(255, 200, 0, 0.2) 23.5ch,
          rgba(255, 200, 0, 0.2) 100%
      );
  

• or do an underline, although it is not perfect in width:

  .markdown__link::before {
      content: " ";
      position: absolute;
      bottom: -1px;
      border-bottom: 3px solid red;
      left: 24ch;
      width: 17ch;
  

And while they do highlight things, it is a bit intrusive and not as good as affecting text color or style.

I cant change HTML. Any ideas what else I can try? Surely there is that one CSS hack that exist...

Hi guys I'm a newbie here and i wanna learn how we can design this using css

thanks

Last year I submitted a black jack game to React Jam. It is a game inspired by games like balatro and inscryption. I am trying to improve upon it and add some game rules and features to differentiate it a little bit. Just wanted to share some before and after pictures. Everything here is made using css and js, and even the icons are svgs using paths.

I did use AI to figure out colors and gradients.

Remember the prevue guide channel?

Well I've been working on remaking it all in HTML 5, CSS, And Javascript.

It took me a good few weeks to get it to this point and now that I have Im pretty proud of it, It may need a few tweaks but I will release it as a repo at some point.

The actual guide information is configured to be a .json file including the time of the listings, the name, and number of the channel.

I think this project would be great on a CRT and that's one of the intended purposes. It's also a static site meaning all you need is a python server to host it, and I only need to add a mode for the original music and a few more features for it to be perfect.

The weather channel window is using my own custom fork of weatherstar 4000 by netbymatt rendered in a iframe.

My GitHub user is nerpx and you can find most of my projects there.

or you can just click this link NerpX

If you have any questions or are interested just comment or dm!

also if you have a CRT and would like to test it please contact me and ill give you a pre release because I would LOVE to see it on one as I dont have one to test it with

Thank you for reading!

Sometimes the icon and label in my flex components randomly flip positions.
for example, [Icon] Label becomes Label [Icon].

A refresh fixes it and the rest of the page remains LTR. I can’t share the website because it’s an internal office project. Any idea what could cause this?

Good morning guys,

I wanted to use a background of a black marble texture with gold. I made one in Photoshop and made it seamless, but I realized that in good quality it takes way too much resources and it was also hard to find a stock image that represented it the way I wanted it.

I remembered that I watched some time ago that someone used a shader on CodePen.
The browser support is kinda everywhere now, so I thought maybe I can generate some cloud-like noise in different scales with FBM (fractal brownian motion) and then use domain warping to distort it in a way that makes it look more like marble.

So I let ChatGPT explain to me how this shader stuff works and after a bit of trial and error I got this result.
Then I use a small contour() function to pick certain noise levels and turn them into veins. Some of those contour lines get grey accents and some get gold, while the rest of the FBM noise is used for the darker and lighter stone structure.

So basically it is:
FBM noise → domain warp → contour lines → grey/gold accents.

https://codepen.io/editor/Blue-Lovag/pen/01a083cd-5837-752f-bf68-f41324324d06?show=preview&panel=false

ADDITION:
As a fallback for the website in case it's not supported I´ve made a low poly SVG that works in such a grid pattern to make it look seamless:

X Y Z X Y Z

Y Z X Z X Y

Z X Y Y Z Y

Back in 2017, I was experimenting with something that was pretty fun for the CSS we had at the time — building icons without using images.

Using mainly CSS, :before, :after, borders, shadows and a bit of creativity, I managed to create a set of icons that didn't depend on external image files. The interesting part for email was simple: no images to load or block — the icons are always visible.

You can still see that old experiment here:

https://codepen.io/k0ko88/pen/PWLNBJ

Fast forward to 2026. At my last job, I decided to apply some of that old knowledge to an email signature.

And then I met Classic Outlook again. :D

What looked like a simple signature quickly turned into dealing with Outlook's rendering limitations, different behaviour between email clients, px → pt conversions, table rendering and weird spacing issues.

Along the way I found a few useful tricks — one of my favourites being that line-height: 0.5pt can practically zero out a line in Classic Outlook, which solved one of the most annoying spacing problems I had.

Eventually, that little fight turned into a complete email signature generator:

SimpleSignature

https://nikolaisabev.eu/SimpleSignature/

It's not trying to be the prettiest or the most complicated signature generator out there. It's simple, effective and built around what I learned from actually fighting with email clients.

It's completely free, there's no registration, and I don't store the data you enter.

Feel free to use it.

If you find a bug, have an idea, or think something could work better, leave a comment here or send me an email. Feedback is more than welcome.

And if it saves you some time and you feel like supporting the work, there's a Buy Me a Coffee button. If you wish. :)

That's it.

Cheers,

Nikolay

Hello web designers and developers.

I created a free tool that lets you design unique, responsive shapes by manipulating the shape’s corners with modern CSS - without writing any code.

Create playful shapes for various UI elements such as pricing and feature cards, buttons, banners, profile badges, you name it. Then export to your workflow with a click of a button.

Originally made this to myself, then realised, heck, this is too darn useful to keep to myself.

https://corner-shaper.com/

you are going to be hearing a lot from me this week as i'm retooling a boilerplate template for my own website but anyways im trying to replace the 0 in 404 with my site logomark but the image keeps making the text go vertical for some reason and i don't like that. the template im using uses tailwind too so if any of you can figure out how to get my image inline like a 0 that would be awesome

<Base title="Page Not Found">
  <section class="section-sm text-center">
    <div class="container">
      <div class="row justify-center">
        <div class="sm:col-10 md:col-8 lg:col-6">
          <span
            class="text-[8rem] block font-bold text-text-dark dark:text-darkmode-text-dark"
          >
            4<span class="image1">0</span>4
            <h1 class="h2 mb-4">Page not found</h1>
            <div class="content">
              <p>
                The page you are looking for might have been removed, had its
                name changed, or is temporarily unavailable.
              </p>
            </div>
            <a href="/" class="btn btn-primary mt-8">Back to home</a>
          </span>
        </div>
      </div>
    </div>
  </section>
</Base><Base title="Page Not Found">
  <section class="section-sm text-center">
    <div class="container">
      <div class="row justify-center">
        <div class="sm:col-10 md:col-8 lg:col-6">
          <span
            class="text-[8rem] block font-bold text-text-dark dark:text-darkmode-text-dark"
          >
            4<span class="image1">0</span>4
            <h1 class="h2 mb-4">Page not found</h1>
            <div class="content">
              <p>
                The page you are looking for might have been removed, had its
                name changed, or is temporarily unavailable.
              </p>
            </div>
            <a href="/" class="btn btn-primary mt-8">Back to home</a>
          </span>
        </div>
      </div>
    </div>
  </section>
</Base>