随笔分类 - CSS3
摘要：Manage the color palette used in your stylesheets by creating a map of variables and a function to access the values by key. This allows you to update
阅读全文
摘要：object-position controls the placement of img and video media inside containing boxes. It's a partner property to object-fit. Using the two properties
阅读全文
摘要：In this lesson, we'll take simple HTML and create a stripe with a full-width background color and centered content. We'll do all of this without addin
阅读全文
摘要：We will create animated Content Placeholder as React component just like Facebook has when you load the page. Key points: 1. For each elements on the
阅读全文
摘要：Dark Mode: If our application has multi themes, we don't need to iclude all the code in the init downlading. If there is no dark mode enabled for the
阅读全文
摘要：In this lesson, we will be going over the attribute aria-expanded. Instead of using a class like .open we are going to use the aria-expanded attribute
阅读全文
摘要：The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of animation or motion it
阅读全文
摘要：Animation can be a powerful way to enhance a user experience. In this lesson, we'll walk through the creation of a card-flip animation, creating a nic
阅读全文
摘要：Inside of a flexed container, a single item can control its own flex with align-self. The possible values are flex-start, flex-end, center, or stretch
阅读全文
摘要：We changed the axis layout with 'justify-content', and the "off axis" layout is controlled by 'align-items'. The most common values are flex-start, fl
阅读全文
摘要：The :empty pseudo selector selects empty elements. We can use this to display useful messages instead of the empty content or hide the content complet
阅读全文
摘要：Use the focus-within pseudo-class to conditionally assign styling to a parent element when its child receives focus. HTML: CSS:
阅读全文
摘要：For a menu item, when we tab onto it, we want this element get 'focus' event, so that the submenu will show up. In the post, we will see how to achiev
阅读全文
摘要：We'll add animation to patio11bot using CSS keyframes. When defining a CSS animation, you can add it to a class with animation-name, set the duration
阅读全文
摘要：Because an installed PWA is really just a web app running in a browser, there are some browser behaviors that we may not want in our app, if we're goi
阅读全文
摘要：It is hard to explain css selector specificty, to easy way to understand it is by playing around with it. To remember some rules can be helpful: inlin
阅读全文
摘要：Pseudo elements allow us to target elements that are not explicitly set in the DOM. Using ::before ::after we can actually create and manipulate eleme
阅读全文
摘要：Using just semantic CSS Pseudo-Classes you can help define important states for form elements that ensure the user provides the correct data without f
阅读全文
摘要：The interactive pseudo-classes for links (and buttons) allow us to make sure the user knows what elements on the page are interactive and that they ca
阅读全文
摘要：1. Color Picker (Chrome) You might know how to use color picker in Chrome, recently there is a feature inside color picker which is "Contrast Ratio",
阅读全文
浙公网安备 33010602011771号