Best of CSS — June 2024
- 1
- 2
Codemotion·2y
Creating a Fallout-Style UI Using Modern CSS
Learn how to create a retro-futuristic user interface inspired by the Pip-Boy 3000 from the Fallout series using modern CSS techniques. The tutorial covers semantic HTML, responsiveness, typography and colors, responsive layout, visual effects and animations, and using generative AI for sci-fi content.
- 3
Community Picks·2y
Get the Best Performance on Your Next.js App
Learn how to optimize performance on your Next.js app with tips like loading only the necessary JavaScript and CSS, lazy loading dependencies, using the Next.js Image component for image optimization, preferring CSS over JavaScript, avoiding loaders at the beginning, utilizing font optimization, optimizing scripts, removing unused packages, checking bundle size, and using server components for improved rendering and caching.
- 4
What is this weird CSS Syntax?
Learn about an interesting CSS syntax involving the adjacent sibling combinator (+) and the asterisk (*) to select non-immediate adjacent elements of the same class. This allows styles to be applied to specific siblings a few elements away when hovering over a targeted element.
- 5
- 6
- 7
- 8
- 9
DEV·2y
🚀 Emmet in VSCode ✨
Emmet in Visual Studio Code (VSCode) is a powerful tool that speeds up HTML and CSS coding by expanding abbreviations into complete code structures. Key features include abbreviation expansion, code snippets, and fast navigation and editing. Examples showcase creating divs, lists, links, and basic HTML structures, demonstrating how Emmet can streamline the coding workflow.
- 10
- 11
CSS Variables (CSS Custom properties) for Beginners
CSS variables, also known as CSS custom properties, allow for reusable values across a project, improving code readability and maintainability. This guide covers the basics of declaring and using CSS variables, including local and global declarations. It also explains how to dynamically update CSS values using JavaScript in response to user actions.
- 12
Astro·2y
Zero-JavaScript View Transitions
Astro introduces an update to the View Transitions API that allows for native, app-like page navigation without JavaScript. Chrome 126 and Microsoft Edge 126 support zero-JavaScript view transitions. To enable it, add the @view-transition at-rule to your website's CSS. The 'transition:persist' feature is not yet supported by native cross-document navigation.
- 13
- 14
- 15
Do you still need Framer Motion?
The post discusses five new CSS features that might make Framer Motion unnecessary. It explores enter animations, independent transforms, springs, scroll-linked animations, and layout animations. While CSS has improved, the author still prefers the Framer Motion API for its simplicity and better user experience.
- 16
- 17
freeCodeCamp·2y
Media Queries vs Container Queries – Which Should You Use and When?
As the web evolves, new tools like media queries and container queries emerge, offering web developers various ways to make responsive designs. Media queries adapt styles based on the overall viewport size, suitable for different devices. Container queries, however, base their styles on the size of individual containers, promoting modularity and flexibility. While media queries are less effective for complex layouts, container queries support more adaptive component-based designs. Understanding each tool's strengths and considering project requirements will guide their best use in web design.
- 18
- 19
- 20
Hacker News·2y
A Rant about Front-end Development
A front-end developer expresses frustration with the complexity and misuse of modern web development technologies, emphasizing the importance of content over code. The post highlights common issues such as an over-reliance on JavaScript, misunderstandings about CSS, and the unnecessary complexity introduced by frameworks. The author advocates for simplicity, server-side rendering, and a focus on meaningful content.
- 21
Frontend Masters·2y
:has() is “The God Selector” – Frontend Masters Boost
The :has() selector in CSS, hailed as 'The God Selector' by Bruce Lawson, allows you to select any element based on the state of any other element without needing any structural relationship in the DOM. This makes it incredibly powerful for styling purposes.
- 22
- 23
Anchor Links and How to Make Them Awesome
This post discusses anchor links and how to enhance them using CSS. It covers the basics of creating anchor links, enabling smooth scrolling, adding scroll margin, targeted page anchor styles, and more. It also explores nested scrolling and the difference between scroll margin and scroll padding. Overall, it provides a comprehensive guide to making anchor links awesome.
- 24
Kevin Powell·2y
"Smart" design patterns with container queries
Container queries are a powerful CSS feature that allows styling based on the size of an element's container, rather than the viewport. This can lead to more flexible and meaningful breakpoints, particularly for component-based designs. The post explores practical examples, including making components adapt to the number of columns in a layout and how units like REM and EM work differently in container queries. The ability to create more intelligent design patterns without relying solely on viewport-based media queries is a key advantage.
- 25
Is CSS Tricks back?
CSS Tricks, a website on the decline, may be revived after a year of dormancy. Chris Coyier, the original founder, expressed his desire to regain ownership and the current CEO of Digital Ocean is determined to bring CSS Tricks back. Former editor Geoff Graham may have returned to his old job. The future of CSS Tricks is uncertain.
