Alex Comments - Answer Overflow

Alex

•Created by Assyrianlegend on 12/18/2024 in #front-end

Button Border animation

I probably wouldn't put an animated gradient on UI text in production — maybe on a big weighty line of hero text, but even then, less is usually more when it comes to animation

12 replies

KPCKevin Powell - Community

•Created by Assyrianlegend on 12/18/2024 in #front-end

Button Border animation

Setting aside the coding for a second, this was a fun exercise, but from a UX/accessibility standpoint it's basically illegible with bright colours and a white background. I increased the font weight, made it almost twice the size, set it against a dark background and put a fairly slow animation on it — it's still rather difficult to read

12 replies

KPCKevin Powell - Community

•Created by Assyrianlegend on 12/18/2024 in #front-end

Button Border animation

- Use @property to define a custom property, which can then be animated - Set that custom property as the starting angle of your gradient - then animate it with @keyframes More general notes: - Data attributes need to be named on the element, you can't just set content to attr(data) - Keep the text in the button so it's screen-reader accessible, but make it visually hidden so it doesn't conflict with the text on the pseudoelement - I turned the gradient into its own custom prop as well, so you don't have to update it in three different places - I set the gradient to a conic gradient and added more colours; if it's just two, you get a 'pulse' effect when the gradient crosses the wide part of the element which is quite unpleasant. You generally need a lot of colours to make it work, and if using a conic gradient, you also have to put the same colour at start and end to avoid a hard stop

12 replies

KPCKevin Powell - Community

•Created by Assyrianlegend on 12/18/2024 in #front-end

Button Border animation

Made some notes in the comments, but it works like this:

12 replies

KPCKevin Powell - Community

•Created by Assyrianlegend on 12/18/2024 in #front-end

Button Border animation

You were close with the -webkit-background-clip on the pseduoelement text, but it was empty because your data attribute wasn't set up correctly. Here's a slightly messy proof of concept I threw together https://codepen.io/Beanie127/pen/emOvyaZ

12 replies

KPCKevin Powell - Community

•Created by Artex on 12/18/2024 in #front-end

How do i strech the size of this element

Can't tell for certain without seeing an actual example with HTML (usually a codepen is recommended) but assuming the alert and the X button are in the navContainer, remove align-items:center or change it to stretch

6 replies

KPCKevin Powell - Community

•Created by empty on 9/14/2024 in #front-end

stroke text

I know this is months old now but this popped up on Chrome.dev's CSS Wrapped article and tickled the memory of this question. Turns out the solution is paint-order: stroke fill https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order

9 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 11/29/2024 in #front-end

how did the font changed automatically ?

I don't know why it's changing like that in the figma file, but alternate characters are usually accessed by turning on stylistic sets. Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates If you can find the font listing on the foundry website you may be able to look up the one you need, otherwise you can experiment with the numbers.

10 replies

KPCKevin Powell - Community

•Created by Kernix on 11/5/2024 in #front-end

Which of Kevin's courses would you recommend?

Well... Do you find CSS mystifying? Do you struggle to design responsive websites? Or are you trying to develop your skills into project architecture and build tools, that go... Beyond CSS? In other words, it depends what your goals are, and once you know that, the answer can probably be found in the descriptions (or indeed the names) of the courses

4 replies

KPCKevin Powell - Community

•Created by vic on 11/4/2024 in #front-end

how to make a text p tag fills it from parent container

One solution would be to hardcode font size of the element in vw/vi units, but doing so breaks accessibility recommendations about allowing users to adjust don't size. Another would be using an image with an alt tag, which is also not ideal.

14 replies

KPCKevin Powell - Community

•Created by vic on 11/4/2024 in #front-end

how to make a text p tag fills it from parent container

It is possible but only via a weird hack with relatively low browser support: https://kizu.dev/fit-to-width-text/

14 replies

KPCKevin Powell - Community

•Created by luca on 10/24/2024 in #front-end

Using a CMS on a vanilla JS website??

You build your website as normal in vanilla html/CSS/js, define your custom components and templates, and then let them at it with a very simple wysiwyg editor

20 replies

KPCKevin Powell - Community

•Created by luca on 10/24/2024 in #front-end

Using a CMS on a vanilla JS website??

You might want to check out https://www.surrealcms.com/ it's somewhat limited in what it can do and requires some upfront setup from you, but you basically designate certain elements as editable using custom attributes on the html and you can design page templates so they can add blogs or whatever

20 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 10/23/2024 in #front-end

santa hat to text how ?

An element with position:absolute is positioned relative to the nearest positioned ancestor. Setting position:relative on the main element lets you position the pseudoelement relative to it; without it, it would be positioned relative to the root element, so it would be in the top left of the whole document rather than the span.

27 replies

KPCKevin Powell - Community

•Created by Inna Bulatova on 10/21/2024 in #front-end

self-hosting font won't work

Impossible to know without seeing your file structure, but also, why are you renaming the font to 'main'? Is the other text on the page also roboto? Are you able to import the other font files?

99 replies

KPCKevin Powell - Community

•Created by luca on 10/20/2024 in #ui-ux

Could you review my website please?

Each section looks alright in itself, but from an information hierarchy perspective, if this is a site for selling products, put products front and centre. It's a waste of space dedicating the entire space above the fold to an (unfortunately) unattractive image of a truck and the outside of a shop, some generic copy and a button to 'contact', especially when the next section down is a scrolling banner of logos. Brand names mean nothing if you don't sell the component I want

39 replies

KPCKevin Powell - Community

•Created by luca on 10/20/2024 in #ui-ux

Could you review my website please?

If this were a genuine commercial site, I'd want to see actual product information, not just broad categories of stuff.

39 replies

KPCKevin Powell - Community

•Created by luca on 10/20/2024 in #ui-ux

Could you review my website please?

personally, the 'free live chat' popup instantly makes me want to close the page. It's never useful for someone checking out a site

39 replies

KPCKevin Powell - Community