Using CSS shape-outside to emulate shape-inside with fixed positioning. For all modern browsers except IE and Firefox.

A demonstration showing how to animate CSS shapes. For all modern browsers except IE and Firefox.

A demonstration showing how to animate CSS shapes using @keyframes to produce an autorun slideshow. For all modern browsers except IE and Firefox.

A second demonstration showing how to animate CSS shapes using @keyframes to produce an autorun slideshow. For all modern browsers except IE and Firefox.

A simple CSS ONLY modal windows template, suitable for all the latest browsers.

A CSS responsive slide down menu for all the latest browsers, OS and devices without using media queries.

A CSS ONLY responsive slideshow to rival jQuery/javascript with ability to show different images on PCs, tablets and mobiles

A javascript (no jQuery) responsive swipe action panel changer for mouse and touch screens. Works in all the latest browsers and operating systems.

A CSS only responsive swipe action gallery with momentum scrolling. For touch screen and trackpad.

A CSS and javascript responsive swipe action gallery with momentum scrolling. For touch screen, trackpad and mouse.

A CSS responsive swipe action momentum menu for all the latest browsers, OS and devices using a little javascript.

A CSS only responsive full page gallery for all devices with no visible scrollbars.

A CSS responsive 3D 'slinky' animation for all the latest browsers, but buggy on iOS.

A CSS only circular menu with bounce animation using cubic-bezier timing.

A CSS only page layout using 'scroll snap points to scroll the page one screen at a time.

A CSS only 3x3 grid layout using 'scroll snap points to scroll the grid one screen at a time. For IE11 and Edge at the moment.

A CSS only menu using flexbox and order animation. Suitable for all the latest browsers, but only Firefox supports animation of the 'order' style.

A CSS only responsive multi-level slide in menu suitable for all the latest browsers and OS.

A CSS only responsive multi-level concertina menu with bounce action suitable for all the latest browsers and OS.

A CSS only responsive multi-level tree menu with slide action suitable for all the latest browsers and OS.

A CSS responsive auto run slideshow with image selection and pause on hover

A CSS responsive slideshow with play, pause, previous, next, captions and image selection

A second CSS only responsive multi-level tree menu with slide action suitable for all the latest browsers and OS.

A CSS only responsive layout suitable for all the latest browsers and OS.

A third CSS only responsive multi-level tree menu with slide action suitable for all the latest browsers and OS.

Using 'Swiper' with html5 'picture' element to change the images depending on the browser window size, and update parameters.

How to have thumbnail images on a single responsive 'Swiper' slideshow.

Customizing a single responsive 'Swiper' slideshow to have thumbnails, animated captions, dynamic prev/next arrows and pause autorun.

Customizing a single responsive 'Swiper' slideshow to have background thumbnails and large images, animated captions, pause autorun.

A jQuery plugin gallery with many user parameters and customization v1.0.0

A jQuery plugin slideshow with many user parameters and customization v1.0.0

A fourth CSS only responsive multi-level menu with slide action suitable for all the latest browsers and OS.

A fifth CSS only responsive multi-level tree menu with slide action suitable for all the latest browsers and OS.

Using html5 to use four diferent images depending on browser window size. Suitable for all modern browsers.

An update to a previous circular menu (July 2011) using the latest CSS techniques.

A simple responsive gallery using flex box.

I want to share a fantastic little tool that I've only recently come across; Live.js, written by Martin Kool. This JavaScript file automatically checks for changes to your CSS and JavaScript files, and refreshes them. That means you can have your text editor in one half of the screen, and a web browser in the other. When you save changes in the editor, the updates are reflected immediately in your browser. It really helps to speed up your development time.

Transitions (basic animations) are one of the most popular additions in CSS3, and one of the easiest to implement for big gains on your site. A transition is simply an animation from one set of CSS properties to another. So for example; whilst before you may have had links with blue text, which suddenly turned orange when you hovered on them, you would now replace that sudden jump with a more graceful animation. In this post, we'll look at the basic syntax, step through some examples, and finally take a brief look at current browser support.

https://css-tricks.com/making-dark-theme-switcher-with-postcss/

Chris Coyier of CSS-Tricks is an amazing engineer and blogger. He’s not only creative but has always had the drive to put his thoughts to work, no matter how large. He also has a good eye for the little things that can make CSS-Tricks or your site special. One of those little things is his […]

The post How to Create a CSS-Tricks Custom Scrollbar appeared first on David Walsh Blog.

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 […]

The post 9 Simple CSS Image Filters appeared first on Web Designer Wall.

One of the challenges of coding premium WordPress themes is the unpredictable nature of how they will be used. Compared to coding a custom website, especially one using static HTML documents where you have complete control over the markup, you have to solve problems creatively and ensure flexibility. In these cases, CSS selectors make all […]

The post The Power of CSS Selectors and How to Use Them appeared first on Web Designer Wall.

The temptation to dive right into new and exciting CSS tricks is strong – you might even do it without knowing it through learning by example or implementing that hot new framework everyone is talking about. It is more important to fully understand new CSS classes and properties, experiment with them and learn their limitations […]

The post You Might Be Tempted to Use These CSS Tricks But Should You? appeared first on Web Designer Wall.

Getting content to center perfectly within an element and then ensuring it responds properly at different screen sizes is one of the biggest challenges that still face front-end designers. It is not that it is difficult, but because there are several ways to go about it, figuring out which method is best can be confusing. […]

The post CSS Vertical Centering – Everything You Need To Know appeared first on Web Designer Wall.

There is no better time than the end of the year for some fresh inspiration! One of the most popular trends this year, features splitscreen layouts, lots of white space, clean typography and subtle effects. With this playful trend in mind, I’ve created a two-part tutorial to show you how to use flexbox, 3D transforms […]

The post Tutorial: Trendy Splitscreen Layout With CSS3 Animations (Pt. 1) appeared first on Web Designer Wall.

All websites are somewhat interactive…we click on links or scroll a page, but truly interactive websites take us on a user-driven adventure or draws us in through motion and sound while giving us the power of choice. Interaction can be as simple as a series of clicks that navigate us through a story or landscape, […]

The post 30 Truly Interactive Websites Built With CSS & JavaScript appeared first on Web Designer Wall.

Last week I demonstrated how to build a split-screen website layout using CSS flexbox and viewport units that offers an alternative way to present a brand’s featured content. Clicking on one side or the other navigates further into the site without a page load, using CSS transitions and 3d transforms. This week, I’ll show you […]

The post Tutorial: Duo Layout With CSS3 Animations & Transitions (Pt. 2) appeared first on Web Designer Wall.

When Spotify launched their colorful new brand identity, featuring hip duo-toned imagery, it went hand-in-hand with a new Colorizer tool that allows artists to apply a variety of filters to images. This solved a problem in which Spotify needed a way to present the thousands of images uploaded, all with a different look and feel, […]

The post How to Create Spotify Colorizer Effects With CSS Blend Modes appeared first on Web Designer Wall.

CSS flexbox is an incredibly useful tool for layout without using floats or positioning. Currently almost all current browser version support flexbox, making it a go-to standard for web design. It can solve a number of problems efficiently, such as vertical alignment, space distribution, ordering of elements and sizing. It offers more freedom to arrange […]

The post Master CSS Flexbox in 5 Simple Steps appeared first on Web Designer Wall.

Recently, I walked you through how to create a simple landing page that used a couple different CSS animation techniques. “Animation” is a loose term, in web design usually referring to anything that involves movement. CSS transitions are one tool we are given to manipulate elements on state changes or mouse events, and when combines […]

The post Easy CSS Animation With Transition & Transforms appeared first on Web Designer Wall.