Design, CG Graphics & Inspiration

25 Fresh Tutorials and Articles for Web Developers

These days, when CSS3 and HTML5 technologies are used so widely, it is hard to find a modern site that was made without the developments of recent years in this area. Among the huge number of new educational articles and tutorials, published daily on the Internet, we have selected only the best information. In this post you will find a lot of useful materials for both beginners and advanced web developers. Enjoy and share your opinion in comments!

Animated Opening Type

A tutorial on how to create an interesting animated 3D opening type effect with pseudo-elements, CSS transforms and transitions. The idea is based on Edenspiekermann’s Open Type project and it’s a very creative way to display and play with letters.
Animated Opening Type in 25 Fresh Tutorials and Articles for Web Developers
Demo

Elastic Stack: Elastic Dragging Interaction

ElastiStack is a little script that let’s you navigate through a stack of items by dragging away the first one. It comes with an elastic touch meaning that when dragging the top-most item, the other ones will follow as if they were connected elastically. When reaching a certain distance, the dragged item will release itself and the next item will pop out.
Elastic Stack: Elastic Dragging Interaction in 25 Fresh Tutorials and Articles for Web Developers
Demo

CSS Overlay Techniques

There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements. In this article we are going to explore each technique’s styles with their pros and cons.
CSS Overlay Techniques in 25 Fresh Tutorials and Articles for Web Developers

Animated SVG Icons with Snap.svg

Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example.
Animated SVG Icons with Snap.svg in 25 Fresh Tutorials and Articles for Web Developers
Demo

Animated Border Menus

A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash’s bounce menu for mobile apps.
Animated Border Menus in 25 Fresh Tutorials and Articles for Web Developers
Demo

Medium-Style Page Transition

An article on how to achieve Medium’s next page transition effect—an effect that can be seen by clicking anywhere on the “Read Next” footer at the bottom of the page. This effect is characterized by the lower article easing upward as the current article fades up and out.
Medium-Style Page Transition in 25 Fresh Tutorials and Articles for Web Developers
Demo

Multi-Item Selection

Ever thought that clicking on multiple checkboxes is not a very user-friendly task? Imagine rows and rows of junk mail that you’d like to select in your email app. This little script tries to ease that task by allowing a rapid and simple selection of multiple items by clicking, holding and moving over the desired items.
Multi-Item Selection in 25 Fresh Tutorials and Articles for Web Developers
Demo

Animations for Thumbnail Grids

There are many parts of a website where we can apply nice transitions to make things more interesting. Images are certainly great entities for playing with fancy effects and today we’d like to show you some inspiration for thumbnail effects using CSS animations.
Animations for Thumbnail Grids in 25 Fresh Tutorials and Articles for Web Developers
Demo

Animated Checkboxes and Radio Buttons with SVG

By animating an SVG path with JavaScript, we can do many fancy things. Today we want to show you some effects for checkboxes and radio buttons. The idea is to hide the inputs, use pseudo-elements to create a more appealing style and then animate the SVG paths once an input is selected.
Animated Checkboxes and Radio Buttons with SVG in 25 Fresh Tutorials and Articles for Web Developers

A Collection of Separator Styles

A collection of separator styles for horizontally dividing sections on a website. The dividers are created using several techniques, including styling pseudo-elements, using gradients and inserting SVG graphics with responsiveness in mind.
A Collection of Separator Styles in 25 Fresh Tutorials and Articles for Web Developers
Demo

Creating Non-Rectangular Layouts with CSS Shapes

Today we can create all kinds of shapes with CSS using CSS transforms, but all these shapes do not affect the flow of the content inside or around them. That is, if you create a triangle or a trapezoid with CSS, for example, the shape created does not define or affect the way the text inside it flows, or the way inline text around it does.
Creating Non-Rectangular Layouts with CSS Shapes in 25 Fresh Tutorials and Articles for Web Developers

Creating an RSS Feed Using PHP and PDO

Using an RSS feed on your website is a great way of letting your visitors, search engines or directories, get a hand on your content. RSS feeds are common practice on most blogs and CMS platforms including WordPress, Joomla and evenly the newly released Ghost.
Creating an RSS Feed Using PHP and PDO in 25 Fresh Tutorials and Articles for Web Developers

Vertical Percentages in CSS

Even for height values, I may have used a 100% value for a hack, but nothing else.
Vertical Percentages in CSS in 25 Fresh Tutorials and Articles for Web Developers

How to write simple, elegant CSS with Compass & Sass

A lot of designers use some sort of CSS pre-processor, whether that be Sass, LESS or Stylus. If you’ve used any of these, you’re probably also aware that Compass is a framework built on Sass, and although its installation may be off-putting, once you use it you’ll quickly discover it’s one of the best skills any web designer can learn.
How to write simple, elegant CSS with Compass & Sass in 25 Fresh Tutorials and Articles for Web Developers

Tetris & The Power Of CSS

Tetris & The Power Of CSS in 25 Fresh Tutorials and Articles for Web Developers

Flexible Google-style loader with CSS

Flexible Google-style loader with CSS in 25 Fresh Tutorials and Articles for Web Developers

Which CSS Measurements To Use When

Amidst the diversity of CSS measurement systems it can be difficult for web developers to understand which units to use where, and when, on their pages. The instinct is to use just one system for everything, but that decision can severely limit the execution of your designs.
Which CSS Measurements To Use When in 25 Fresh Tutorials and Articles for Web Developers

Killer Responsive Layouts With CSS Regions

As Web designers, we are largely constrained by the layout features available to us. Content placed inside a container will often naturally extend the container vertically, wrapping the content. If a design requires elements to remain a certain height, then our options are limited. In these cases, we can only add a scroll bar or hide the overflow. The CSS Regions specification provides a new option.
Killer Responsive Layouts With CSS Regions in 25 Fresh Tutorials and Articles for Web Developers

CSS and the Golden Ratio

CSS and the Golden Ratio in 25 Fresh Tutorials and Articles for Web Developers

Multi-Line Padded Text

Multi-Line Padded Text in 25 Fresh Tutorials and Articles for Web Developers

Responsive images

Responsive images in 25 Fresh Tutorials and Articles for Web Developers

An Introduction To DOM Events

I will introduce the basics of working with DOM events, then delve into their inner workings, explaining how we can make use of them to solve common problems.
An Introduction To DOM Events in 25 Fresh Tutorials and Articles for Web Developers

Choosing the perfect Typeface – Cucumbertown’s journey

Choosing the perfect Typeface – Cucumbertown’s journey in 25 Fresh Tutorials and Articles for Web Developers

Email Domain Datalist Helper

Email Domain Datalist Helper in 25 Fresh Tutorials and Articles for Web Developers

Get started with Scalable Vector Graphics

Scalable Vector Graphics, or SVGs are an image format that scale beautifully to different resolutions and pixel densities. They also have a number of other tricks up their sleeves, such as animations and support for media queries.
Get started with Scalable Vector Graphics in 25 Fresh Tutorials and Articles for Web Developers

SHARE THIS POST

Andrew is the chief editor of Splashnology blog. He has many years of experience within the web design industry and has a passion for the latest web technologies. 3D Models Marketplace

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.