#webdevlopment

Ana Tudor 🐯anatudor
2025-01-18

Know the animated 🌈 border + glow effect that's all the rage? It's normally done by adding an opaque cover on top of two 🌈 layers.

But what if we wanted a (semi)transparent background within the border? It's possible with pure !

Heavily commented on @codepen codepen.io/thebabydino/pen/KwP

Ana Tudor 🐯anatudor
2024-10-21

Simplest gradient border buttons (with border-radius) codepen.io/thebabydino/pen/vYo

Multiple cases, each just a few lines of code:
✨ solid background
✨ (semi)transparent background
✨ (semi)transparent background for input[type=button] (so no pseudos allowed)

Three buttons with the text "Boo!" and a gradient border. The first has a solid background, the others a semi-transparent one.The code for the first two cases.

```
/* ALL these methods work well with border-radius */
.opaque-background {
  	/* transparent, just reserves border space */
	border: solid 6px #0000;
	background: 
  		/* opaque background limited to padding-box */
		linear-gradient(silver, gainsboro) padding-box, 
    	/* border grad stretches across border-box */
    	var(--grad) border-box
}

.semi-transparent {
	position: relative;
	border: solid 6px #0000;
	
	&::after {
		--fill: conic-gradient(red 0 0);
		position: absolute;
		inset: -6px; /* cancel out parent border */
		border: inherit;
		border-radius: inherit;
		background: var(--grad) border-box;
		/* exclude padding-box out of border-box */
		mask: var(--fill) padding-box exclude, var(--fill);
		pointer-events: none;
		content: ''
	}
}
``
Ana Tudor 🐯anatudor
2024-01-31

Retro-striped text with filters - detailed step by step, demos & more
patreon.com/posts/retro-stripe

(final, link for all, not just patrons)

Chris Smithchris22smith
2023-07-07

Web devs, is there a reliable way of taking a screenshot, element to image, with JavaScript?

I've tried html2canvas (not faithful), media stream (requires user permission) and blob generation (I can't figure it out).

I'm actually trying to load an iframe then replace it with a screenshot of its content as a way of saving resources.

2023-07-05

Hi!
I am OlshaMB(Michael).
I am almost 16 year old programmer.
I love MacOS and Apple, and Arc Browser btw.
I program for the web, in the newest web tech.
Also sometimes I program in Rust, also sometimes I program in swift for mac apps.
I love open-source and Linux.
#macos #introduction #programmer #rust #webdev #webdevlopment #student

Joaquim Homrighausenjoho@mastodon.online
2023-03-27

Bootstrap sure isn't making it easy to self-host its assets (including Popper) with BS 5.2. It's almost as if they have never heard of GDPR or non-CDN usage ... 🤔

#bootstrap #getbootstrap #cdn #gdpr #gdprcompliance #selfhosted #devops #Webdevlopment #webdeveloper

Ethan_bakerEthanbaker
2022-08-23

Take your Business to the Future
Please Check out
.
shorturl.at/anrsx
.

Bun will be a replacement for Node & Deno with batteries included

means SQLite support and Express replacement all written in Zig

Bun will replace the most of the JS/TS ecosystem

lunasec.io/docs/blog/bun-first

#js #javascript #ts #typescript #ziglang #node #nodejs #deno #rome #webpack #vite #express #sqlite #frontend #webdevlopment #enterprise

Client Info

Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst