Ahmad Shadeed·3yNew Viewport Units
New Viewport Units - Ahmad Shadeed We have been using CSS viewport units since 2012. They are useful to help us in sizing elements based on the viewport width or height. But using the unit on mobile is buggy. The reason is that viewport size won’t include the browser’s address bar UI.
builder.io·3yTailwind CSS Tips and Tricks Worth Knowing
Tailwind allows us to change the style of an element based on its state with helper classes. There are some times where we are forced to use CSS for our styles. Tailwind has some very useful and easy-to-use animation utility classes. For example, we can add the transition color class and set a duration of 300 milliseconds.
Community Picks·3yJavaScript Playground – A no-fuss pure JavaScript playground with a live feedback loop
JavaScript Playground is a small web application that provides a JavaScript playground for free. You can think of it as a tiny editor for you to quickly test any JavaScript supported by your browser. It functions pretty much like a REPL, where you are given immediate feedback on the Console screen as you change your code.
MDN Blog·3yScroll progress animations in CSS
Scroll progress animations in CSS Scroll-linked animations can often add a touch of class to a website, but have long been the preserve of JavaScript. Now a new specification is being implemented to enable us to create rich scroll-driven experiences with CSS. The Scroll-driven Animations specification covers both these types of animations.
asayer·3yAnimations and Transitions with Tailwind CSS
Animations and Transitions with Tailwind CSS have been a lot of work, but this article will show you how to easily achieve those tasks with TailWind CSS. The major catch of TailwindCSS is that you can make animations right from your inline styling without creating a separate style file as you would in Vanilla CSS.
freeCodeCamp·3yHow to Write Faster HTML and CSS Code Using Emmet
Emmet is an essential development tool that helps you quickly create repetitive structures like lists, tables, or ordered elements with minimal typing. It is more like a shorthand that translates to multiple lines of HTML or a CSS attribute. In this tutorial, we will learn some Emmet shortcuts that generate HTML and CSS quickly.
CSS Articles·3yCSS effects on images II
We will create even more effects with the same requirements: Only the and a few lines of CSS. We will improve this effect by adding some radius to the image and a circular reveal effect on hover. The main idea is to have an image with a specific radius and not a rounded image.
Community Picks·3yCreating responsive data tables with CSS
A responsive data table is designed to work well on both desktop and mobile devices. We’ll explore options for creating responsive data tables using CSS and techniques for making them accessible and easy to use on mobile devices. Controlling the width and overflow is one of the most important things we can do to make it responsive.
Community Picks·3yCoding Randomized Zelda Patterns
The pattern is even used on the official game website. I really enjoy creating procedurally generated artwork using JavaScript and SVGs. We’ll use JavaScript to reduce repetition in our code and allow us to randomize the placement of these shapes. We can reproduce these shapes using the SVG “ vector graphic” format.
asayer·3yMobile-first approach with HTML and CSS
The mobile-first approach is a design and development approach focusing on creating a user-friendly experience for mobile devices like smartphones and tablets. This article will explain the principles and benefits of mobile- first design and implementing specific strategies with HTML and CSS so you can apply the methodology.
asayer·3yUnderstanding CSS Logical Properties
CSS logical properties are a set of properties that allow web developers to specify the layout and styling of webpage elements based on their directional or logical values. These properties provide greater flexibility and adaptability in handling different writing modes, such as left-to-right (LTR), right- to-left (RTL), and multiple languages.
asayer·3yCSS wrapping made easy
CSS wrapping may be relied on when it comes to regulating how items are displayed and wrapped within a container. It emphasizes content readability and adaptability to any screen size, particularly smaller screens. CSS has several properties for managing how to make text wrap; the two most common properties are and.
Community Picks·3yThe new @font-face syntax
The new @font-face syntax has also been supported since Safari 17, Firefox 106 and Chrome 108. The new syntax looks like this: What’s changed? Instead of using strings, we use keywords. There are certain technical capabilities of fonts that the file type alone doesn't tell us.
LambdaTest·3yCommon CSS Breakpoints For Media Queries
Common CSS Breakpoints For Media Queries are the points (or measurements) for common CSS breakpoints. When creating a responsive website, developers immediately think of CSS Media queries. These inbuilt CSS properties enable styling adjustments for various screen sizes or viewports.
Ahmad Shadeed·3yCSS Findings From The Threads App
The post layout consists of a 2-column * 4-row grid. Each item within the post is manually placed using the and properties. The user avatar is positioned in the first column and spans the first two rows. Using odd values for the grid rows is a form of fine-tuning for the UI.
Semaphore·3yCreating SVG Animations Using Tailwind CSS
SVGs are a vector-based graphics file format that allows graphics to be displayed at any size without losing quality. For the use of illustrations, icons, and logos on websites and applications, SVGs have proven to be an invaluable resource. For this tutorial, we will use a heart SvG icon from Hero icons.
Community Picks·3yNext.js App Router
Next.js App Router implements React Server Components, a new feature introduced in React 18. To support the App Router, currently all components and hooks from MUI libraries are exported with the directive. Using Material UI with the default theme, you can add Material UI components to Next.js routing files without any additional configuration.
CSS {IRL}·3yVideo: Modern CSS Layout is Awesome
Back in May I had the privilege of speaking at Beyond Tellerand, an incredible conference in Düsseldorf, Germany. My own talk was on CSS layout, including some of the exciting new features we have at our disposal. Here's a wrap up from the conference too.
freeCodeCamp·3yHow to Build Error-Free HTML Forms
When I first started creating HTML forms, I would often use as the label and id's attribute. This all changed when I started using WAVE’s accessibility checker to learn how to make my code more accessible. In this article, I will show you three things I have learned in surviving, I mean making HTML forms error-free.
LambdaTest·3yA Complete Guide To CSS Box Model
A Complete Guide To CSS Box Model. Clinton Joy Fimie will unravel the intricacies of the CSS box model, shedding light on all of its components, how they interact, and how you can manipulate them for optimal website performance and a great user experience.
