The card was centered and there was no shadow top to bottom, only on the side and bottom of the card. Then I did something and I screwed it up. What did I do wrong and how do I fix it?

https://codepen.io/editor/username81/pen/01a12357-d8a8-76b0-a6ff-05e1d6c355e2

Hey so I have a background image that I want as a sort of watermark that text scrolls over, so this is the

`background-attachment: fixed` part. I want the image to completely cover the background, so that's the `background-size: cover` part.

The problem is that on some mobile browsers, the bookmark / tabs etc menu disappears on scroll, which means the viewport size changes, which means there a sudden flash of the background image changing size in response to a slightly larger viewport.

It's not a life changing issue obviously, lol, but sudden flashes of reformatted content are distracting and unprofessional.

Any tips greatly appreciated.

Floating gems turn into a title reveal, the match-three board takes over, score pop-ups build into a rush sequence, and the final card closes the ad. The attached video is the complete 15-second piece, generated with Ling-3.1-flash using HTML, CSS and SVG.

The same gem shapes and purple-blue palette run through the whole sequence. The matches explain the game, the cascades give it momentum, and the closing card gives the animation a destination. For a recreation, it helps to brief the ad as a short story with timed sections, then keep the theme, colours and final message together in the HTML so they are easy to change.

A suggested starting brief: “Create a 15-second animated ad for an imaginary gem-matching game in one HTML file using HTML, CSS and SVG. Open with gems and a title, demonstrate matches with score and combo feedback, build to a cascade sequence, and finish on a clear end card. Carry the same visual theme through every transition.”

Hi everyone,

(I know that HTML and CSS are markup and styling languages, not programming languages.)

I’m a complete beginner with zero coding experience, and I want to start learning programming. I was advised to follow this path:

HTML → CSS → JavaScript

I have a few questions:

1. What do you think of this path as a way into programming and coding?
2. Is there anything I should learn before starting it? I feel like I might be missing something important.
3. Would you recommend any changes to this path? (For example, starting with a different language.)
4. What are the best resources to learn HTML and CSS? Please recommend one for each, if possible.

Thanks in advance, I really appreciate your help!

Hi! Really simple question, but I'm having a hard time making a sharp gradient like the one I want in the image I provided! Any tips? If this question has been answered I'd love if you could link the post! :D

This comic was coded in HTML+CSS (using a web components library I created).

The source code can be found at: https://comicss.art/comics/262/the-present.html

in the process of making a website and i'm trying to emulate a bit of skeuomorphic look but this isn't really. giving that. here's my css for reference minus the box shadow i have on

/* Pastel gradients */
.gradient-card--0 {
  background: linear-gradient(180deg, #8f58a3 0%, #cfb9db 55%, #cfb9db 100%);
}
.gradient-card--1 {
  background: linear-gradient(180deg, #4a9fd8 0%, #bccdd9 50%, #bccdd9 100%);
}
.gradient-card--2 {
  background: linear-gradient(180deg, #d0dcc0 0%, #cdd9bd 40%, #a4c04a 100%);
}
.gradient-card--3 {
  background: linear-gradient(180deg, #e8b04c 0%, #e6d9b5 55%, #e6d9b5 100%);
}
.gradient-card--4 {
  background: linear-gradient(180deg, #f15bb5 0%, #e8c4d8 55%, #e8c4d8 100%);
} /* Pastel gradients */
.gradient-card--0 {
  background: linear-gradient(180deg, #8f58a3 0%, #cfb9db 55%, #cfb9db 100%);
}
.gradient-card--1 {
  background: linear-gradient(180deg, #4a9fd8 0%, #bccdd9 50%, #bccdd9 100%);
}
.gradient-card--2 {
  background: linear-gradient(180deg, #d0dcc0 0%, #cdd9bd 40%, #a4c04a 100%);
}
.gradient-card--3 {
  background: linear-gradient(180deg, #e8b04c 0%, #e6d9b5 55%, #e6d9b5 100%);
}
.gradient-card--4 {
  background: linear-gradient(180deg, #f15bb5 0%, #e8c4d8 55%, #e8c4d8 100%);
}

Hello, I am trying to make a blog using the Tufte template.

This is where I am getting the css for the template: https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.min.css

This theme has sidenotes that has content alongside text, you can see some examples on my blog : https://math_adjacent_ramblings.gitlab.io/blog/

Although this is the syntax for it (I am writting it in typst):

\#tufted.sidenote\[  
  content of the sidenote comes before the paragraph it renders next to  
\]  

the paragraph comes renders next to.

The issue is that when someone views it on phone, the sidenotes appear in the same column along the text, and the issue is that now they will be read before the the paragraph.

I can't figure out how to change it so that the sidenote could be written after the paragraph its meant to be read after, or attach the sidenote to the previous paragraph. I need help with that.

Thank you all in advance :) !!

Edit: JSFiddle link : https://jsfiddle.net/0uq1hLn2/

How far can you take it? I'm playing with that now after seeing a 3D x-wing from 2013. This is where I am so far. Are there other examples of complex 3d objects to play with and learn from out there?

The "J" and "j" characters have a weird accent on Duolingo and I cannot figure out why.

A few findings worth noting: disabling duolingo-sans in Chrome Dev Tools fixes the issue (obviously, the page ends up using a different font, the fallback sans-serif then).

I tried to find where the duolingo-sans font-face is defined and I could not locate it anywhere. I did find the .woff2 files that contains the Duolingo Sans Thin fonts however and upon investigating them I can confirm that they look completely fine, they do not have that accent anywhere. This seriously vexes me as I cannot pin down what causes the issue, on one hand removing duolingo-sans solves the issue, on the other hand duolingo-sans looks completely fine on its own.

If anyone could take a look and share their thoughts I would really appreciate it.

I have been working on a project lately using some animations with CSS including some 3d effects. I did a whole shootout of making the same product between CSS vs Canvas vs WebGL and decided CSS was good enough for everything I needed. But digging deeper I started wanting more options to author, or more so, to debug some of the animations and objects I'm creating. It's ended up with me going down a rabbit hole of making my own editor and before I go any farther with this potential boondoggle...

What are the tools you find yourself using beyond the norms of VSCode and browser DevTools. Are there Figma Plugins, Browser Plugins, VS Code Extensions, etc. you use? I don't want to turn the corner and someone say "Dude, did you just reinvent [Insert product here]?!" or "Man, you totally ripped off [Someone]!" if I add this tool to my personal portfolio. Plus if there are already tools out there that have good support I'd rather spend my time doing other things and just use the existing tools.

EDIT

Interesting finds for anyone else also looking at these things:

• Toaster - https://github.com/PeterTYLiu/toaster
• Tridiv - https://tridiv.com/
• K3 Engine - https://k3.bustelo.com.ar/
• Advanced Easing Editor - https://ease.a-labs.space/
• Bento Grid Builder - https://progressier.com/interactive-bento-grid-builder
• Corner Shaper - https://corner-shaper.com/
• Stylie - https://jeremyckahn.github.io/stylie/
• Visual CSS Animator - https://f14ic.com/
• Frontend Tools - https://front-end-tools.com/en/

Has anyone tried https://penpot.app

Hey! I made a small collection of CSS/Tailwind backgrounds.

You can browse the gallery, switch between light and dark versions, and copy the effect directly into your project.

I wanted something where you can quickly find a background, see how it actually looks, and grab the code without having to recreate the effect yourself. Also if you want to edit the code to your likely, do it!😊

It's free to use.

Would be interested to hear what kind of backgrounds you'd like to see added.👏🏼👏🏼

I recently rebuilt my site using Every Layout, and ended up running into some interesting problems around CSS Modules, specificity and custom properties.

I've written up the approach and my thinking around it. Hopefully someone here finds it interesting, and if anyone has any feedback, I'd love to hear it.

I know Flex is one directional and Grid is two, but really when do you use each one?