Make a wish

hey! actually, you can pretty much use all our designs on neocities. most of our stuff comes in multiple variants like php and html. I personally have never used carrd, but I assume they just use simple html templates? or do you mean a specific carrd aesthetic, basically the profile layouts? ☺️

click the link! <3

ooooh! background animations are possible in theory, but I left them out on purpose. 🥹

short answer: the more animation options you add, the less beginner-friendly it gets, and my goal was that anyone can make animated buttons without knowing anything about animation.

once you start stacking more complex animations, users suddenly have to actively think about what they're combining and whether the loop still works, and at that point it becomes just as complicated as real animation software. 🤕

the simple animations (float, wave, typewriter etc.) all work in predictable "ticks", which makes it easier to calculate a seamless loop even when multiple are running at different speeds. the sheen is already where it gets trickier, since it moves based on travel distance and canvas size, not fixed pixel steps.

so: i'm keeping it in mind, but don't get your hopes up for now! <3

aw thank you! glad someone has some use for it. I always hated animating buttons, and designing on a small space in general 😭

anyway, possibly! for now, i'll take a break though! <3 any specific ones you're missing?

erstmal danke fürs kompliment! <3 ich hab den wunsch als erledigt markiert, aber vielleicht schreibe ich trotzdem mal ein ausführlicheres tutorial dazu! eigentlich ist es ganz simpel 🫶🏻

ich erklärs mal hier, damit du nicht so lange warten musst (wir arbeiten momentan am neuen design für designfreaks):

der sinn von den custom properties ist, dass man die werte wiederverwenden kann und zentral an einer stelle hat. im prinzip kann man "fast alles" als property oben definieren und dann mit var() im rest seiner css datei benutzen. "ob es nötig ist", kommt also immer darauf an, wie viele farben man hat und wie oft sich diese wiederholen. aber du kannst darauf auch komplett verzichten und die farben "normal" reinschreiben.

anstatt also bei allen elementen padding: 15px zu schreiben, kannst du oben ein einziges mal --padding: 15px festlegen und dann bei allen anderen elementen, z.b. deinem content, padding: var(--padding); schreiben.

wenn du irgendwann mal den wert ändern möchtest, musst du ihn nur ein einziges mal oben im :root {} bereich ändern, anstatt überall in der ganzen css datei.

alle properties schreibst du also in den :root bereich - das bedeutet, diese werte sind für alle anderen elemente global zugänglich.

das einzige, was du beachten musst, ist, dass du keine sonderzeichen im namen benutzt, also z.b. nicht "--überschrift". leerzeichen und ähnliches sind ebenfalls nicht erlaubt. also am besten die namen immer schön simpel halten. 😅

und zu deiner frage "wann und wo": eigentlich immer dann, wenn sich werte oder farben wiederholen. das hängt vom design ab, aber meistens hat man ja eine grundpalette, also z.b. dass alle boxen hellgrau sind oder dass man eine akzentfarbe hat. damit musst du nicht immer wieder den gleichen hexcode an 20 verschiedenen stellen einfügen, sondern definierst ihn einmal oben als property.

das ganze klappt wie gesagt mit fast allem, was sonst auch bei css erlaubt ist - bildern, verläufen und so weiter. 🥰

:root {
--padding: 15px;
--accent-color: #85BCFF;

--bg-light: #EEEEEE;
--bg-dark: #222222;

--header-image: url('header.png');
}

/* und dann einfach im rest vom css verwenden */
#container {
background: var(--bg-dark);
padding: var(--padding);
}

#header {
background: var(--header-image);
}


besonders hilfreich wird das, wenn man auf seiner webseite einen "light/dark mode toggle" hat, denn dann brauchst du nicht durch hunderte farbcodes gehen, sondern änderst sie nur oben einmalig. ☺️ ein tutorial dazu hab ich hier geschrieben, falls es dir hilft.

falls du noch fragen hast, kannst du dich gerne nochmal melden oder mich einfach bei discord anschreiben! 🫶🏻