Skip to main content

Search

Items tagged with: cssGradient

I wrote something about #AI... something with a long title!

ChatGPT and the proliferation of obsolete and broken solutions to problems we hadn’t had for over half a decade before its launch frontendmasters.com/blog/chatg…

It takes the #ChatGPT answer to a particular question, dissects it and goes through a bit of web history to explain what ChatGPT gets wrong and why.

#CSS #cssGradient #gradientText #code #web #dev #webDev #webDevelopment #coding #frontend


ChatGPT and the proliferation of obsolete and broken solutions to problems we hadn’t had for over half a decade before its launch

It was a lovely day on the internet when someone asked how to CSS animated gradient text like ChatGPT’s “Searching the web” and promptly got an answer saying “Have you tried asking ChatGPT? Here’s what it told me!” – well, maybe not these exact words…
frontendmasters.com
#ai #dev #web #webdev #code #css #coding #frontend #chatgpt #webdevelopment #cssgradient #gradienttext

Maybe don't rely on AI to answer your CSS questions. Actually... without the maybe. Don't rely on AI to answer your CSS questions.

#CSS #AI #aiCode #code #coding #frontend #web #dev #webDev #webDevelopment #cssGradient

Prompt: gradient triangle CSS Answer: Ah, a gradient triangle with CSS! That's a fun little visual trick. There are a few ways to achieve this, playing with borders and linear gradients. Here's a common and effective method using linear-gradient on a pseudo-element: CSS ``` .gradient-triangle { width: 0; height: 0; border-left: 50px solid transparent; /* Adjust size as needed */ border-right: 50px solid transparent; /* Adjust size as needed */ border-bottom: 100px solid red; /* Initial solid color */ position: relative; /* For positioning the pseudo-element */ } .gradient-triangle::before { content: ""; position: absolute; top: 0; left: -50px; /* Match the left border */ width: 100px; /* Match the combined left and right borders */ height: 100px; /* Match the bottom border */ background: linear-gradient(to bottom, rgba(255, 0, 0, 0), blue); /* Gradient */ -webkit-mask: polygon(0 0, 100% 0, 50% 100%); /* Clip to a triangle */ mask: polygon(0 0, 100% 0, 50% 100%); } ```
#ai #dev #web #webdev #code #css #coding #frontend #webdevelopment #cssgradient #aicode

⇧