How to Use CSS Math Functions Apr 15, 2022
The CSS logical functions calc(), clamp(), min() and max() are supported by all modern web browsers. But, despite being readily available – a simple GitHub search tells us that adoption for these functions has been slow. So, how exactly do we use them to build fluid and responsive layout experiences? Let’s find out.
Beginner’s Guide Into Responsive Web Design Aug 06, 2014To understand the principles of responsive design you need to know three things that make the basis of this design principle. Meta Tag Viewport, HTML Structure and Media Queries
Multi-Level Push Menu for Infinite Nested Submenus Oct 10, 2013
Codrops share another menu experiment with you. For sure you are familiar with the off-canvas navigation on mobile apps and the implementations for responsive websites like the one by David Bushell. We tried to explore the possibility of creating a nested multi-level menu, something that could be quite useful for menus with lots of content (like navigations of online stores). The result is a “push” menu that can (theoretically) contain infinite nested sub-menus. When opening a sub-level, the whole navigation pushes the content more, allowing a slice of the parent menu to be visible. Optionally, this slice can be visible or not, in which case the sub-menu will simply cover its parent.
Working with nested structures is quite tricky because when we, for example, move the parent then all children will of course move as well. So we are using a couple of tricks that will maintain the right 3D translates for the sub-menus and their children. The main idea is to increment the value for the translate so that we guarantee that the sub-levels are not shown once we push everything a bit more for showing the slices of the parents. This is of course not necessary in the case where the sub-menu is covering the parent menu.
Web Design 101: Backgrounds Jun 04, 2007
The CSS background property allows you to apply background colors and images to elements as required. But there are plenty of strange quirks and bugs that may surprise the unwary developer.
Rediscovering the Button Element Jun 04, 2007
The input with the type=”submit” is either too ugly (Firefox), a little buggy (Internet Explorer) or completely inflexible (Safari).
Fancy Form Design Using CSS Jun 02, 2007
Form design is the necessary evil of web development. Don’t you wish you had a wizard’s wand to create accessible yet attractive forms? We have found such a wizard! Here, Cameron Adams shows you how to use CSS to create forms that are both great-looking and usable, and gives you the code you need to make the job easy.
Learn CSS Positioning in Ten Steps Apr 26, 2007
This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float.
Web Design 101: Positioning Apr 19, 2007
An element with position:absolute is removed from the document flow, which means the rest of the document acts as if the element weren’t there. It won’t affect subsequent elements. Instead, it could end up layered over other elements, unless we make sure it doesn’t.