Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Did you know? ✨ You can create an animated toggle switch in Tailwind CSS using ":checked" pseudo property. View Code 👇 (9/30) follow for 21 more tips 🔔

surjithctly's profile picture

Surjith S M ✪

10,204 subscribers

57,991 Aufrufe • vor 3 Jahren •via X (Twitter)

Wissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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,378 Aufrufe • vor 3 Jahren

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,101 Aufrufe • vor 3 Jahren

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,240 Aufrufe • vor 3 Jahren

Quick tip everyone using Tailwind CSS You can easily create your brand's color palette with Pro tip: hit space to cycle through colors ✨
0:13

Quick tip everyone using Tailwind CSS You can easily create your brand's color palette with Pro tip: hit space to cycle through colors ✨

Faizur Rehman

21,301 Aufrufe • vor 2 Jahren

Future CSS Tip! 🤞 You could create an image zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇
0:14

Future CSS Tip! 🤞 You could create an image zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

168,050 Aufrufe • vor 3 Jahren

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.
0:12

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.

Soren

426,005 Aufrufe • vor 11 Monaten

💡CSS techniques: "The Backlight" Using a blur filter you can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:
0:15

💡CSS techniques: "The Backlight" Using a blur filter you can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:

bolt.new

369,448 Aufrufe • vor 1 Jahr

💡 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,205 Aufrufe • vor 1 Jahr

💡 CSS Tip! Get the scroll progress of the page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @​property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇
0:11

💡 CSS Tip! Get the scroll progress of the page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @​property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇

CSS by T. Afif

35,659 Aufrufe • vor 2 Jahren

Did you know? 👀 You can create a sailboat in Crimson Desert using the Eastern Witch’s Fan + a shipwreck.
0:13

Did you know? 👀 You can create a sailboat in Crimson Desert using the Eastern Witch’s Fan + a shipwreck.

Ninjago

409,036 Aufrufe • vor 4 Monaten

Where Winds Meet is an enormous game. Here are some very useful tips to improve your experience. 1) frustrated that you can't walk around in the game? you can toggle between running and walking. On PS, press LT + Left stick to toggle between walk and run More 👇🧵
0:14

Where Winds Meet is an enormous game. Here are some very useful tips to improve your experience. 1) frustrated that you can't walk around in the game? you can toggle between running and walking. On PS, press LT + Left stick to toggle between walk and run More 👇🧵

SpawnYaard 🎮

52,882 Aufrufe • vor 9 Monaten

Investing in Dubai: When you buy enough property they give you some free boots*. Follow me for more money saving tips. *one size fits most
0:15

Investing in Dubai: When you buy enough property they give you some free boots*. Follow me for more money saving tips. *one size fits most

Autumn Blair 

66,969 Aufrufe • vor 1 Jahr

Did you know you can create procedural shapes using polynomials, trigonometrics, and more? 🎨 Exciting news: the book 'Shader Functions for Technical Artists' is launching in 2024! Subscribe if you're interested! ⭐️ #ProceduralArt #b3d #gamedevs
0:10

Did you know you can create procedural shapes using polynomials, trigonometrics, and more? 🎨 Exciting news: the book 'Shader Functions for Technical Artists' is launching in 2024! Subscribe if you're interested! ⭐️ #ProceduralArt #b3d #gamedevs

Shaders Bible Series

239,544 Aufrufe • vor 2 Jahren

You might already know that you can drag editors into their own floating window in Visual Studio Code. But did you know that this works for the terminal too?
0:16

You might already know that you can drag editors into their own floating window in Visual Studio Code. But did you know that this works for the terminal too?

Visual Studio Code

77,106 Aufrufe • vor 1 Jahr

UI && CSS Tip! 🚀 You can use View Transitions to create that Radix by WorkOS style theme switcher 👀 ::view-transition-new(root) { animation: reveal;} keyframes reveal { 0% { clip-path: polygon(...);} /* Code 👇 */ } Animate clip-path between modes 😍 CodePen.IO link below! 👇
0:18

UI && CSS Tip! 🚀 You can use View Transitions to create that Radix by WorkOS style theme switcher 👀 ::view-transition-new(root) { animation: reveal;} keyframes reveal { 0% { clip-path: polygon(...);} /* Code 👇 */ } Animate clip-path between modes 😍 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

232,919 Aufrufe • vor 3 Jahren

Did you know that you can use Grok Imagine entirely to generate an epic commercial in under 30 seconds?
0:10

Did you know that you can use Grok Imagine entirely to generate an epic commercial in under 30 seconds?

Testlabor

4,344,447 Aufrufe • vor 7 Monaten

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇
0:18

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

30,624 Aufrufe • vor 3 Jahren

If you are using an if statement inside a for loop, did you know there's a better way of doing this is Swift? I'm talking about the where clause. Using the where clause in a for loop can provide several benefits over using an if statement inside a for loop: Readability: It explicitly states the condition that must be met for an element to be processed, making the purpose of the loop clearer to anyone reading the code. Efficiency: When using a where clause, the filtering of elements is done at the level of the sequence, which can be more efficient than filtering within the loop with an if statement. Brevity: Using a where clause often results in more concise code, as it eliminates the need for an if statement and associated braces. This can make the code more manageable and easier to maintain.
0:18

If you are using an if statement inside a for loop, did you know there's a better way of doing this is Swift? I'm talking about the where clause. Using the where clause in a for loop can provide several benefits over using an if statement inside a for loop: Readability: It explicitly states the condition that must be met for an element to be processed, making the purpose of the loop clearer to anyone reading the code. Efficiency: When using a where clause, the filtering of elements is done at the level of the sequence, which can be more efficient than filtering within the loop with an if statement. Brevity: Using a where clause often results in more concise code, as it eliminates the need for an if statement and associated braces. This can make the code more manageable and easier to maintain.

Everton Carneiro

23,416 Aufrufe • vor 2 Jahren

💡 Do you know about the `clip` value? In CSS, we can clip a container along a single axis by using the `clip` value. Learn more in this interactive article about the `clip` value:
0:17

💡 Do you know about the `clip` value? In CSS, we can clip a container along a single axis by using the `clip` value. Learn more in this interactive article about the `clip` value:

Ahmad Shadeed

10,533 Aufrufe • vor 1 Jahr

Spotify Covers 🖤 Midjourney Video What’s stopping you from using the same --sref to create animated covers for every track in an album? --sref 3736014377 852072328 --v 7
0:10

Spotify Covers 🖤 Midjourney Video What’s stopping you from using the same --sref to create animated covers for every track in an album? --sref 3736014377 852072328 --v 7

Dogan Ural

31,180 Aufrufe • vor 1 Jahr