Hjälp en noob med HTML/CSS

Jag har tänkt att jag ska lära mig lite om webbutveckling (HTML/CSS/Javascript till att börja med). Tänkte därför knåpa ihop en hemsida att ha som ett litet pågående projekt.

Nu har jag kört fast lite på att jag inte får saker att göra som jag vill. För att illustrera det hela slängde jag ihop ett exempel i Photoshop.

Tanken är inte exakt den designen (jag kan eventuellt ha känt mig extra kreativ när jag satt med Photoshop ; ). Det är mest för att visa ett par element som stökar till det för mig.

Bakgrunden - alltså själva rektangeln med rundade hörn - hur ska man åstadkomma något sånt på bästa sätt?

Jag tror det skulle funka att göra direkt i CSS. Problemet är bara att det inte finns någon anti-aliasing så det ser rätt trist ut.

Testade att göra det med en svg-fil, men skalningen verkar helt sakna logik. Typ, säg åt den att centrera och jag får halva bilden i toppen av skärmen. Skala upp den och den hamnar nästan i mitten. Öka bredden och det händer inget, om jag inte sen ökar höjden varpå bilden blir gigantisk. Flytta på loggan för att försöka matcha och skalningen blir fel igen.

Provade men en vanlig png-fil och det funkar bättre, men jag får det inte att funka med att ändra storlek på webbläsarfönstret (dessutom ser det inte lika bra ut som vektorgrafik).

Nästa steg är att få alla element att hålla sig på sidan. Jag har inte hittat hur man gör än men det borde väl gå att få dem att hålla sig relativt till själva bakgrundsbilden.

Hursomhelst, vad är bästa sätt göra det här på?

Tack! Jag är med så långt att jag kan sätta border-radius och box-shadow. Ett par problem bara:

Går det att bli av med aliasing?

Hur får jag bakgrunden som en sida? Alltså, den "egentliga" bakgrunden vill jag ju ha vit, och sen en (eller flera) sidor som står ut som just... ja, sidor eller fösnter.

Här är ett exempel:

Jag har fått det att funka i varje fall. Är det här en vettig struktur?
https://pastebin.com/6HjVB5d4
https://pastebin.com/qxJR0GG5

Jag tänkte först få bättre grepp om grunderna innan jag börjar använda mig av olika bibliotek. Sparar dock tipset för att kika på det vid senare tillfälle.

.forum-post-header {
  border-radius: 6px 6px 0 0;
}

Finns väl ingen kantutjämning alls i CSS? Koden i sig specificerar ju bara rundningen på alla fyra hörn. Tycker inte den ser riktigt bra ut faktiskt. Alltså, det går ju att leva med om man inte tänker på det men rundningen är absolut inte perfekt. Såhär ser det ut inzoomat på de svarta rutorna till höger:

Går att leva med men jag hade absolut önskat renare linjer. Det är en såndär detalj som kan störa mig ibland.

Sparar länken och kikar på den när jag lärt mig lite mer.

Jämför med det här exemplet som ger en klart snyggare rundning/linje. Det är ett litet urklipp från Inkscape som sen förstorats för att ungefär motsvara tidigare bild från SweC. Att rendera bilden direkt på skärmen ser klart bättre ut.

Kollar du noga på de rundade hörnen här på SweC bör du kunna se att kanterna inte är helt jämna och rundningen är inte heller helt perfekt. Tänker man sig rundningen som beskrivande av en yta skulle normalerna vara ojämnt fördelade. Det gör att "hörnen" kan se en aning för stora ut.

Den större bilden är mer inzoomad. Sen får man ju klart bättre kontroll på radien om man kan rita upp bilden i något vektorprogram (jämför typ bevel-funktionen i något 3D-program mot klass A ytor i CAD).

Men vi kan släppa det. Tanken var inte att leda in tråden på det här spåret.

Jag är med på att det är "best practice" att göra det direkt i CSS istället för att använda en bild. Men, hur kommer det sig? Det borde ju inte vara så mycket konstigare att använda en .svg istället, kan jag tycka, och skala den på samma vis som CSS-elementet. Det har ju dock inte alls funkat bra när jag försökt - förstår bara inte varför.

För övrigt tycker jag inte om mobiler just nu. Här sitter man och tycker att en bra design börjar ta form, för att sen testa på mobilen... det är bara att börja om.

Är inte det en rätt utdaterad metod? Idag verkar det ju talas mest om responsiv design, istället för att i princip göra två olika versioner av en sida.

När jag lekt runt har jag hittat vw/vmax/vmin som funkar bra för att skala saker efter fönstrets storlek. Sen kan man ju också använda @media screen för enkla regler.

Fast att det inte passar Allings favoritdevis är ju faktiskt inte ett särskilt bra svar på frågan.
En .svg går att få snyggare, mer kontroll över designen och det går att skippa extra element. Vill jag exempelvis ha någon form av dekoration i rutan kan jag rita in det i bilden, istället för att klistra på den; positionera, klippa och funka responsivt.

Det här är så nära matchning jag orkar göra. Enda som skiljer är radien men det har inte direkt någon betydelse. Jag vet vilken av dem jag föredrar...
https://ibb.co/ZL5SBtJ

Jag är främst intresserad av vad jag ser och bryr mig om. Det är trots allt för min egen skull jag gör det här.

Ett viktigare problem... varför funkar inte det här?
https://pastebin.com/U91dpTSh
https://pastebin.com/K9v5uHrk

Output från konsolen är: "GET http://127.0.0.1:5500/templates/$%7Bfile%7D 404 (Not Found)"

Katalogstrukturen är korrekt. Jag har en "templates"-mapp i root-katalogen med template1[osv].html. Jag kan inte heller hitta något fel i koden.

Kör VSCode med Live Server om det nu har betydelse.

Skuggningen skapar mer kontrast och bör därför göra att det ser sämre ut.

Ah, tack - det skulle vara backticks för `templates/${file}`!

Ibland undrar jag om det är sadister som har hittat på syntaxen i typ alla programmeringsspråk? De måste ju ha medvetet gjort det så svårt som möjligt att läsa och skriva.