Συναρτήσεις CSS εξηγούνται

62 of 62 rows


Μεγέθη και μαθηματικά
	Το αποτέλεσμα μιας αριθμητικής παράστασης, με μεικτές μονάδες.	width: calc(100% - 2rem);
	Η μικρότερη από τις δοσμένες τιμές.	width: min(100%, 60ch);
	Η μεγαλύτερη από τις δοσμένες τιμές.	width: max(320px, 40vw);
	Μια τιμή οριοθετημένη ανάμεσα σε ένα ελάχιστο, μια προτιμώμενη και ένα μέγιστο.	font-size: clamp(1rem, 2vw, 1.5rem);
	Διαβάζει μια μεταβλητή περιβάλλοντος που παρέχει ο πράκτορας χρήστη.	padding: env(safe-area-inset-top);
	Μέγεθος οριοθετημένο στο εγγενές πλάτος του περιεχομένου.	width: fit-content(200px);
	Στρογγυλοποιεί μια τιμή στο πλησιέστερο πολλαπλάσιο μιας άλλης.	width: round(up, 133px, 50px);
	Το θετικό υπόλοιπο μιας διαίρεσης, πάντα μη αρνητικό.	margin: mod(100px, 30px);
	Το υπόλοιπο μιας διαίρεσης, διατηρεί το πρόσημο του διαιρετέου.	margin: rem(-100px, 30px);
	Η απόλυτη τιμή.	translateX(abs(-10px));
	-1, 0 ή 1, ανάλογα με το πρόσημο της τιμής.	padding: sign(-5px) * 10px;
Grid
	Ένα εύρος μεγέθους για διαδρόμους grid, ανάμεσα σε ένα ελάχιστο και ένα μέγιστο.	grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
	Επαναλαμβάνει ένα μοτίβο διαδρόμων έναν αριθμό φορών ή μέχρι να γεμίσει.	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
Λογική και συνθήκες
	Επιλέγει μία από δύο τιμές με βάση μια συνθήκη.	font-size: if(media(width > 600px), 1.25rem, 1rem);
	Αληθές όταν ταιριάζει ένα media query, για χρήση μέσα σε if().	padding: if(media(width > 40rem), 2rem, 1rem);
	Αληθές όταν το πρόγραμμα περιήγησης υποστηρίζει μια δήλωση, για χρήση μέσα σε if().	display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333);
	Αληθές όταν ταιριάζει ο επιλογέας, για χρήση μέσα σε if().	font-weight: if(selector(:hover), 700, 400);
Προσαρμοσμένες ιδιότητες
	Η τιμή μιας προσαρμοσμένης ιδιότητας, με προαιρετική εφεδρική τιμή.	color: var(--accent, #333);
Χρώμα
	Ένα χρώμα από τα κανάλια κόκκινο, πράσινο και μπλε (και άλφα).	color: rgb(59 130 246 / 0.8);
	Ένα χρώμα από απόχρωση, κορεσμό και φωτεινότητα.	color: hsl(210 80% 50%);
	Ένα χρώμα στον αντιληπτικό χώρο OKLCH (συνεπής φωτεινότητα).	color: oklch(0.7 0.15 250);
	Ένα μείγμα δύο χρωμάτων σε έναν δεδομένο χρωματικό χώρο.	color: color-mix(in srgb, red 40%, blue);
	Η επιλογή από μια λίστα που έχει την καλύτερη αντίθεση με ένα χρώμα βάσης.	color: color-contrast(#fff vs #000, #777);
	Ένα χρώμα από απόχρωση, λευκάδα και μελανότητα.	color: hwb(210 10% 20%);
	Ένα χρώμα στον χώρο CIELAB (φωτεινότητα, άξονες a και b).	color: lab(52% 40 59);
	Ένα χρώμα στον χώρο CIELAB (φωτεινότητα, χρωματικότητα, απόχρωση).	color: lch(52% 49 24);
	Ένα χρώμα σε οποιονδήποτε προκαθορισμένο χρωματικό χώρο, κατά συντεταγμένες.	color: color(display-p3 1 0.4 0.2);
	Το πρώτο χρώμα σε ανοιχτό θέμα, το δεύτερο σε σκούρο.	color: light-dark(#1a1a1a, #f5f5f5);
Ντεγκραντέ και εικόνες
	Ένα ντεγκραντέ κατά μήκος μιας ευθείας ανάμεσα σε στάσεις χρωμάτων.	background: linear-gradient(90deg, #4b9fff, #2ee6a6);
	Ένα ντεγκραντέ που εκπέμπεται προς τα έξω από ένα σημείο.	background: radial-gradient(circle, #fff, #000);
	Ένα ντεγκραντέ που σαρώνει γύρω από ένα κεντρικό σημείο.	background: conic-gradient(red, yellow, red);
	Φορτώνει έναν εξωτερικό πόρο: εικόνα, γραμματοσειρά ή SVG.	background-image: url(hero.webp);
	Επιλέγει την καλύτερη εικόνα για την ανάλυση της συσκευής.	background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x);
	Αναμειγνύει δύο εικόνες σε ένα δεδομένο ποσοστό.	background-image: cross-fade(30%, url(a.webp), url(b.webp));
Φίλτρα και σχήματα
	Φίλτρα εικονοστοιχείων που χρησιμοποιούνται μέσα στην ιδιότητα filter.	filter: blur(4px) brightness(1.1);
	Μια συμβολοσειρά διαδρομής SVG, για τη σχεδίαση ενός clip ή ενός σχήματος.	clip-path: path('M10 10 H 90 V 90 Z');
	Διαβάζει ένα χαρακτηριστικό HTML· περιορισμένη χρήση εκτός του content.	content: attr(data-label);
	Ρυθμίζει την αντίθεση του στοιχείου.	filter: contrast(1.4);
	Ζωγραφίζει μια σκιά που ακολουθεί το άλφα σχήμα του στοιχείου.	filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
	Μετατρέπει το στοιχείο σε αποχρώσεις του γκρι.	filter: grayscale(100%);
	Αντιστρέφει τα χρώματα του στοιχείου.	filter: invert(1);
	Εφαρμόζει σέπια απόχρωση.	filter: sepia(0.6);
	Περιστρέφει την απόχρωση των χρωμάτων του στοιχείου.	filter: hue-rotate(90deg);
	Ορίζει την αδιαφάνεια του στοιχείου μέσω filter.	filter: opacity(0.5);
	Ένα κυκλικό σχήμα για clip-path ή shape-outside.	clip-path: circle(40% at 50% 50%);
	Ένα ελλειπτικό σχήμα για clip-path ή shape-outside.	clip-path: ellipse(50% 35% at 50% 50%);
	Ένα ορθογώνιο σχήμα με στρογγυλεμένες γωνίες για clip-path.	clip-path: inset(10px 10px 10px 10px round 8px);
	Ένα πολυγωνικό σχήμα από μια λίστα σημείων.	clip-path: polygon(50% 0, 100% 100%, 0 100%);
Μετασχηματισμός
	Μετακινεί το στοιχείο κατά τους άξονες X και Y.	transform: translate(10px, 20px);
	Περιστρέφει το στοιχείο γύρω από το κέντρο του.	transform: rotate(45deg);
	Κλιμακώνει το στοιχείο κατά τους άξονες X και Y.	transform: scale(1.25);
	Πλαγιοκλίνει το στοιχείο κατά τους άξονες X και Y.	transform: skew(10deg, 0deg);
	Ένας 2D μετασχηματισμός από έξι τιμές πίνακα.	transform: matrix(1, 0, 0.5, 1, 10, 0);
	Ορίζει βάθος 3D προοπτικής για τα παιδιά του στοιχείου.	transform: perspective(600px) rotateY(20deg);
Κίνηση και μετρητές
	Μια καμπύλη easing από τέσσερα σημεία ελέγχου.	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	Ένα easing που πηδά σε ίσα βήματα.	animation-timing-function: steps(8, end);
	Η τρέχουσα τιμή ενός μετρητή CSS, ως περιεχόμενο.	content: counter(chapter);
	Οι τιμές ενός μετρητή και όλων των προγόνων του, ενωμένες με μια συμβολοσειρά.	content: counters(item, ".");
	Από 0 έως 1 καθώς μια τιμή προχωρά μεταξύ μιας αρχής και ενός τέλους.	opacity: progress(scroll(), 0, 50vh);
	Ένας τυχαίος αριθμός από ένα εύρος, σταθερός ανά στοιχείο.	rotate: random(from -5deg to 5deg);
	Το ημίτονο μιας γωνίας, για παραστάσεις calc.	translateY(calc(1rem * sin(45deg)));
	Το συνημίτονο μιας γωνίας, για παραστάσεις calc.	translateX(calc(1rem * cos(45deg)));