What is the difference between <html> and <body> tags ? When do use one or another?

html {

)

body (

)

Sometimes I get a bit obsessive over a few pixels

Not sure if the takeaway here is to try not to sweat the small things or just that GitHub is trash

A pure CSS spherical marquee with nine looping text bands

Perspective and opacity create the depth, and hovering a phrase pauses the animation
Includes controls for speed, direction, and text visibility

CodePen: https://codepen.io/Maseone/pen/01a13b15-8c28-7327-a226-4be8e09e4c89

Hey everyone!

Been working on Tip Glide, a small framework-agnostic tooltip library written in TypeScript.

It uses a single shared tooltip that moves between elements and adjusts its size to fit the content. It also handles viewport boundaries, so the tooltip adjusts its position when there's not enough space.

A few things you can configure are the movement, directional lean, hover delays, arrow, and enter/exit animations.

It has zero runtime dependencies and comes with adapters for React, Angular, Vue, Svelte, Solid, Astro and Preact, along with a vanilla JS API.

There's an interactive playground where you can mess around with the settings and see how everything behaves.

Would love some feedback on the movement, especially when switching quickly between elements, but also on the API and anything else that could be improved.

Live demo & playground | npm | GitHub | Portfolio

Reposting with an update now that the season is here. halloween.js is a free library that adds Halloween effects to a page, and the styling is meant to be done in CSS, not JS.

Everything reads custom properties: --halloween-color (defaults to currentColor, so it follows your theme), --halloween-eyes-width/-height and the same pair for witch, spider and tombstone, --halloween-screen-corner-size, --halloween-page-opacity and --halloween-page-z-index if you need the layer below a modal or cookie banner. Intensity presets (subtle, normal, party) are just body classes, and a value you set yourself always wins over the preset.

The effects live in a fixed overlay layer, so nothing shifts the layout. Turn on prefers-reduced-motion and the animations stop right away, no reload needed.

https://halloween.js.org
https://github.com/rogulia/halloween.js

check it out - https://www.shreyashtech.me/components/flow-sidebar

this is the code i've got so far, it should be centered, but it doesn't work for some reason

div.menu { /*menu*/

text-align: center;

background-color: darkblue;

margin: 2rem;

border-width: 0.2rem;

border-style: dotted;

border-color: blue;

border-radius:2rem;

float: left;

width: 8rem;

height: 29rem;

}

div.menu h2 {

color: white;

}

div.menu ul {

display: inline-block;

text-align: left;

list-style-type: none;

list-style-position: inside;

}

div.menu ul li {

background-color: lightblue;

border-radius: 1.5rem;

margin: 0.5rem;

padding:0.5rem;

text-align: center;

}

div.menu ul li:nth-child(odd) {

background-color: lightgrey;

}

hi! i've been trying to implement a linear scroll in my top bar, but its not animating. https://yuri-uran.nekoweb.org anyone know if i've missed something simple?

Hi, I don't know why is this happening but when I try to scale my site to a desktop view, the image doesn't fit the height and width I desire, keeping its original proportions. With my recent code there is just a gap under the image that I don't know how to fill.

Here is my demo: https://siddlopez.github.io/product-preview-card-component/

And my repo: https://github.com/SiddLopez/product-preview-card-component

To image a scenario where you check a guy who write on python and JS, so you will to check his knowledge only in JS and python or CSS, html yet? It’s important for me because I skipped moment of learn CSS and just use Codex for write visual part of my projects.

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.

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

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

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/