HTML & CSS
Gregg Pollack, Oct 16

Learn a CSS Framework in 6 Minutes with Bulma

In this tutorial, we’ll be getting started with Bulma, a modern CSS Framework built on Flexbox.
HTML & CSS
Miriam Suzanne, Oct 13

How to Write Beautiful Sass

Clean, beautiful code should be a goal in every project. If other developers need to make a change, they should be able to understand it.
HTML & CSS
Hugo Giraudel, Oct 11

How to Use Warnings and Errors in Sass Effectively

Now we’re going to look at warnings and errors. Both form a one-way communication system between the program (in this case, Sass) and the developer (you).
HTML & CSS
Giulio Mainardi, Sep 26

CSS font-display: The Future of Font Rendering on the Web

Giulio Mainardi explains the new font-display property and how it will help CSS developers improve rendering of fonts during page load.
HTML & CSS
Ashley Nolan, Sep 19

Taking CSS Linting to the Next Level with Stylelint

Ashley Nolan introduces the features of stylelint, a flexible and well-supported CSS linting tool that can improve your team's code style and maintenance.
HTML & CSS
Nicole Saidy, Sep 07

Putting the "App" in Progressive Web Apps

Nicole Saidy offers an overview of Progressive Web Apps (PWAs), what they are, which problems they solve, and what makes them apps or app-like.
HTML & CSS
Giulio Mainardi, Sep 05

Building a Trello Layout with CSS Grid and Flexbox

Giulio Mainardi shows you how to build a Trello layout using CSS's new Grid Layout Module features and Flexbox, along with some Sass for efficiency.
HTML & CSS
Gajendar Singh, Aug 30

How to Create CSS Conic Gradients for Pie Charts and More

Gajendar Singh shows how to create conic gradients in CSS, a new standard championed by Lea Verou which lets you build pie charts and more without images.
HTML & CSS
Maria Antonietta Perna, Aug 24

Fancy Web Animations Made Easy with GreenSock Plugins

Maria Antonietta Perna gives you an overview of GreenSock plugins to add complex animations to your project quickly and in a few lines of code.
HTML & CSS
Gajendar Singh, Aug 23

Improve Web Typography with CSS Font Size Adjust

Gajendar Singh introduces you to the font-size-adjust CSS property and explains why it's important and how you can use it to enhance your web typography.
HTML & CSS
Byron Houwens, Aug 22

Converting Your Typographic Units with Sass

Byron shows us a neat Sass function to convert typographic units in CSS. Learn how to convert pixels into em and percentage units with the magic of Sass.
HTML & CSS
Zsolt Nagy, Aug 18

CSS Architecture and the Three Pillars of Maintainable CSS

Zsolt Nagy discusses three principles of CSS architecture and why mastering them will help you keep your CSS maintainable and lean.
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.
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.
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.
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.