mddanishyusuf
5 months ago

Design an input box with search emoji

Recently I add search input box into dailyhack.xyz and without search icon the input doesn't feel good according to UX. So, to add a icon inside input box need more element and CSS. Nowadays I'm using lots of emoji and I think why not use a little hack to design this search input box without any extra element and CSS. Here is the hack.

<input type="text" placeholder="🔍 Let's find some tricks from past"/>

input-with-emoji

So, I'm adding a search emoji into placeholder of the input box.

What you think? is this cool hack?

mddanishyusuf
6 months ago

CSS border awesome tricks

I found this CSS tricks to rounded the box in one CSS code. Here I'm sharing a codepen.io link.

https://codepen.io/mddanishyusuf/pen/GLKwpx

Pattern: border-radius: <horizontal radius> / <vertical radius>

  1. border-radius: 60px 45px 30px 15px/15px 30px 45px 60px;
  2. border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  3. border-radius: 50% 40% 45% 50% / 40% 50% 55% 40%;
  4. border-radius: 50% 50% 40% 40% / 60% 60% 20% 30%;

image

Load More