CSS

CSS image filters are a quick way to tweak images in the browser without resorting to Photoshop. This simple reference gives you 9 CSS filter shorthands that provide an excellent way to maintain style consistency across visual content on your site, or just add a little fun to image hovers. CSS filters are most commonly used to adjust the display of images images and backgrounds, but can also be applied to other visual elements such as borders and buttons.

Inserting icon fonts to your layouts adds fun visual queues for your users and are especially successful as menu links or as replacements for larger graphics. Like standalone SVG files, they can be scaled losslessly and manipulated with CSS for easier customization. Icon fonts are normally displayed by including an icon font stylesheet, then inserting an HTML element where the icon should appear, such as <span class="icon123"> or <i class="xyz">, but using the HTML method is not always possible. This quick tip will show you how to add icon fonts to any element in your site safely with just CSS.

Hero headers or hero images are one of the most frequently used and aesthetically pleasing web deisgn trends in 2016, and will likely remain strong for a few years to come. The term "hero" is often interchanged with "jumbo" and refers to full-width graphics or photos seen at the top of a post or page, like you see on this one! There are several ways to use a hero image in web design, from full-screen backgrounds to simply adding visual impact to page content.

There are many Javascript fixes for the viewport height units bug in iOS 7 (iPhone & iPad), this article will cover how to resolve this bug with CSS. This particular bug affects the rendering of viewport height units, for example: if you try to make a full viewport height container with height:100vh, it will display a very tall empty gap. Although this bug was fixed in iOS 8, but many old iPhone and iPad users are still using the old iOS 7. The vh-unit buggyfill is one of the popular Javascript workarounds, but if you don’t want to rely on Javascript here is a quick CSS fix using media queries.

Previously I wrote a tutorial on how to make a mobile navigation for responsive design, now I’ve discovered a new technique to produce a responsive menu without having to use Javascript. It uses clean and semantic HTML5 markup. The menu can be aligned left, center or right. Unlike the previous tutorial where it is clicked to toggle, this menu toggles on hover which is more user friendly. It also has an indicator to show the active/current menu item. It works on all mobile and desktop browsers including Internet Explorer!

View Demo Responsive Menu

Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I’m going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. I use this trick to code the WordPress themes at Themify. It doesn’t require any first or last class and the number of columns can be adjusted base on the viewport. In other words, it can be toggled from 4-column to 3-column or 2-column, etc.

View Demo Responsive Column/Grid

Long ago I wrote a tutorial on how to make decorative image galleries using an extra <span> tag. It requires jQuery to append the span tag which isn’t quite user friendly. Today I’m going to share a better method without using Javascript. The same result can be achieved by using :before or :after pseudo element. The :before element is one of the commonly under used elements, but it is quite useful for adding additional elements or content. Learn it now and start using it.

View DemoDecorative Gallery

1 2 3 4 5 >»