design tips

I came across this amazing Dribbble shot by Jakub Reis a while back. It caught my eye and I knew that I just had to try recreating it in code. At that moment, I didn’t know how. I tried out a bunch of different things, and about a year later, I finally managed to make this demo.

I learned a couple of things along the way, so let me take you on a little journey of what I did …

The post Creating an Animated Login Form for TouchID appeared first on CSS-Tricks.

We recently covered this exact same thing, but from the perspective of a bunch of developers.

Chris Ferdinandi weighs in:

The least important skills for a front-end developer to have are technical ones.

The nuances of JavaScript. How to use a particular library, framework, or build tool. How the cascade in CSS works. Semantic HTML. Fizz-buzz.

Chris takes that a little farther than I would. I do think that with an understanding of HTML, CSS, and JavaScript, the …

The post What makes someone a good front-end developer? appeared first on CSS-Tricks.

The way JavaScript works is we can do scripts as an inline block:


let foo = "bar";


Or, if the script should be fetched from the network…

/js/global.js

With CSS, we can do an inline block of styles:

<style>
.foo { color: red; }
</style>

So why not <style src=""></style>? Instead, we have <link href="">.

Harry Roberts asked about that the other day on Twitter:

Can any W3 historians tell us why it’s `<link rel=”stylesheet” …

The post Why isn’t it <style src=””>? appeared first on CSS-Tricks.

If you’ve been writing JavaScript for some time now, it’s almost certain you’ve written some scripts dealing with the Document Object Model (DOM). DOM scripting takes advantage of the fact that a web page opens up a set of APIs (or interfaces) so you can manipulate and otherwise deal with elements on a page.

But there’s another object model you might want to become more familiar with: The CSS Object Model (CSSOM). Likely you’ve already used it but didn’t necessarily …

The post An Introduction and Guide to the CSS Object Model (CSSOM) appeared first on CSS-Tricks.

I think it’s kinda cool to see Google dropping repos of interesting web components. It demonstrates the possibilities of cool new web features and allows them to ship them in a way that’s compatible with entirely web standards.

Here’s one: <two-up>

I wanted to give it a try, so I linked up their example two-up-min.js script in a Pen and used the element by itself to see how it works. They expose the component’s styling with custom properties, which I’d …

The post Google Labs Web Components appeared first on CSS-Tricks.