Fantastic CSS border animation
Today I visited the blog site - shoptalkshow, and it was very interesting to see such a style: I think its style is unique, especially some of the bezels. So, in this article we will use CSS to create a variety of wonderful border effects. CSS Border property When it comes to borders, the first thing that comes to mind border is that the most commonly used one is solid, dashed which appears in the
Defensive CSS
👋 This article has been expanded into a new project called Defensive CSS. Due to the fact that the content here will not be updated, I recommend you to read defensivecss.dev instead. Oftentimes, we wish that there was a way to avoid a certain CSS issue or behaviors from happening. You know, content is dynamic, and things can change on a web page, thus increasing the possibility of a CSS issue or
Interneting Is Hard
Our tutorial contains 250 diagrams that present complicated HTML and CSS concepts in simple, visual ways. Take our CSS Selectors chapter, for example. Instead of building your own mental model of how CSS selectors connect to HTML elements, you can visualize it the same way we do: We think pretty matters, and our passion for pretty things permeates into the example projects you’ll be working on, to
Handling Long and Unexpected Content in CSS | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. When we write CSS, sometimes we forget about some edge cases in the designs. For example, when the content is longer than we expected and we didn’t account for that possibility, our design could break. We can’t guarantee that our CSS will always work as expected, but at leas
The Complete CSS Demo for OpenType Features - OpenType Features in CSS
This project is a comprehensive CSS font-feature-settings demo for OpenType features, a refined version of Syntax for OpenType features in CSS by Adobe, licensed under CC BY-NC-SA 3.0. Featured fonts listed below are hand-picked with high quality. If you find some cool fonts with specific OpenType features support or want to add missing OpenType features, feel free to contribute it on GitHub. Buil
Dev.Opera — Everything You Need to Know About the CSS will-change Property
Everything You Need to Know About the CSS will-change Property IntroductionIf you’ve ever noticed “that flicker” in WebKit-based browsers while performing certain CSS operations, especially CSS transforms and animations, then you’ve most likely come across the term “hardware acceleration” before. The CPU, GPU, and Hardware AccelerationIn a nutshell, Hardware Acceleration means that the Graphics Pr
"The Notch" and CSS | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Apple’s iPhone X has a screen that covers the entire face of the phone, save for a “notch” to make space for a camera and other various components. The result is some awkward situations for screen design, like constraining websites to a “safe area” and having white bars on t
Designing Websites for iPhone X
The section below about safe area insets was updated on Oct 31, 2017 to reflect changes in the iOS 11.2 beta. Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing. The inset area is filled with the
Vertical Centering — Solved by Flexbox — Cleaner, hack-free CSS
The lack of good ways to vertically center elements in CSS has been a dark blemish on its reputation for pretty much its entire existence. What makes matters worse is the techniques that do work for vertical centering are obscure and unintuitive, while the obvious choices (like vertical-align:middle) never seem to work when you need them. The current landscape of vertical centering options ranges
Animista - On-Demand CSS Animations Library
AboutAnimista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use. Animista started out as a small side-project of mine. As I was increasingly using CSS animations, I thought it would come in handy to have them organised in a meaningful and accessible way so that they can be easily reused on different projects. The idea wa
How well do you know CSS display?
This article has been translated to Japanese by Kana Takahashi on POSTD. The display property is one of the most important CSS properties we use for layout. Most of us would have used block, inline and none. table and inline-block are also quite common. The new darling is definitely flex, because it’s a display property that was created specifically for layout. The upcoming grid (currently still b
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Making Sense of Ch Units<!-- --> | John D. Jameson<!-- -->
CSS { In Real Life } | Breaking Out of a Central Wrapper
Meraki UI Tailwind CSS Components
https://www.pagedmedia.org/paged-js/
Animatopy - CSS Animation Snippets
GitHub - scf4/styled-map: ✨A super simple way to map props to styles with Styled Components ⚠️ See README.md
CSS Environment variables; how to deal with the software bezel of iPhone X
Variable Fonts on the Web
Centered and Cropped Thumbnails with CSS