HTML and CSS snippets

There are some clever tricks that we can play to implement interesting and innovative features. Sometimes I don't want to use Javascript just to show sub menu or to change element's color after click, so I use these snippets quite often. For simplicity I'm using TailwindCSS here.

Overlay elements without position relative and absolute

In the old days, to stack two layers on top of each other or to place one element over another in general, we've had to use position: relative; and position: absolute;. It was useful in animations to hide one thing and show another in place. The biggest problem with this method is that absolutely positioned elements are no longer in the context of the page so element wrapping it is not resizing, thinking that absolutely positioned element is 0px. At least that's how I can describe it.

Nowadays we have an excellent way to do the same without any side effects like this 0px out-of-page-context issue. So your wrapper has to be display: grid; and then elements on top each other have to be grid-column-start: 1; grid-row-start: 1;.

Example where "Layer One" is in the same position as "Layer Two":

<div class="grid">
  <div class="col-start-1 row-start-1">Layer One</div>
  <div class="col-start-1 row-start-1">Layer Two</div>
</div>

Style file input

By default we can't do much with file input. It has this ugly button and a field where the name of uploaded file appears. But we can use a trick to make it all look the way we want. It can become just an image or just a button or another styled field, the trick is to make original file input to overlay our custom field and then disappear by setting its opacity to 0. Another interesting thing is that if you want to style cursor, it won't be styled when it's over an original file upload button, so you have to remove it from the frame. Here I set overflow: hidden on the wrapper and then I give input field negative left position to remove upload button from my view:

<div class="relative oveflow-hidden">
    <input
      type="text"
      class="w-full border-2 border-black rounded-xl placeholder-gray-400 py-1 px-4 disabled:text-gray-500 disabled:bg-gray-100"
    />
    <input
      type="file"
      class="absolute inset-0 -left-24 appearance-none opacity-0 cursor-pointer"
      title="Select file to upload"
    />
</div>

Show sub menu on hover

This concept is probably known to the most developers, but it's worth adding here for the wall of fame. Hovering over an element of the main menu is making sub menu to also appear and show more links/options. Classes from TailwindCSS. You can see DEMO here and full working example with border, background and padding can be seen on Liv Weber's page (link here soon).

<nav class="w-full flex items-center gap-x-4 focus:[&_a]:underline hover:[&_a]:underline">
    <a href="#">One</a>
    <div class="group relative">
        <span>Two</span>
        <div class="absolute hidden flex-col whitespace-nowrap group-focus:flex group-hover:flex">
            <a href="#">Two Three</a>
            <a href="#">Two Four</a>
        </div>
    </div>
</nav>

COMMENTS