Загрузка видео...

Не удалось загрузить видео

На главную

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.

ChallengesCss's profile picture

CSS by T. Afif

14,067 subscribers

82,668 просмотров • 6 месяцев назад •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!
0:16

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

CSS by T. Afif

57,924 просмотров • 9 месяцев назад

A fun CSS-only experimentation using modern features (anchor positioning, @​property, :has(), and more!) for this week #codepenchallenge Demo: via CodePen.IO
0:17

A fun CSS-only experimentation using modern features (anchor positioning, @​property, :has(), and more!) for this week #codepenchallenge Demo: via CodePen.IO

CSS by T. Afif

12,042 просмотров • 1 год назад

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔
0:11

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔

Surjith S M ✪

140,209 просмотров • 3 лет назад

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().
0:11

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().

Chrome for Developers

24,796 просмотров • 3 месяцев назад

💡 CSS Tip! Create a Sticky Header that "sticks"! A fancy effect powered by Scroll-Driven Animations and shape().
0:10

💡 CSS Tip! Create a Sticky Header that "sticks"! A fancy effect powered by Scroll-Driven Animations and shape().

CSS by T. Afif

22,524 просмотров • 2 месяцев назад

I've created a simple website that allows you to play with squircles using modern CSS `corner-shape`
0:13

I've created a simple website that allows you to play with squircles using modern CSS `corner-shape`

Adam Pietrasiak

48,723 просмотров • 7 месяцев назад

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔
0:12

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔

Surjith S M ✪

203,353 просмотров • 3 лет назад

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.
0:14

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.

CSS by T. Afif

25,194 просмотров • 1 год назад

Build Flow Charts with #CSS Anchor Positioning
0:10

Build Flow Charts with #CSS Anchor Positioning

Cory Rylan

28,522 просмотров • 2 лет назад

What we can do with modern CSS is impressive! 🤩 A cool demo is in progress. Stay tuned! 👀
0:14

What we can do with modern CSS is impressive! 🤩 A cool demo is in progress. Stay tuned! 👀

CSS by T. Afif

12,125 просмотров • 1 месяц назад

"Learn CSS: Clipping with SVG, shape-outside, shape-margin" by Victor A
0:15

"Learn CSS: Clipping with SVG, shape-outside, shape-margin" by Victor A

CodePen.IO

11,839 просмотров • 10 месяцев назад

Create this layout using nested css grids and media queries 💪
0:14

Create this layout using nested css grids and media queries 💪

David Mráz

14,283 просмотров • 1 год назад

I and Jason are currently working on implementing the CSS `polygon() round` keyword in Chrome. This is one of my favorite CSS features! Thanks to Lea Verou, PhD for bringing it to CSS. The CodePen link is coming soon.
0:17

I and Jason are currently working on implementing the CSS `polygon() round` keyword in Chrome. This is one of my favorite CSS features! Thanks to Lea Verou, PhD for bringing it to CSS. The CodePen link is coming soon.

一丝

32,865 просмотров • 3 месяцев назад

Tailwind CSS Tip ✨ You can create a floating input form with Tailwind CSS using ":placeholder-shown" pseudo class. Live Demo & Code 👇 (8/30) follow for 22 more tips 🔔
0:17

Tailwind CSS Tip ✨ You can create a floating input form with Tailwind CSS using ":placeholder-shown" pseudo class. Live Demo & Code 👇 (8/30) follow for 22 more tips 🔔

Surjith S M ✪

173,081 просмотров • 3 лет назад

When you try and position a dress with CSS...
0:14

When you try and position a dress with CSS...

Yoav Ganbar

24,647 просмотров • 3 лет назад

In case you missed it, I wrote about the basics CSS Anchor Positioning. 🔗
0:16

In case you missed it, I wrote about the basics CSS Anchor Positioning. 🔗

Ahmad Shadeed

38,739 просмотров • 10 месяцев назад

✨ Introducing Magic UI 🪄 A UI library of animated components to build beautiful landing pages. Built using React, Tailwind CSS and Framer motion. 100% Free and Open Source.
0:17

✨ Introducing Magic UI 🪄 A UI library of animated components to build beautiful landing pages. Built using React, Tailwind CSS and Framer motion. 100% Free and Open Source.

Dillion

324,699 просмотров • 2 лет назад

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉
0:15

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉

Devon Govett

83,922 просмотров • 9 месяцев назад

I made a version of this using only modern CSS. 👀
0:13

I made a version of this using only modern CSS. 👀

H. Kyle Foster

64,822 просмотров • 8 месяцев назад

A 🔥 browser extension every CSS developer must have. CSS Scan lets you extract the code for any CSS element of all the websites across the internet. Check out CSS Scan and click on the below link to get a 25% discount👇
0:12

A 🔥 browser extension every CSS developer must have. CSS Scan lets you extract the code for any CSS element of all the websites across the internet. Check out CSS Scan and click on the below link to get a 25% discount👇

Shefali

29,340 просмотров • 1 год назад