CSS clamp() kalkulator

Unesite veličinu za male i velike zaslone i dobit ćete fluidnu clamp() vrijednost koja se glatko skalira između njih — za veličine fonta, padding, margine ili razmake.

Veličine
Minimum
Maksimum
Vrijednost clamp()
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Rezultat zadržava rem dio u srednjem članu, tako da se tekst i dalje povećava kada netko zumira na 200% — vrijednost koja koristi samo viewport to ne bi omogućila.

Pregled

Fluidan tekst, savršene veličine.

Prilagodite veličine i širine zaslona kako biste oblikovali vrijednost.

Izračun se u potpunosti izvodi u Vašem pregledniku. Ništa što ovdje unesete ne šalje se na BroBroGo.

Česta pitanja

Kako kalkulator gradi vrijednost clamp()?

Zadajete mu dvije točke: veličinu na maloj širini zaslona i veličinu na velikoj širini. Alat povlači ravnu liniju između njih kako bi se veličina glatko povećavala s proširenjem zaslona, a zatim je omotava u funkciju clamp() tako da nikada ne pada ispod veličine za mali zaslon niti raste iznad veličine za veliki zaslon. Između te dvije širine veličina se fluidno prilagođava; izvan njih se drži na najbližoj granici.

Zašto je rezultat u rem i vw jedinicama umjesto u pikselima?

Granice su u rem jedinicama, a promjenjivi srednji dio zadržava rem komponentu, tako da tekst i dalje raste kada čitatelj zumira ili poveća zadanu veličinu fonta u pregledniku — vrijednost izražena samo u pikselima ili viewport jedinicama može to onemogućiti. Veličine unosite u pikselima jer većina ljudi tako razmišlja o njima, a alat ih pretvara u rem koristeći Vašu osnovnu (root) veličinu fonta.

Mogu li ovo koristiti za razmake, a ne samo za veličinu fonta?

Da. Istu vrijednost možete koristiti za padding, margin, gap, širinu ili visinu — bilo gdje gdje ide duljina. Prebacite pregled na "Okvir" kako biste gledali kako se razmak povećava umjesto teksta. Ako su Vaša mala i velika veličina iste, rezultat se pretvara u običnu fiksnu duljinu jer nema potrebe za skaliranjem.

Podržavaju li svi preglednici clamp()?

Da — svi moderni preglednici podržavaju clamp() od 2020. godine, tako da vrijednost možete koristiti bez alternativnih rješenja (fallback). Pri vrlo velikom maksimumu ili brzoj stopi promjene, preporučuje se brza provjera pri zumiranju od 200% kako biste bili sigurni da se tekst i dalje povećava za korisnike kojima je to potrebno.

CSS Cubic Bezier GeneratorPovucite dvije ručice kako biste oblikovali krivulju ubrzanja, pratite kretanje točke u usporedbi sa stabilnom brzinom i kopirajte cubic-bezier() vrijednost.Generator sjena (Box Shadow)Povucite klizače za oblikovanje sjene elementa, složite slojeve za dubinu i odmah kopirajte gotov CSS.Generator gradijenataIzgradite linearni, radijalni ili konusni gradijent, dodajte točke boja i postavite smjer, a zatim kopirajte CSS jednim klikom.Generator zaobljavanja kutova (Border Radius)Zaoblite svaki kut pomoću klizača, oblikujte organske mrlje pomoću eliptičnog načina rada i odmah kopirajte CSS.Flexbox generatorPostavite flex kontejner i njegove stavke pomoću vizualnih kontrola, pratite promjene uživo i kopirajte CSS jednim klikom.CSS Grid GeneratorPostavite stupce i retke, povucite preko ćelija za postavljanje stavki i kopirajte grid CSS s odgovarajućim HTML-om jednim klikom.CSS uljepšivač i minifikatorPonovno uvucite neuredan CSS radi lakšeg čitanja ili ga minificirajte za objavu — uz siguran način koji nikada ne mijenja redoslijed pravila.Pretvarač px u rem i emPretvorite vrijednosti između px, rem i em koristeći vlastite osnovne i kontekstualne veličine fonta — uredite bilo koje polje i ostala dva se ažuriraju dok tipkate.