8 COMMENTs
HTML & CSS
Byron Houwens, Aug 16

Sass Functions to Kick-Start Your Style Sheets

Byron shows us some of Sass functions built into the language and shows how you can use them to kick-start your style sheets.
HTML & CSS
Ivaylo Gerchev, Aug 15

How to Create Beautiful HTML & CSS Presentations with WebSlides

Ivaylo Gerchev guides you step by step as you create a beautiful HTML and CSS web presentation using WebSlides, a fantastic framework for this kind of task.
HTML & CSS
Michael Romanov, Aug 10

Frame by Frame Animation Tutorial with CSS and JavaScript

Michael Romanov explains how you can build a frame by frame animation with just HTML, CSS and JavaScript which performs well and works great on all browsers
19 COMMENTs
HTML & CSS
Hugo Giraudel, Aug 08

What's the Difference Between Sass and SCSS?

Hugo Giraudel explains clearly the differences between Sass and SCSS and offers an overview of the two syntaxes, a bit of history, and his recommendations.
HTML & CSS
Asha Laxmi, Aug 07

CSS Inheritance: An Introduction

Asha Laxmi introduces and explains what CSS inheritance is, how it helps development, and what pitfalls to avoid while using it.
HTML & CSS
Adrian Sandu, Aug 02

Replaced Elements in HTML: Myths and Realities

Adrian Sandu shares some myths and facts about HTML replaced elements and how browsers treat them according to the specifications.
16 COMMENTs
HTML & CSS
Darren Wood, Aug 01

Getting Started with Sass

Darren Wood offers an overview of Sass (Syntactically Awesome Style Sheets), where you'll learn why you need it and how to get started with it right now.
8 COMMENTs
HTML & CSS
Craig Buckler, Jul 25

How to use Media Queries in JavaScript

Craig Buckler gives you an accessible introduction to using media queries with JavaScript with matchMedia for a robust responsive design approach.
HTML & CSS
Maria Antonietta Perna, Jul 20

GreenSock for Beginners (Part 2): GSAP's Timeline

In Part 2 of her GreenSock (GSAP) tutorial for beginners, Maria Antonietta Perna shows how GSAP timeline makes coding complex animations easier and faster.
HTML & CSS
Giulio Mainardi, Jul 18

Building a 3D Rotating Carousel with CSS and JavaScript

Giulio Mainardi shows you how to build a 3D rotating carousel using CSS 3D transforms, with some nifty math tricks and some JavaScript to enhance.
10 COMMENTs
HTML & CSS
Craig Buckler, Jul 13

7 of the Best Code Playgrounds

Craig Buckler lists 7 code playgrounds to experiment with your front-end code. Every developer likes to play with code, which one is your favorite?
Design & UX
Alex Walker, Jul 12

SVG Tip: Create a Bold Vector Halftone Graphic in Under 2 Minutes

This is a section from a 500 year old woodcut from perhaps the 'Andy Warhol of woodcut artists' - Albrecht Dürer. Woodcut is an old printing technique where the image is hand engraved into a wooden block by specialist blockcutters. Prints are then taken from the block.

[caption id="attachment_157164" align="alignright" width="187"]Dürer Dürer (Surprisingly, not the
guy from Nickleback.)[/caption]

Woodcuts are always bold and stark in nature because – unlike most painting techniques – there are no mid-tone colors or blends. The paper is either clean white or drenched ink black – there are no gray areas.

However as you can see, Dürer is able to mimic mid-tone grays by building up a fine rendering of linework. In his case, he uses parallel fill lines, but it's possible to get the same effect with cross-hatching, waves, ribbons, arcs, dots and other patterns.

Although it's a very old technique, we still see it everywhere today – from tattoos to beer labels to bank notes. Most of us have admired the beautiful, wavy ribbon linework used on paper money, sometimes called 'guilloché'.

Halftone examples

It also turns out to be perfectly suited to the mathematical precision of SVG – though hand rendering thousands of precision lines by hand may be impractical for many of us. There are professional options available if you're super-serious – Excentro is cool.

But if that's overkill, let's look at a simpler, more affordable solution.

How do I make a Halftone?

HalftonePro is an online service that converts photos into 'halftones' - what the printing industry calls these graphics.

Using this app is relatively simple but the results take some tuning.

  1. IMAGE: Upload your photo. If this is your first time, jump to the 'Preset' menu at the bottom, as it will give you a feel for the app faster.

  2. SHAPE: The 'Shape' menu lets you change the shape that makes up the image – circles, squares, lines, etc.

  3. PATTERN: The 'Pattern' menu is where things get complex. You can choose the grid that your shape adhere to. While I'm not going to bore you by explaining all the sliders here, the 'Vertical elements' slider is probably the most important. This sets the level of detail in your conversion. A setting of 25 is chunky – a setting of 150 is finely detailed. TIP: Don't set Vertical elements higher than about 150 as you'll be creating a HUGE SVG file and may even crash your browser.

  4. COLORS: Pick your palette.

  5. RESIZE: You can guess.

  6. PRESETS: The dozen or so presets provided give you a good sense of what this app can do. You can also save your own custom presets here.

Bowie - Before changes

High contrast images are likely to work best. I uploaded this classic black and white Bowie shot as a test and used the default 'Wave' preset with a 'Vertical elements' setting of 150.

5 COMMENTs
HTML & CSS
Giannis Konstantinidis, Jul 11

6 Free Material Design CSS Frameworks for 2017 Compared

Giannis Konstantinidis lists some great Material Design CSS frameworks and compares them to make it easier for you to choose what best fits your needs.
4 COMMENTs
HTML & CSS
Christian Krammer, Jul 06

A Friendly Introduction to Flexbox for Beginners

Christian Krammer walks you through the basics of Flexbox, which you can use to layout specific page elements and also as a fallback method to Grid Layout.
Design & UX
Alex Walker, Jul 06

6 Clever SVG Pattern Generators for Your Next Design

Though SVG Patterns aren't super widely understood, they offer a lot of really interesting design options – once you get your head around them.
5 COMMENTs
HTML & CSS
Kalpesh Singh, Jul 05

Building Mega Menus with Flexbox

Kalpesh Singh uses Flexbox features to build a mega drop-down navigation menu, a well known design feature that many incorporate into large websites.
Design & UX
Ivaylo Gerchev, Jul 04

How to Optimize and Export SVGs in Adobe Illustrator

SVG is a powerful format but you need to make good decisions to get great results. Ivalyo walks you through exporting SVG in Adobe Illustrator.
1 COMMENT
HTML & CSS
Alok Shah, Jun 30

Introducing Website Speed Test: An Image Analysis Tool

Learn about Cloudinary's new Website Speed Test, an image analysis tool that's integrated with WebPagetest.
HTML & CSS
Craig Buckler, Jun 28

​An Introduction to Component IO

Craig Buckler takes a look at Component IO, which provides content management for individual pieces of your website.
7 COMMENTs
HTML & CSS
Maria Antonietta Perna, Jun 28

GreenSock for Beginners: a Web Animation Tutorial (Part 1)

Maria Antonietta Perna introduces GreenSock in a multi-part article for the Beyond CSS: Dynamic DOM Animation Libraries series. Ready for some cool effects?
13 COMMENTs
HTML & CSS
Craig Buckler, Jun 22

How to Apply CSS3 Transforms to Background Images

Craig Buckler shows how to apply CSS3 transforms to background images. Rotating and skewing elements with stunning backgrounds will now be a breeze!
4 COMMENTs
HTML & CSS
Adrian Roworth, Jun 21

How I Built a Pure CSS Crossword Puzzle

Adrian Roworth recently built a pure CSS crossword puzzle using form elements and new Grid Layout features. In this tutorial, he explains the key concepts.
12 COMMENTs
HTML & CSS
Maria Antonietta Perna, Jun 15

A Practical Guide to CSS Variables (Custom Properties)

Maria Antonietta Perna walks you through CSS variables/custom properties, the awesome new technology that adds more flexibility and fun to CSS coding.
1 COMMENT
HTML & CSS
Reggie Dawson, Jun 14

Sass Basics: The Sass Mixin Directive

Reggie Dawson goes in depth and shows how to use the Sass mixin directive to write better organized and maintainable CSS code.