filmov
tv
How to make Safari iOS style app icon using just HTML and CSS

Показать описание
An iOS Safari app icon consists of 4 main components. An outer frame, a dial, marker, and a needle. The frame is a round rectangle created from a div with a sufficient border-radius. The dial is another div with a linear-gradient background and 50% border-radius. The marker is another div with repeating-conic-gradient combined with a radial-gradient with a solid color at the center and transparent color at the end. The needle is created using the :before and :after pseudo-classes with just border width and color adjusted.
Pause the video and have a close look at the CSS codes for better clarity on how I did this.
Enjoy!
Pause the video and have a close look at the CSS codes for better clarity on how I did this.
Enjoy!