css
COLOR & TYPOGRAPHY TOOLS FOR WEB DEVELOPERS AND DIGITAL DESIGNERS.
Find colors and typography combinations ready to copy paste in one click, and find useful resources for your workflow and if is missing, you can submit it for free.
CSS fix for 100vh in mobile WebKit
Not long ago there was some buzz around how WebKit handles 100vh in CSS, essentially ignoring the bottom edge of the browser viewport. Some have suggested avoid using 100vh, others have come up with different alternatives to work around the problem. In fact, this issue goes further back a few years when Nicolas Hoizey filed a bug with WebKit on the subject … Read more
Immersive Transition Effect
Dependencies CodyFrame (CodyHouse front-end framework) Tutorial We can start creating two block elements, one used for a media item (e.g., video/image) and the other for generic content. During the scrolling, the media element should get fixed once it reaches the center of the viewport. From that point on, it should scale up to animate in a … Read more
A minimalist stylesheet for HTML elements
No class names, no frameworks, just semantic HTML and you’re done.
CSS Viewport Units
CSS Viewport units have been around for the last few years, and by time, I see them being used more and more by developers. Their benefit lies in providing us with a way to size things in a fluid and dynamic way, without the need to use JavaScript. Also, it’s easy to provide a fallback … Read more
Create Diagonal Layouts Like It’s 2020
TL/DR: Diagonal layouts are great. You can build them easily with CSS. Take a look at this CodePen to see how it works. Layouts with diagonal sections are quite popular for several years now. It is not the new hot stuff, and you will probably not find it in the articles titled “Design trends for 2020”. But I … Read more
Adaptive Photo Layout with Flexbox
Let’s take a look at a super lightweight way to create a horizontal masonry effect for a set of arbitrarily-sized photos. Throw any set of photos at it, and they will line up edge-to-edge with no gaps anywhere. The solution is not only lightweight but also quite simple. We’ll be using an unordered list of images and … Read more
Optimize Images for Web
When it comes to marketing your website, there are a lot of different aspects to consider, such as speed, SEO, conversation rates, bounce rate, and many others. We normally focus solely on the performance aspect, but today we want to dive into additional ways you can optimize images for the web. The file size of your … Read more