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

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

На главную

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

51,166 просмотров • 1 год назад •via X (Twitter)

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

Фото профиля Nine
Nine1 год назад

Can you make a css based ui library called jhey/ui

Фото профиля Alexis Morin
Alexis Morin1 год назад

What version of Chrome will have support for the ::details-content pseudo-element?

Фото профиля mh
mh1 год назад

Probably going to be a while until this is useful, right?

Фото профиля Eugene Korchagin
Eugene Korchagin1 год назад

God Are you magician?

Фото профиля Gustav Ekerot
Gustav Ekerot1 год назад

where's the npm package jhey!? seriously though, would be cool with a css-only based component lib, copy paste á la shadcn

Фото профиля Sudhansu Bhushan Mishra
Sudhansu Bhushan Mishra1 год назад

Thank you for sharing this codepen

Фото профиля 👑 Satoshi 16px
👑 Satoshi 16px1 год назад

You inspire me man!! Its crazy what you do with Css

Фото профиля Manu | UX UI Designer
Manu | UX UI Designer1 год назад

Nice!!!!

Фото профиля Facundo Muoio
Facundo Muoio1 год назад

Wow! Men, it is so pretty accordion. I would like to know where you learn these CSS skills.

Фото профиля Carlito
Carlito1 год назад

Sorcery!

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

American bought a Vizio Smart TV from Walmart. He took it home only to find you cannot use the TV without a Walmart account logged in You cent even turn it on and get past the first screen This is because Walmart bought Vizio and by having you sign in with your account they can like the data collected to you This TV collects everything and links it to your account - Contact details - Payment information - Subscription information - Account authentication and security information The optional data that most people just click next through is the really invasive data capturing, it includes - Viewing Data - Activity Data - Mobile App Data - Mobile Streaming Data It also uses built-in technology to analyze what’s playing on the TV in real time, including: - Audio and video programming, ads and gaming content - Content from connected devices like HDMI - Third-party apps like streaming services for movies, shows, episodes, channels, launch events - Device state details: volume, channel, picture controls, inputs, power on/off But it doesn’t stop there, it also collects - Basic identifiers: Name, email, phone, address, account credentials - Device/online identifiers: Device IDs, advertising IDs, IP/MAC addresses, model/serial numbers, firmware, Wi-Fi access points, cookies - Activity Data: Settings, inputs, clicks, impressions, operational/performance data, some content interaction details - Commercial/financial info: Purchases, subscriptions, warranties, payment cards - Internet/network activity: How you use the apps, sites, ads, and services - Mobile app and streaming data if you use the Vizio app You agree to have all this data collected from you just because you bought a TV…..

Wall Street Apes

230,745 просмотров • 22 дней назад

How I turn my templates into real landing pages. Works for any vibe coding platform or site. This is my full guide. I start with Gemini 3. I copy the HTML code and paste to Cursor/v0/lovable and prompt "Create a new landing page /page-name using this design but adapted to {site_name}. Replace the header and footer with the ones from my site. Adapt the whole page, keep everything: {HTML_code}" Details that can to be adapted or improved: Fonts: "Use {font_name} Google font for headings and {font_name} for body text." Icons: "Use Iconify {icon_set} icons" Colors: "Change primary color to blue. Everything else should be monotone." Bonus: "Make the outlines subtle" for a cleaner design. Animation intro/on scroll: "Animate when in view observed, fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0." Static to animated: "Animate details with {animate_type} and decorations.". Example types: line, beam animation, noodles, grid, sonar, etc. Background animation: "Apply the background animation using Unicorn Studio {animation_code}" Details to make your layout stand out: "Add vertical container-size lines. Add 01 02 03 number details." Stand out from generic-looking: "Make this more upscale with large tall fonts, Newsreader font and black and white agency". Adapt content: "Adapt the content to {copy and paste site texts}". Buttons: "Change main button to {code}. Add a 1px border beam animation around the pill-shaped button on hover." Adding sections like testimonials: "Adapt a new section after {section} using this code: {component code}". You can copy the code from Codepen, 21st dev or Aura. Responsiveness: "Make this responsive. Add a hamburger menu for mobile. Hide this {element} for mobile." Making forms work: "Make the form send an email to {your_email}". Payments: "Link the buy button to {LemonSqueezy payment link}". I use composer-1 for quick fixes. I finish with Claude Opus 4.5 for code reviews "Please review the code for performance and robustness". The template HTML code should give you a blueprint for all these, but I think it's important to keep iterating for your specific site.

Meng To

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