CSS Responsive Multi-Line Ribbon Shapes (Part 1) — Smashing Magazine
Ribbons have been used to accent designs for many years now. But the way we approach them in CSS has evolved with the introduction of newer features, like calc(), color-mix(), and trigonometric functions. In this article, Temani Afif combines background and gradient tricks to create ribbon shapes in CSS that are not only responsive but support multi-line text and are easily adjustable with a few C
CSSの新機能カスケードレイヤーが主要ブラウザにサポートされます、最初に理解しておきたい基礎知識を解説
CSSの新機能「カスケードレイヤー」がいよいよ主要ブラウザすべてにサポートされます。カスケードレイヤー@layerを使用すると、CSSの詳細度とスタイルの順番をカスケード内で明示的にレイヤー化（階層化）でき、これまでのCSSの実装方法が大きく変わるものです。 Chromeのデベロッパーによるカスケードレイヤーの基礎知識を紹介します。 Cascade layers are coming to your browser by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに準じて翻訳しています。 はじめに CSSの詳細度とカスケード @layerの動作 レイヤーの優先順位の管理 インポートファイルの整理 レイヤーとカスケード カスケードレイヤーの注意点 カスケードレイヤーの参考リソース はじめに カスケードレイヤー（@layerC
ユーザーのプリファレンスに応じて過度なアニメーションを無効にする「prefers-reduced-motion」 | Accessible & Usable
公開日 : 2021年9月19日 (2021年9月22日 更新) カテゴリー : アクセシビリティ ウェブコンテンツにおけるアニメーションは、アクセシビリティの問題を引き起こすことがあります。W3C が勧告している WCAG (Web Content Accessibility Guidelines) でも、インタラクションに伴うアニメーションに関して、下記の達成基準が設けられています。 アニメーションが、機能又は伝達されている情報に必要不可欠でない限り、インタラクションによって引き起こされるモーションアニメーションを無効にできる。 出典 : WCAG 2.1 達成基準 2.3.3 「インタラクションによるアニメーション (レベル AAA)」 インタラクションの視覚表現として、必要以上の過度なアニメーションを盛り込んでしまうと、ユーザーのコンテンツへの集中を阻害したり、注意力を散漫にさせて
CSSスプライトとstepsを使ってアニメーション画像を作ろう
2023年7月25日 CSS CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか？今回はそんな steps プロパティーにフォーカスしてみます。 ↑私が10年以上利用している会計ソフト！ steps の記述方法 steps は animation や keyframes プロパティーとともに利用します。steps() のカッコの中には、いくつの段階を経て動作させるのかを記述。例えば5段階で変化させるなら、steps(5) と記述します。 .element { animation: img-move 5s steps(5); } @keyframes img-move
Designing Beautiful Shadows in CSS
IntroductionIn my humble opinion, the best websites and web applications have a tangible “real” quality to them. There are lots of factors involved to achieve this quality, but shadows are a critical ingredient. When I look around the web, though, it's clear that most shadows aren't as rich as they could be. The web is covered in fuzzy grey boxes that don't really look much like shadows. In this t
GitHub - greensock/GreenSock-JS: GreenSock's GSAP JavaScript animation library (including Draggable).
GSAP is a framework-agnostic JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in every major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...anything JavaScript can touch! GSAP's ScrollTrigger plugin delivers jaw-dropping scroll-based animations with minimal code. gsap.m
First Look At The CSS object-view-box Property
I have always wanted a native CSS way to crop an image and position it in any direction I need. This has been possible by using an additional HTML element combined with different CSS properties that I will explain later. In this article, I will walk you through the new CSS property object-view-box that was suggested by Jake Archibald early this year. It allows us to crop or resize replaced HTML el
Building a button component | Articles | web.dev
Building a button component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build color-adaptive, responsive, and accessible <button> components. In this post I want to share my thoughts on how to build a color-adaptive, responsive, and accessible <button> element. Try the demo and view the source Buttons are interacted with
Create Diagonal Layouts Like It's 2020 - 9elements
Create Diagonal Layouts Like It's 2020 TL/DR: Diagonal layouts are great. You can build them easily with CSS. Take a look at this CodePen to see how it works. Layouts with diagonal sections are quite popular for several years now. It is not the new hot stuff, and you will probably not find it in the articles titled "Design trends for 2020". But I think it is here to stay. It is one tool designers
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://codepen.io/shadeed/pen/vYXbrrb
GitHub - codrops/OnScrollShapeMorph: Morphing shape animations on scroll
Scroll shadows with animation-timeline
inline-size | CSS-Tricks
https://codepen.io/argyleink/pen/jOQKdeW
有名サイトで使用されているCSSテクニックまとめ - Qiita
Mathias Bynens on Twitter: "💡 In source code, stop using the old rgb()/hsl() CSS color syntax with commas. Get used to the modern comma-free C… https://t.co/l5rXpEinwv"
GitHub - codrops/ContentLayoutTransition: An experimental layout transition where a stack of images animates to a gallery view, showing some more content.
outline-offset - CSS: カスケーディングスタイルシート | MDN
CSS Selectors Cheatsheet - FrontEnd30
removeClass時にゆっくりとスタイルを変更する