Best of CSS — November 2023
- 1
- 2
- 3
- 4
Hacker News·2y
Animotion — a visual CSS animation app
Animotion is a visual CSS animation app that allows users to create CSS animations by dragging, resizing, rotating, clipping, and more. It includes a keyframes editor, ready-to-use animations, and 29 built-in easings. The app works best on larger screens and modern web browsers.
- 5
DEV·2y
💻 Web Development Resources #175
The article provides various web development resources including guides on self-hosting web apps on Ubuntu, frontend testing tools, customizable SVG-based backgrounds, a JavaScript database called SignalDB, free icons, a minimal framework for static websites, discussions on minimalist affordances and card-based UI design best practices, and a CSS framework called NeoBrutalismCSS. It also mentions a CSS button generator.
- 6
- 7
Community Picks·3y
A Couple of New CSS Functions I’d Never Heard Of
The article discusses new CSS functions: 'light-dark()', 'xywh()', 'round()', and 'perspective()'. 'light-dark()' allows handling different color values based on light and dark themes. 'xywh()' creates basic shapes with specified width, height, and coordinates. 'round()' offers rounding options and intervals for numbers. 'perspective()' is a function that augments the 'perspective' CSS property. The article also mentions browser support for these functions.
- 8
Exploring a 3D city with just HTML and CSS
Learn how to convert 3D objects into HTML/CSS elements and explore a customizable city using just HTML and CSS. Discover how to create a 3D city-building game with peak performance and track metrics like population. Also, find out how to approximate any surface using triangles.
- 9
asayer·3y
Three plugins to Convert your Figma Designs into Code
This article explores three plugins that automate the design-to-code process for Figma designs, saving time and ensuring accuracy. The plugins discussed are Figma-to-HTML, TeleportHQ, and Locofy. They empower designers and developers to convert designs into code effortlessly, maintain consistency, embrace modern tools, and support various frameworks. Each plugin has its own capabilities and limitations, but they all aim to streamline the design-to-code translation process.
- 10
Creating Bento Grid Layouts
Bento grid layouts are versatile and compact ways to display content, inspired by traditional Japanese bento boxes. Apple has popularized the use of bento grid layouts. Various methods such as CSS Grid and Flexbox can be used to create bento grid layouts.
- 11
- 12
- 13
SCSS vs. styled-components: Advantages and caveats
This article compares the advantages and disadvantages of using SCSS and styled-components in a React application. It provides a tutorial on styling a React component using SCSS and later demonstrates how the same component can be restyled using styled-components. The article highlights the simplicity, reusability, and customization benefits of styled-components, but also mentions issues such as dynamically generated class names and debugging challenges. It concludes by stating that the decision to switch from SCSS to styled-components depends on the specific needs and goals of the project, as well as personal preferences and expertise.
- 14
- 15
- 16
gitconnected·3y
CSS and Responsive Design
CSS and Responsive Design aims to create webpages that automatically adapt and adjust their layout, content, and functionality based on the characteristics of the device being used to access the webpage. In the old days, developers would create two different versions of the same webpage, one for desktops and the other for mobile devices.
- 17
Syncfusion·3y
Top 7 Ways to Write CSS in Your React or Next.js App
Learn seven different approaches to writing CSS in React and Next.js apps, including global CSS, CSS modules, preprocessor, CSS-in-JS, utility classes, CSS frameworks, and component libraries. Each approach has its pros and cons, and choosing the right one depends on your project's needs.
- 18
- 19
- 20
- 21
Use CSS Blend Modes for Creative Image and Color Manipulation
Learn how to use CSS blend modes to creatively manipulate images and colors on a website. Blend modes allow developers to combine elements and alter their appearance, resulting in stunning visual effects. Explore practical examples and discover the benefits and applications of CSS blend modes in web design.
- 22
- 23
