Product Hunt·5yDaisyUI — Free UI components plugin for Tailwind CSS
DaisyUI is a plugin for Tailwind CSS - Beautiful CSS component - Clean HTML with component classes. Customizable and themeable - Only 2KB. No JS, No dependencies - Free! Embed it in your site and use it to share your content with the world.
daily.dev·5yTailwind CSS from Zero to Hero - The Utility-First Workflow
Part two of the Tailwind CSS from Zero to Hero series. This time we will focus more on the entire workflow with utility classes. With these, you style elements by applying pre-existing classes directly in your HTML. With Tailwind’s utility classes, you use neither predefined rules, nor pure CSS.
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.
Medium·5yImage Gallery with React and Tailwind CSS
In this post we will build a Image Gallery with ReactJS app with Tailwind CSS. We are also going to use Pixabay API to get the images. So, open your terminal and create a new ReactJS application by using the command below. Now, as per the instructions, change to the newly created folder.
Product Hunt·5yTailwind Figma — Figma UI kit built for integration with Tailwind CSS
Tailwind CSS Embed Collect is a new way to integrate with live websites. Tailwind Embed can be used to build UI interfaces and simplify the process of integrating into live websites with Tailwind CSS. Use Tailwind's Embed tool to build and collect CSS for your live website.
Smashing Magazine·5yA New Way To Reduce Font Loading Impact: CSS Font Descriptors
Web fonts are often terrible for web performance and none of the font loading strategies are particularly effective to address that. Upcoming font options may finally deliver on the promise of making it easier to align fallback fonts to the final fonts. Meet Smashing Online Workshops on front-end & UX.
JavaScript in Plain English·5yHow to Create a Sticky Footer in CSS
Easy trick to design one of the key elements of a webpage. Use it to build your footers and make sure they stay at the same position even when you are scrolling up or down. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.
Hashnode·5yCSS fundamentals and cheat sheet.
selectors are ways of grabbing and manipulating HTML. Different selectors have different application. Flexbox stands for flexible box and is an alternative to using inline display. The box model is the most commonly used way to position items. The border is the divider between padding and the margin.
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.
JavaScript in Plain English·5yBest Techniques for Client-Side Optimization: The High-Performance Series
80%-90% of the end-user response time is spent on the frontend. Reducing HTTP requests is the most essential technique to optimize your website. Use CSS sprites to combine several images into a single image called a sprite sheet. Use CDN to cache all static data such as JavaScript, and images and deliver it locally.
