CSS-Tricks·5yNotion API
Public Beta of the Notion API has been released. The API is a full-blown API, so you can do things you’d expect to be able to do, like cURL for users, the content of pages, and manipulate databases. They have detailed documentation, expected barriers like rate limits, and even a JavaScript SDK.
CSS-Tricks·5yJSON in CSS
Jonathan Neal tweeted a little CSS trick the other day, putting JSON inside CSS and plucking it out with JavaScript. I re-typed his example here: grotesquely, CodePen Embed Fallback is not useful. Chucking some JSON in CSS I would think is another way around CORS. I kinda doubt it will catch on, but it's possible.
CSS-Tricks·5yNext Gen CSS: @container
Chrome is experimenting with @container, a property within the CSS Working Group Containment Level 3 spec. @container brings us the ability to style elements based on the size of their parent container. The @container API is not stable, and is subject to syntax changes. If you try it out on your own, you may encounter a few bugs.
CSS-Tricks·5yA Love Letter to HTML & CSS
Ashley Kolodziej writes to HTML and CSS to thank them for their contributions to the web. He says HTML is the foundation of the Internet and is the bridge between humans and information. HTML is an art in rendering and specificity and predicting when and where other systems or designers might want to override something.
CSS-Tricks·5yCreating Colorful, Smart Shadows
Creating Colorful, Smart Shadows by kirupa | filed under UI Stuff. Read or watch below to find out how to create this effect. In the next few sections, what we are going to create is the following example: A picture of sushi with a colorful shadow appearing behind.
CSS-Tricks·5yHow to Create Neon Text With CSS
Neon text can add a nice, futuristic touch to any website. I’ve always loved the magic of neon signs, and wanted to recreate them using CSS. In this article, we’re going to take a look at how to add glowing effects to text. We’ll also look at various ways to animate the neon signs.
CSS-Tricks·5yAdvanced CSS Animation Using cubic-bezier()
When dealing with complex CSS animations, there is a tendency to create expansive @keyframes with lots of declarations. There are a couple of tricks that might help make things easier, while staying in vanilla CSS. Timing functions are more widely used and familiar but the second one is less common. There’s one especially neat timing function that gives us total control to create custom timing functions. In this post I will show you the power of it and how it can be used to create fancy animation without too much complexity.
CSS-Tricks·5ySvelte for the Experienced React Dev
This post is an accelerated introduction to Svelte from the point of view of someone with solid experience with React. I’ll provide a quick introduction, and then shift focus to things like state management and DOM interoperability. I plan on moving somewhat quickly, so I can cover a lot of topics.
CSS-Tricks·5yAstro
Astro is an in-progress site-builder framework built on top of React and Vue. It ships no JavaScript to the front-end at all, unless you specifically opt-in to it. It has scoped-CSS-by-default like Vue’s <style scoped> , meaning it doesn’t even need CSS Modules since you get all the benefit anyway. It embraces the idea of Islands Architecture — the idea that most sites are composed of static content with only parts of interactive/dynamic content.