css Archives - Page 16 of 17

11Jun

By Chris CoyierNo Comments

CSS Tricks

Versioning Interview

Adam Roberts (who you might recognize from our interview with him), interviewed me for the Versioning newsletter. I'm publishing my answers here for y'alls perusal as well! Which dev/tech idea or trend excites you the most at the moment, and why? I love that new JavaScript has arrived. I don’t know if "new JavaScript" is really the word for it, but that’s what it feels like. Major syntax improvements coupled with state and component-based thinking, coupled with powerful frameworks tying it all together: React, Angular, Vue, Ember, etc. Plus the ecosystem they live in, which often includes ES6+ processing, building/bundling, state management tools, and more. Particularly impressive are tools like Create React App that get you cooking on a whole fancy setup like that in seconds. Vue CLI is...

11Jun

By Kingsley SilasNo Comments

CSS Tricks

Digging Into React Context

You may have wondered lately what all the buzz is about Context and what it might mean for you and your React sites. Before Context, when the management of state gets complicated beyond the functionality of setState, you likely had to make use of a third party library. Thanks to recent updates by the awesome React team, we now have Context which might help with some state management issues. What Does Context Solve? How do you move the state from a parent component to a child component that is nested in the component tree? You know that you can use Redux to manage state, but you shouldn’t have to jump to Redux in every situation. There's a way to do this without Redux or any other third party state management tool. You can use props! Say the feature you want to implement has a tree struct...

8Jun

By Sarah DrasnerNo Comments

CSS Tricks

Creating a VS Code Theme

Everyone has special and perhaps, particular, tastes when it comes to their code editor. There are literally thousands of themes out there, and for good reason: a thing of beauty and enhancement to productivity for one can be a hindrance to another. It’s been an item on my bucket list to create my own theme. I was coding very late the one night, well into the small hours of the morning. Everyone in my house was sleeping and so, as usual, the only light was the glow of my screen. I know it’s not necessarily healthy to code like this, but it’s literally the time I’m most productive: there are minimal distractions, I’m not dealing with work stuff, family stuff, friend stuff, or puppy stuff. I can focus. I had some preferences set for the theme I had been using and, though they all worked well...

7Jun

By Welling GuzmanNo Comments

CSS Tricks, Web Tricks

Manipulating Pixels Using Canvas

Modern browsers support playing video via the <video> element. Most browsers also have access to webcams via the MediaDevices.getUserMedia() API. But even with those two things combined, we can’t really access and manipulate those pixels directly. Fortunately, browsers have a Canvas API that allows us to draw graphics using JavaScript. We can actually draw images to the <canvas> from the video itself, which gives us the ability to manipulate and play with those pixels. Everything you learn here about how to manipulate pixels will give you a foundation to work with images and videos of any kind or any source, not just canvas. Adding an image to canvas Before we start playing with video, let’s look at adding an image to canvas. <img id="SourceImage" src="ima...

Animate Images and Videos with curtains.js

6Jun

By Martin LaxenaireNo Comments

CSS Tricks, Web Tricks

Animate Images and Videos with curtains.js

While browsing the latest award-winning websites, you may notice a lot of fancy image distortion animations or neat 3D effects. Most of them are created with WebGL, an API allowing GPU-accelerated image processing effects and animations. They also tend to use libraries built on top of WebGL such as three.js or pixi.js. Both are very powerful tools to create respectively 2D and 3D scenes. But, you should keep in mind that those libraries were not originally designed to create slideshows or animate DOM elements. There is a library designed just for that, though, and we’re going to cover how to use it here in this post. WebGL, CSS Positioning, and Responsiveness Say you’re working with a library like three.js or pixi.js and you want to use it to create interactions, like mous...

5Jun

By Ana TudorNo Comments

CSS Tricks

1 Element CSS Rainbow Gradient Infinity

I first got the idea to CSS something of the kind when I saw this gradient infinity logo by Infographic Paradise: The original gradient infinity. After four hours and some twenty minutes, of which over four hours were spent on tweaking positioning, edges and highlights... I finally had the result below: My version of the rainbow gradient infinity. The gradient doesn't look like in the original illustration, as I chose to generate the rainbow logically instead of using the Dev Tools picker or something like that, but other than that, I think I got pretty close—let's see how I did that! Markup As you've probably already guessed from the title, the HTML is just one element: <div class='∞'></div> Styling Deciding on the approach The first idea that migh...

Combining the Powers of SEM and BIO for Improving CSS

4Jun

By Ryan YuNo Comments

CSS Tricks

Combining the Powers of SEM and BIO for Improving CSS

CSS is easy, some might argue, but that "easiness" can cause messy code. This is especially true through power of preprocessors like Sass or Less where, if you aren’t careful, your CSS can become harder to deal with instead of easier. Sass? Harder? This Gist shows a great example of Sass nesting hell. If your Sass code looks like that, you can definitely improve your code with SEM & BIO, a CSS technique I’ll introduce you to now! In this article, I am going to use the code example below to explain how SEM and BIO works and how they can help enhance your CSS strategy. See the Pen by thebabydino (@thebabydino) on CodePen. Generally, SEM is concerned with high level CSS philosophy whereas BIO is an actual technique to help you write better CSS to achieve SEM. The main purp...

4Jun

By phpInfoNo Comments

CSS Tricks, Web Tricks

Making Avengers ID Card In HTML And CSS

Let’s suppose Tony Stark would like to redesign the ID cards of the Avengers, and he needs our help to create them in HTML and CSS. So, how can we help? In this tutorial, we’ll be using Flexbox to create the desired layout while diving into nested flexboxes for some advanced layouts. We will also be using rounded as well as transparent borders to create sci-fi arcs in CSS, and then animating them by using CSS animations around the picture of the Avenger. Last but not least, we’ll be using the box-shadow and text-shadow properties to give our ID card a final sci-fi touch. By the end of the tutorial, we will build a sci-fi animated Avengers ID card, and also learn the basics of Flexbox, nested Flexbox, CSS animations, borders, shadows, and many other frequently used CSS properties...

1Jun

By Chris CoyierNo Comments

CSS Tricks

HSL() / HSLa() is great for programmatic color control

If you ever need to hand-manipulate a color in native CSS, HSL is pretty much the only way. HSL (the hsl() and hsla() functions in CSS) stands for hue, saturation, lightness, and optionally, alpha. We've talked about it before but we can break it down a little more and do some interesting things with it. Hue: Think of a color wheel. Around 0o and 360o are reds. 120o is where greens are and 240o are blues. Use anything in between 0-360. Values above and below will be modulus 360. Saturation: 0% is completely desaturated (grayscale). 100% is fully saturated (full color). Lightness: 0% is completely dark (black). 100% is completely light (white). 50% is average lightness. alpha: Opacity/Transparency value. 0 is fully transparent. 1 is fully opaque. 0.5 is 50% transpare...

The State of Changing Gradients with CSS Transitions and Animations

1Jun

By Ana TudorNo Comments

CSS Tricks

The State of Changing Gradients with CSS Transitions and Animations

Back in 2012, Internet Explorer 10 came out and, among other things, it finally supported CSS gradients and, in addition to that, the ability to animate them with just CSS! No other browser supported this at the time, but I was hopeful for the future. Sadly, six years have passed and nothing has changed in this department. Edge supports animating gradients with CSS, just like IE 10 did back then, but no other browser has added support for this. And while animating background-size or background-position or the opacity or rotation of a pseudo element layered on top can take us a long way in terms of achieving cool effects, these workarounds are still limited. There are effects we cannot reproduce without adding lots of extra elements or lots of extra gradients, such as "the bli...

31May

By Nicholas CerminaraNo Comments

CSS Tricks, Web Tricks

Build Multiple Stacking Sticky Sidebars with Pure CSS and Bootstrap 4

Making high performant, pure CSS sticky sidebars that stack with Bootstrap 4. This will be a quick and pretty cool tutorial on a neat trick on how to have multiple sticky sidebars that stack without using any JavaScript! I figured this out the other day brain storming ideas with @chrisoncode for the new Scotch website sidebar. As fun and cool as JavaScript is, it's just not as snappy and way more bloated than say a pure CSS implementation of stuff like this (which is one of our main goals for our Scotch.io redesign). In this tutorial I will discuss: What the heck I mean by this mouthful: "Multiple Stacking Sticky Sidebars. Reasons that you would want to do this. General beefs devs have with doing it with JavaScript or plugins. The technique with CSS3 (positio...

Forms, Auth and Serverless Functions on Gatsby and Netlify

31May

By Maxime Laboissonni reNo Comments

CSS Tricks

Forms, Auth and Serverless Functions on Gatsby and Netlify

Abstracting infrastructure is in our DNA. Roads, schools, water supply networks—you get the idea. Web development is no exception: serverless architectures are a beautiful expression of that phenomenon. Static sites, in particular, are turning into dynamic, rich experiences. Handling static forms, authentication, and backend functions on statically-generated sites is now a thing. Especially with the JAMstack pioneer platform that is Netlify. Recently, they announced support of AWS Lambda functions on front-end-centric sites and apps. I've been meaning to dive into their "backend" features since. Today, I'm doing just that, using a static Gatsby site, Netlify's Forms, Identity, and Functions features. This tutorial will show you how to: Add static forms to your site Ad...

7 Tutorials and Tools to Get You Started With CSS Grid

31May

By Ezequiel BruniNo Comments

CSS Tricks, Web Tricks

7 Tutorials and Tools to Get You Started With CSS Grid

CSS Grid is here, people are starting to use it, and it’s even referenced by our industry’s latest official buzzword. I could go on about how it’s the future of web design and layout. I could wax lyrical about how anyone not using Grid will be left behind when the Rapture happens, and everybody on Wikipedia’s list of Internet pioneers will come back to take us to the great LAN party in the sky. Comcast (yes, all of them) won’t be invited. My point is that if you’ve been paying attention — if you’re reading this, you probably do — then you know that stuff already. But let’s just say that you’ve heard a lot of good things about CSS Grid, but haven’t had a chance to play with it, yet. Where do you start? You start here, and you click the links listed below. Tutorials Your ...

30May

By Chris CoyierNo Comments

CSS Tricks, Web Tricks

Transmit Droplets

Ethan Marcotte documented his workflow for storing GIFs in a web directory. Sometimes just SFTPing files into a folder is as fancy a workflow as you need, and in fact, modern workflows don't have anything on it! I've also used Transmit's fancy features for this kind of thing. I prefer saving the connection as a Droplet, which is basically a little application you can drop a file onto and have it upload to exactly where you want it...say a GIF in a specific server directory. There are two things that make this even more useful. One, you can have it copy the URL after uploading: Two, you can set rules for file types so that they have the right permissions as soon as they are uploaded. I find this particularly useful for S3 where by default they aren't "world readab...

30May

By Sarah DrasnerNo Comments

CSS Tricks

What does the ‘h’ stand for in Vue’s render method?

If you’ve been working with Vue for a while, you may have come across this way of rendering your app — this is the default in the latest version of the CLI, in main.js: new Vue({ render: h => h(App) }).$mount('#app') Or, if you’re using a render function, possibly to take advantage of JSX: Vue.component('jsx-example', { render (h) { return <div id="foo">bar</div> } }) You may be wondering, what does that h do? What does it stand for? The h stands for hyperscript. It’s a riff of HTML, which means Hypertext Markup Language: since we’re dealing with a script, it’s become convention in virtual DOM implementations to use this substitution. This definition is also addressed in the documentation of other frameworks as well. Here it is, for example, in Cy...