Archive | article

RSS feed for this section

Creating a Book Cover Using JavaScript and p5.js

I recently published a book and an interactive course called Coding for Visual Learners. It teaches coding to beginners from scratch using the widely popular JavaScript programming language and the p5.js programming library. Since p5.js a great and an easy to use drawing library, I wanted to make use of it to create the cover of my book and course as well. This is a tutorial on how to create this particular visual using JavaScript and p5.js.

p5.js is …


Creating a Book Cover Using JavaScript and p5.js is a post from CSS-Tricks

Text Effects with CSS (and a little contenteditable trick)

Mandy Michael has been creating some incredible text effects with just the power of CSS. She uses every trick in the book: gradients, transforms, pseudo elements, shadows, and clipping paths to name a few. They are all real web text too. Custom fonts typically, but no images, canvas, or SVG or anything like that.

Take a look at this beautiful effect:

See the Pen CSS only 3D paper fold text effect by Mandy Michael (@mandymichael) on CodePen.…


Text Effects with CSS (and a little contenteditable trick) is a post from CSS-Tricks

Measuring Image Widths in JavaScript (Carefully!)

Let’s say you want to find an <img> on the page and find out how wide it is in JavaScript. Maybe you need to make some choices based on that width (or height, or both) You can definitely do that. The DOM will even give you a variety of dimensions to choose from depending on what you need. There is definitely a catch though.

Here’s the image:

<img src="image.jpg" alt="an image">

And here’s us selecting it, by finding the first …


Measuring Image Widths in JavaScript (Carefully!) is a post from CSS-Tricks

Minecraft in WebVR with HTML Using A-Frame

I’m Kevin Ngo, a virtual reality web developer on the Mozilla VR team and a core developer of A-Frame. Today, we’ll go over how to build a room scale WebVR Minecraft demo that works on HTC Vive, Oculus Rift, Samsung GearVR, Google Cardboard, desktop, and mobile. The demo will be built with A-Frame in just 11 HTML elements!

A-Frame

A few years ago, Mozilla invented and pioneered WebVR, a JavaScript API for creating immersive VR experiences in your …


Minecraft in WebVR with HTML Using A-Frame is a post from CSS-Tricks

Animate in Ajax’d Content to its Natural Height

Let’s combine three things we just learned here on CSS-Tricks:

One, transitioning to auto dimensions. Two, Ajaxing for stuff in a modern way. Three, waiting for images to be loaded to measure them.

With all these three things in our toolbox, we can Ajax for some arbitrary content and insert it onto the page with a revealing height animation. Tricky tricky!

Here’s the final demo:

See the Pen Slide in Ajax Content by Chris Coyier (@chriscoyier) on …


Animate in Ajax’d Content to its Natural Height is a post from CSS-Tricks

“Serverless”

Every time I use the word “serverless”, which is somewhat regularly lately, as we’ve had a few articles using the term lately and use the concept at CodePen for a variety of things, I get some version of:

CMON BRAH YOU’RE STILL USING “SERVERS”.

And they aren’t wrong. Yes, when you build things on the web, there are always servers involved. Always. Whether it’s some old computer in a church basement, a computer in a rack at some big hosting …


“Serverless” is a post from CSS-Tricks

Using CSS Transitions on Auto Dimensions

We’ve all been there. You’ve got an element you want to be able to collapse and expand smoothly using CSS transitions, but its expanded size needs to be content-dependent. You’ve set transition: height 0.2s ease-out. You’ve created a collapsed CSS class that applies height: 0. You try it out, and… the height doesn’t transition. It snaps between the two sizes as if transition had never been set. After some fiddling, you figure out that this problem only happens …


Using CSS Transitions on Auto Dimensions is a post from CSS-Tricks

If Your Company Were a Couch…

Without even realizing it, our perceptions are cross-referenced with our memories. Our brains conjure up an emotional reaction when our eyes see familiar shapes, colors, and textures. This fun exercise uses various styles of couches to help you make decisions about the emotional response that best represents the personality of your company (or how you would like your company to be perceived).

So, which couch feels most like your company? Parallel your choice with your company’s brand personality attributes. Insights …


If Your Company Were a Couch… is a post from CSS-Tricks

Getting Started with CSS Grid

This was a blockbuster week for front-end developers as CSS Grid landed in the latest versions of Firefox and Chrome without a feature flag. That’s right: we can now go and play with Grid in two of the most popular browsers right away.

But why is CSS Grid a big deal and why should we care?

Well, CSS Grid is the first real layout system for the web. It’s designed for organizing content both into columns and rows and it …


Getting Started with CSS Grid is a post from CSS-Tricks

Need to do Dependency-Free Ajax?

One of the big reasons to use jQuery, for a long time, was how easy it made Ajax. It has a super clean, flexible, and cross-browser compatible API for all the Ajax methods. jQuery is still mega popular, but it’s becoming more and more common to ditch it, especially as older browser share drops and new browsers have a lot of powerful stuff we used to learn on jQuery for. Even just querySelectorAll is often cited as a reason to …


Need to do Dependency-Free Ajax? is a post from CSS-Tricks