Community Picks·3y3D in CSS
Learn how to use 3D effects in CSS to create depth and perspective in web design. The 'perspective' property enables a 3D space for child elements, while 'translate3d' and 'rotate3d' are used to move and rotate elements in the 3D space. Using 3D effects can provide more screen real estate and enhance user experience.
freeCodeCamp·3yWeb Animation Techniques – CSS vs JavaScript
Web animations using CSS and JavaScript play a vital role in enhancing user experience on web pages. CSS animations are easy to use, perform well, and are responsive. JavaScript animations offer more flexibility and interactivity, making them suitable for complex animations and data-driven content. A combination of both CSS and JavaScript animations can provide the best of both worlds.
Community Picks·3yThe Future of CSS: Easy Light-Dark Mode Color Switching with light-dark()
CSS now comes with a utility function named light-dark(). This function allows you to change a color value based on whether Light Mode or Dark Mode is being used. It is an intermediary step towards a final solution for responding to different color schemes.
DEV·3yThe Roadmap to Web Dev Mastery (Best Resources)
Learn about the complexities of today's web development landscape, including frameworks and libraries. Acquire skills for free through resources and avoid critical mistakes. Grasp the workings of a website, delve into front-end mastery with HTML, CSS, and JavaScript, optimize workflow with JavaScript frameworks, build a portfolio, and explore back-end mastery. Bright Data provides a valuable tool for accessing web data.
LambdaTest·3yComplete Guide to CSS :has() Selector
CSS :has() selector allows for selection of parent elements based on the presence or characteristics of their child elements. It solves the limitation of styling elements based on their nested content. The selector has browser compatibility limitations and potential performance implications. Alternatives include class-based targeting, JavaScript manipulation, and pseudo-classes on child elements.
David Heinemeier Hansson·3yYou can't get faster than No Build
The article discusses the state of the art in building JavaScript and CSS, highlighting the use of import maps, HTTP/2, and modern browser support. It mentions the native support for bun in Rails 7.1 and the fast and simple approach of using Hotwire and No Build.
asayer·3yResponsive mobile layouts made easy with Pure.CSS
Learn how to create responsive mobile layouts using Pure.css, a lightweight CSS framework that prioritizes simplicity and responsiveness. Discover the benefits of integrating Pure.css for mobile layouts, such as responsive design, lightweight files, customizability, and minimalistic design. Follow the installation and integration instructions using NPM or CDN. Dive into designing mobile-first layouts using the grid system and explore other components like responsive images and navigation menus. Finally, learn how to create a responsive blog post section using Pure.css grid modules.
Community Picks·3yNaming Variables In CSS
The article discusses various conventions for naming CSS variables, including the use of casing, namespacing, value typing, and descriptive names. It explores the benefits of different naming approaches and provides examples of naming conventions that can make CSS variables easier to understand and use.
Community Picks·3yCSS 3D Text Effects – Designer Feed
CSS 3D text effects are versatile and visually striking options that can enhance websites and applications. They can improve user experience, create depth and style in typography, and add a playful or retro look to text. Examples include 3D text cubes, isometric paper text effects, and metallic gold text effects.
Community Picks·3yWhen to Nest CSS
Learn when to nest CSS selectors and when to avoid it. Nesting pseudo-selectors, parent modifiers, media queries, and selectors that don't work without nesting is recommended. CSS naming conventions such as BEM and SUIT recommend decreasing the specificity of selectors whenever possible.
LambdaTest·3yCreating a 12 Column CSS Grid: A Complete Tutorial
Learn how to create a 12 column CSS grid layout that adapts to different screen sizes and devices. Understand the concept of a 12 column CSS grid, its significance, and its implementation steps. Discover real-world examples of websites that use a 12 column CSS grid.
