#css — Public Fediverse posts

#meme #css

Animate element along the border with a few lines of CSS, without SVG paths. This is black magic here, folks!

Thank you for sharing @kevinpowell

https://youtu.be/pMo2CzcSiko?si=sZPf4bN0DrEwFSCJ

#css

Animate element along the border with a few lines of CSS, without SVG paths. This is black magic here, folks!

Thank you for sharing @kevinpowell

https://youtu.be/pMo2CzcSiko?si=sZPf4bN0DrEwFSCJ

#css

1/3

I added a new banner to LisaGUI’s homepage. The power button brightens a bit on hover, and fully turns on when the banner is clicked.

In the future I really ought to take a photo with better lighting on the front, but this should be fine for now.

#css #apple #webdesign #appleLisa

1/3

I added a new banner to LisaGUI’s homepage. The power button brightens a bit on hover, and fully turns on when the banner is clicked.

In the future I really ought to take a photo with better lighting on the front, but this should be fine for now.

#css #apple #webdesign #appleLisa

1/3

I added a new banner to LisaGUI’s homepage. The power button brightens a bit on hover, and fully turns on when the banner is clicked.

In the future I really ought to take a photo with better lighting on the front, but this should be fine for now.

#css #apple #webdesign #appleLisa

1/3

I added a new banner to LisaGUI’s homepage. The power button brightens a bit on hover, and fully turns on when the banner is clicked.

In the future I really ought to take a photo with better lighting on the front, but this should be fine for now.

#css #apple #webdesign #appleLisa

#Development #Launches
CSS-DOS · An entire ‘80s PC implemented in pure CSS https://ilo.im/16epfr

_____
#CSS #Stylesheet #PC #MSDOS #Windows #DOOM #WebDev #Frontend

#Development #Launches
CSS-DOS · An entire ‘80s PC implemented in pure CSS https://ilo.im/16epfr

_____
#CSS #Stylesheet #PC #MSDOS #Windows #DOOM #WebDev #Frontend

OOOooo this one get extra points for the unique article design:

what happened to the #frontend

"Two decades, forty-four meters of build tools, and one very confused <button> later, here's the whole story. Spare twenty minutes; I'll get you up to speed...In 2008 you saved a file called index.html, dragged it onto an FTP client, and watched a little progress bar crawl to the right. When it finished, your website existed..."

https://davidpoblador.com/deep-dives/what-happened-to-the-frontend/

#webdev #css #html

OOOooo this one get extra points for the unique article design:

what happened to the #frontend

"Two decades, forty-four meters of build tools, and one very confused <button> later, here's the whole story. Spare twenty minutes; I'll get you up to speed...In 2008 you saved a file called index.html, dragged it onto an FTP client, and watched a little progress bar crawl to the right. When it finished, your website existed..."

https://davidpoblador.com/deep-dives/what-happened-to-the-frontend/

#webdev #css #html

One last post, really.

I'm tired of my color palette on my Cliff538 blog. I want to change the whole color scheme, but I don't even know where to begin. How does one even approach this? I'm not a designer in any way, shape, or form, and I don't know what colors work well together until I actually see them.

I have my CSS all neat and tidy for global changes (I think… hasn't been tested yet). I just want complementary colors that are web-safe and look good.

Ideas?

#css #html #ColorPalette

One last post, really.

I'm tired of my color palette on my Cliff538 blog. I want to change the whole color scheme, but I don't even know where to begin. How does one even approach this? I'm not a designer in any way, shape, or form, and I don't know what colors work well together until I actually see them.

I have my CSS all neat and tidy for global changes (I think… hasn't been tested yet). I just want complementary colors that are web-safe and look good.

Ideas?

#css #html #ColorPalette

Recreating a 1990 Book Cover (in HTML and CSS), by @blog:

https://danq.me/2026/07/13/goscript-plus-book-cover/?ref=frontenddogma.com

#html #css

Recreating a 1990 Book Cover (in HTML and CSS), by @blog:

https://danq.me/2026/07/13/goscript-plus-book-cover/?ref=frontenddogma.com

#html #css

3Pillar Global is hiring Technical lead - Fullstack (.Net & ReactJS)

🔧 #dotnet #csharp #dotnetcore #react #azure #cicd #css #sql #techlead
🌎 India
⏰ Full-time
🏢 3Pillar Global

Job details https://jobsfordevelopers.com/jobs/technical-lead-fullstack-net-reactjs-at-3-pillarglobal-com-may-25-2026-90143d?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting
#jobalert #jobsearch #hiring

3Pillar Global is hiring Technical lead - Fullstack (.Net & ReactJS)

🔧 #dotnet #csharp #dotnetcore #react #azure #cicd #css #sql #techlead
🌎 India
⏰ Full-time
🏢 3Pillar Global

Job details https://jobsfordevelopers.com/jobs/technical-lead-fullstack-net-reactjs-at-3-pillarglobal-com-may-25-2026-90143d?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting
#jobalert #jobsearch #hiring

3Pillar Global is hiring Technical lead - Fullstack (.Net & ReactJS)

🔧 #dotnet #csharp #dotnetcore #react #azure #cicd #css #sql #techlead
🌎 India
⏰ Full-time
🏢 3Pillar Global

Job details https://jobsfordevelopers.com/jobs/technical-lead-fullstack-net-reactjs-at-3-pillarglobal-com-may-25-2026-90143d?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting
#jobalert #jobsearch #hiring

3Pillar Global is hiring Technical lead - Fullstack (.Net & ReactJS)

🔧 #dotnet #csharp #dotnetcore #react #azure #cicd #css #sql #techlead
🌎 India
⏰ Full-time
🏢 3Pillar Global

Job details https://jobsfordevelopers.com/jobs/technical-lead-fullstack-net-reactjs-at-3-pillarglobal-com-may-25-2026-90143d?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting
#jobalert #jobsearch #hiring

3Pillar Global is hiring Technical lead - Fullstack (.Net & ReactJS)

🔧 #dotnet #csharp #dotnetcore #react #azure #cicd #css #sql #techlead
🌎 India
⏰ Full-time
🏢 3Pillar Global

Job details https://jobsfordevelopers.com/jobs/technical-lead-fullstack-net-reactjs-at-3-pillarglobal-com-may-25-2026-90143d?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting
#jobalert #jobsearch #hiring

Прототипирование фронта в 2к26 от системного аналитика

Раньше для согласования интерфейса я собирал макет в Figma, описывал каждое поле, отдавал его дизайнеру, а потом отдельно объяснял логику фронтенд-разработчику. В 2026 году тот же путь можно пройти быстрее: передать ИИ требования и за несколько итераций получить кликабельный прототип на HTML, CSS и JavaScript — с формами, модальными окнами, валидацией и тестовыми сценариями. В статье рассказываю, где такой подход действительно помогает системному аналитику, когда он превращается в работу ради работы и почему прототип все равно нельзя считать готовой реализацией. Посмотреть, как это работает

https://habr.com/ru/articles/1061532/

#системный_аналитик #прототипирование_интерфейсов #вайбкодинг #искусственный_интеллект #LLM #Figma #HTML #CSS #JavaScript #требования

Watch Now: https://zurl.co/sZMn0

Using AI to Generate Email HTML & CSS Code | Build Responsive Email Templates in Minutes

#SalesforceMarketingCloud #SFMC #EmailDevelopment #HTML #CSS #ArtificialIntelligence #GenerativeAI #EmailMarketing #ResponsiveEmail #PromptEngineering #Salesforce #DigitalMarketing #WebDevelopment #MarketingAutomation #AIForDevelopers

Watch Now: https://zurl.co/sZMn0

Using AI to Generate Email HTML & CSS Code | Build Responsive Email Templates in Minutes

#SalesforceMarketingCloud #SFMC #EmailDevelopment #HTML #CSS #ArtificialIntelligence #GenerativeAI #EmailMarketing #ResponsiveEmail #PromptEngineering #Salesforce #DigitalMarketing #WebDevelopment #MarketingAutomation #AIForDevelopers

Watch Now: https://zurl.co/sZMn0

Using AI to Generate Email HTML & CSS Code | Build Responsive Email Templates in Minutes

#SalesforceMarketingCloud #SFMC #EmailDevelopment #HTML #CSS #ArtificialIntelligence #GenerativeAI #EmailMarketing #ResponsiveEmail #PromptEngineering #Salesforce #DigitalMarketing #WebDevelopment #MarketingAutomation #AIForDevelopers

Watch Now: https://zurl.co/sZMn0

Using AI to Generate Email HTML & CSS Code | Build Responsive Email Templates in Minutes

#SalesforceMarketingCloud #SFMC #EmailDevelopment #HTML #CSS #ArtificialIntelligence #GenerativeAI #EmailMarketing #ResponsiveEmail #PromptEngineering #Salesforce #DigitalMarketing #WebDevelopment #MarketingAutomation #AIForDevelopers

Watch Now: https://zurl.co/sZMn0

Using AI to Generate Email HTML & CSS Code | Build Responsive Email Templates in Minutes

#SalesforceMarketingCloud #SFMC #EmailDevelopment #HTML #CSS #ArtificialIntelligence #GenerativeAI #EmailMarketing #ResponsiveEmail #PromptEngineering #Salesforce #DigitalMarketing #WebDevelopment #MarketingAutomation #AIForDevelopers

🦖 alignment-baseline CSS property
☑️ Newly available (from Mar 2026)

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/alignment-baseline

The alignment-baseline CSS property specifies the specific baseline used to align the box's text and inline-level contents. Baseline alignment is the relationship among the baselines of multiple alignment subjects within an alignment context. When performing baseline alignment, the alignment-baseline property value specif…

#webdev #CSS

🦖 alignment-baseline CSS property
☑️ Newly available (from Mar 2026)

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/alignment-baseline

The alignment-baseline CSS property specifies the specific baseline used to align the box's text and inline-level contents. Baseline alignment is the relationship among the baselines of multiple alignment subjects within an alignment context. When performing baseline alignment, the alignment-baseline property value specif…

#webdev #CSS

🦖 alignment-baseline CSS property
☑️ Newly available (from Mar 2026)

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/alignment-baseline

The alignment-baseline CSS property specifies the specific baseline used to align the box's text and inline-level contents. Baseline alignment is the relationship among the baselines of multiple alignment subjects within an alignment context. When performing baseline alignment, the alignment-baseline property value specif…

#webdev #CSS

🦖 alignment-baseline CSS property
☑️ Newly available (from Mar 2026)

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/alignment-baseline

The alignment-baseline CSS property specifies the specific baseline used to align the box's text and inline-level contents. Baseline alignment is the relationship among the baselines of multiple alignment subjects within an alignment context. When performing baseline alignment, the alignment-baseline property value specif…

#webdev #CSS

🦖 alignment-baseline CSS property
☑️ Newly available (from Mar 2026)

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/alignment-baseline

The alignment-baseline CSS property specifies the specific baseline used to align the box's text and inline-level contents. Baseline alignment is the relationship among the baselines of multiple alignment subjects within an alignment context. When performing baseline alignment, the alignment-baseline property value specif…

#webdev #CSS

💡 CSS Tip!

Creating ASCII art is cool, but making it responsive is better! 🤩

https://css-tip.com/ascii-art/

Now it's possible using the new text-fit property. A simple code and you are done.

#CSS #HTML

💡 CSS Tip!

Creating ASCII art is cool, but making it responsive is better! 🤩

https://css-tip.com/ascii-art/

Now it's possible using the new text-fit property. A simple code and you are done.

#CSS #HTML

In-n-Out Animation Using “sibling-index()”, by @css (@frontendmasters.com):

https://master.dev/blog/in-n-out-animation-using-sibling-index/?ref=frontenddogma.com

#css #animations #functions

In-n-Out Animation Using “sibling-index()”, by @css (@frontendmasters.com):

https://master.dev/blog/in-n-out-animation-using-sibling-index/?ref=frontenddogma.com

#css #animations #functions

In-n-Out Animation Using “sibling-index()”, by @css (@frontendmasters.com):

https://master.dev/blog/in-n-out-animation-using-sibling-index/?ref=frontenddogma.com

#css #animations #functions

In-n-Out Animation Using “sibling-index()”, by @css (@frontendmasters.com):

https://master.dev/blog/in-n-out-animation-using-sibling-index/?ref=frontenddogma.com

#css #animations #functions

In-n-Out Animation Using “sibling-index()”, by @css (@frontendmasters.com):

https://master.dev/blog/in-n-out-animation-using-sibling-index/?ref=frontenddogma.com

#css #animations #functions

[OT] Tooltip
#CSS #HTML #javascript
https://open-time.net/post/2026/07/21/Tooltip

Jelly UI is a dependency-free Web Components library for "soft, tactile product interfaces"... soft-body physics, with dark mode, right-to-left support and WCAG AA color tokens built in.

#css #frontend #html #webdev

https://jelly-ui.com/

Jelly UI is a dependency-free Web Components library for "soft, tactile product interfaces"... soft-body physics, with dark mode, right-to-left support and WCAG AA color tokens built in.

#css #frontend #html #webdev

https://jelly-ui.com/

Jelly UI is a dependency-free Web Components library for "soft, tactile product interfaces"... soft-body physics, with dark mode, right-to-left support and WCAG AA color tokens built in.

#css #frontend #html #webdev

https://jelly-ui.com/

Jelly UI is a dependency-free Web Components library for "soft, tactile product interfaces"... soft-body physics, with dark mode, right-to-left support and WCAG AA color tokens built in.

#css #frontend #html #webdev

https://jelly-ui.com/

Jelly UI is a dependency-free Web Components library for "soft, tactile product interfaces"... soft-body physics, with dark mode, right-to-left support and WCAG AA color tokens built in.

#css #frontend #html #webdev

https://jelly-ui.com/

Per uno scambio più equo, vorrei portare qualche collezione nel profilo.
Iniziamo da questa sull'IndieWeb, ossia coloro che portano avanti con passione blog e siti personali.
Purtroppo non posso aggiungere tutti quelli che vorrei (alcune istanze non lo permettono), e come al solito mi dimenticherò di qualcuno.

Aggiungo anche, andando a rinnovare un precedente post:
@stefano
@lorenzo
@dado
@denial403
@giacomo

@internet

https://mastodon.uno/collections/116954244739663583

#indieblog #web #blog #ssg #html #css #js #cms

Back where I want it to be.

The #accessibility score is a bit of an underestimate. Automated tools always flag that we don't have a text-decoration: underline; rule in our #CSS for anchors.

In fact we use a box-shadow rule to achieve the same effect with some minimal animation on :hover

And, yes, I know, automated. It's just a quick'n'dirty benchmark.

Back where I want it to be.

The #accessibility score is a bit of an underestimate. Automated tools always flag that we don't have a text-decoration: underline; rule in our #CSS for anchors.

In fact we use a box-shadow rule to achieve the same effect with some minimal animation on :hover

And, yes, I know, automated. It's just a quick'n'dirty benchmark.

Another great post by Josh W. Comeau. I love that he didn't try to cover the whole API, but made a pragmatic decision to explain the most useful bits. As always, I learned a lot from this post.

https://www.joshwcomeau.com/css/anchor-positioning/

#css

Another great post by Josh W. Comeau. I love that he didn't try to cover the whole API, but made a pragmatic decision to explain the most useful bits. As always, I learned a lot from this post.

https://www.joshwcomeau.com/css/anchor-positioning/

#css

From the archives...

Zoomable Image - Creating a Zoom Effect
https://barretblake.dev/posts/development/2026/05/zoomable-image/ #css #hugo