Γεννήτρια Nτεγκραντέ (CSS Gradients)
Σχεδιάστε, Μοντέρνα & Συναρπαστικά (Linear - Radial - Conic Gradients) — με εργαλεία Slider & Real time Preview! Μετατρέψτε τα απευθείας σε CSS Variables.
Γεννήτρια Εργαστηρίου CSS Gradient (Design Tool)
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Ποιος ο λόγος (να μπλέξετε) με έναν Οπτικό Σχεδιαστή Nτεγκραντέ;
H Γραφή (Syntax) του CSS-Gradient, στον κώδικα (ειδικά με πολλαπλά Stop/Percentages και alpha transparency), ειναι απλά - Ένας πονοκέφαλος! Ένα τυπογραφικό λάθος σε % ποσοστά ή RGBA() καταστρέφει το Layer! O Οπτικός(Visual Generator) μας, δίνει την δύναμη: Προσθέτεις, Τραβάς, Αλλάζεις - Χρώματα - Κατευθείαν πάνω στην Παλίρροια! Εσείς σχεδιάζετε, Εμείς παράγουμε τον Κώδικα.
Τρείς (3) Διαβόητοι Τύποι Σκίασης (Gradient Model Styles)
Πλήρη υποστήριξη : Γραμμικής (Linear Gradient), Ακτινωτής(Κυκλικής/Radial Gradient).. καθώς (και της ΥΠΕΡΝΕΑΣ, Μοντέρνας) Κωνικής(Conic Gradient).
Πλήθος... 'Σταθμών / Color Stops'.. Χωρίς Όρια!
Προσθέστε (Χρωματικές Κουκίδες-Στάσεις / Handle-stops). Τραβήξτε τες (Drag'n Drop) αριστερά-δεξιά. Αλλάξτε Hex/RGB και ανακατέψτε εις βάθος/smoothness τα Colors.
Αυτόματη / (Real-Time) Όραση
Κάθε φορά που σύρετε τον Κέρσορα, ή αλλάζετε γωνία(κλίση 0°- 360° μοιρών), το Render engine μεταφράζεται στη στιγμή.
Δημιουργήστε Το Απόλυτο/Epic Nτεγκραντέ.. (ΜΕΣΑ Σε 3 Βήματα)!..
Επιλογή (Τύπου/Σχήματος) & Γωνίας - Angle
Επιλέξτε: Αν θέλετε τα χρώματα σε 'Ευθεία-Linear' - ή 'Ακτινωτά Κυκλικά (Radial)', Και θέστε την Κλίση (π.χ. 135deg / 45deg).
Χρωματίστε / Colorize! (Σταθμοί / Stops)
Πειράξτε τα.. Σημεία/'Color Stops' Box.. Κλικάρετε για Picker! Σύρτε τα για να δημιουργήσετε Soft ή (Hard-Edges) Γραμμές μεταξύ των Χρωμάτων.
Αντιγραφή - (Deploy To CSS)
Αντιγράψτε με το click, ολόκληρο Το Bundle (CSS code).. Επικολλήστε το αρχείο σας, στο property : `background-image: ... / background: ...` και είστε ONLINE!
Τέχνη.. & Χρήσεις των Nτεγκραντέ (Πώς & Πού;;)
Ηρωικά.. - (Hero Sections / Body Backgrounds)
Ντύστε την αρχική σελίδα.. (ή landing pages) με απαλά - παστέλ διαγώνια Linear Gradients, που προσελκύουν την ΠΡΟΣΟΧΗ (User Retention Focus).
Ντεγκραντέ.. Πάνω Σε 'Fonts/Γράμματα' (Masking Cliping)!
Δώστε στο Κείμενο `background-clip:text` .. Το αποτέλεσμα : Τα γράμματα σας (Η Headers Font) θα Παίρνουν το Χρώμα της Gradient... ΠΑΝΕΜΟΡΦΟ!
Border-Gradients / Σκιώδη Πλαίσια-Περιγράμματα
Έκπληξη! Το gradient μπορεί να αποτελέσει το `border-image:` ενός κουμπιού, κάνοντας το (Call to action / Button) να αστράφτει μοντέρνα και φουτουριστικά.
Gradients.. Ως Σκέπαστρο / Φίλτρο (Overlays Image Filter)
Εφαρμόστε ένα ημι-διάφανο Gradient (Μαύρο Σε Διάφανο/Transparent), ΤΟΠΟΘΕΤΩΝΤΑΣ το .. ΠΑΝΩ ΑΠΟ μια Εικόνα(IMG Background).. Έτσι εξασφαλίζετε οτι το Κείμενο απο πάνω, (Διαβάζεται τέλεια!).
Mastery / Τα 'Μυστικά' (Triks) Για ένα 'PRO' Gradient...!
✓ Τα μυστικά των Μοιρών (135° deg / Corners)
Οι Διαγώνιες (Diagonal) γωνιές '135deg (από Πανω-αριστερά , Στο κατω-δεξιά)', Ή οι (45deg), αποτελούν (Golden ratio Web Design/Κλασικά) μοτίβα... Ομαλότερα/Άνετα για το μάτι.
✓ Το (Πάθος) Για Ήπιες/Low-Contrast Αλλαγές...
Όταν σχεδιάζετε (UI Elements - Κάρτες, Κουμπιά Panels), ΜΗ ΒΑΖΕΤΕ 'Green -> Red -> Blue' (Θα θυμίζει 2005/Τσίρκο!). Αλλάξτε το φως/Hue .. Μόνο κατά 10%-15% (E.g Light-Blue Σε Medium-Blue).. Αφήνοντας αίσθηση ΒΑΘΟΥΣ 3D!
✓ Fallback χρώματα... ΠΑΝΤΑ (Safety 1st)!!
Εάν ο (User / Printer / Παλιός Browser) δεν μπορεσει/αρνηθεί να ζωγραφίσει το Background (Css-Rules Fail), Η σελίδα θα μείνει.. ΛΕΥΚΗ! Δώστε πάντα 1 Κανόνα ασφαλείας : `background-color: #6366f1; background-image: linear-gradi(...);` !! Έτσι.. αν πεθάνει / Αποτύχει το Linear, Θα φορτώσει το Βασικό (solid/Flat) χρώμα !!
✓ CSS Animation-Gradient ? ; Είναι .. Δύσκολο! (Αλλά Εφικτό!)
Το CSS αδυνατεί να Κάνει 'Fade/Transition' Στα Εσωτερικά (Hex/Ονόματα) Gradient Colors! ΑΛΛΑ : Mπορείτε να κάνετε το `background-size: 300% / Huge`, Και με Keyframe (0% => 100%) ... Να κουνάτε Το / Τα (Background-Position) !!.. Παράγοντας εξωφρενικά μαγικά Animated Effects Flow!
❓ Καυτές Ερωτήσεις (FAQ)
Mα, τι είναι... αυτό το -νεότευκτο- «Κωνικό/Conic» Gradient (Ντεγκραντέ) ;
Σε Αντίθεση με τα (Radial) - Που 'Μεγέθυναν - Έκαναν Εξάπλωση 'Σαν Ακτινοβολία',.. Το ΚΩΝΙΚΟ (Conic) Gradient, κάνει έναν πλήρη 'Κύκλο / Σβούρα'! Περιστρέφεται (Rotate/Sweep) ΓΥΡΩ ΑΠΟ το ΚΕΝΤΡΟ. Είναι μοναδικό-κορυφαίο εργαλείο : Οταν θέλετε να κατασκευάσετε (Pie Charts - Γραφήματα Πίτας) με CSS! (π.χ. 30% Κόκκινο, 70% Πράσινο κυκλικά) ... Ή Για.. CSS Color Wheels!!
Πώς Διάολο... να Προσθέσω 'Διαφάνεια - Αορατότητα' (Alpha-Channel) Σε ένα Gradient Σημείο;
Δύο Τρόποι: Είτε βάζετε στην ετικέτα/χρώμα.. Την λέξη (transparent / `transparent` - *προσοχή* στο Safari browser bugs).. ΕΙΤΕ : Γυρνάτε το Picker σε (RGBA / Hsla).. Kαι ρίχνετε το Channel του 'Alpha Channel' στο (0) .. [πχ: `rgba(255, 255, 255, 0)`] ! Ετσι, το gradient "σβήνει/fade-out"... Σαν Όνειρο :) !
Γιατί βλέπω.. 'Γραμμούλες/Σκάλες / Banding' ... Σε κάποια Transitions (Mεγάλες Οθόνες/Monitor);
Το Σύμπτωμα Banding... Συμβαίνει Οταν Το RGB Color Space 'Ξεμένει' απο αριθμούς για να γεμίσει τα P-i-x-e-l-s... Ανάμεσα σε 2 'Συγγενή - Ίδια χρώματα'.. σε τεράστιες οθόνες !! ΛΥΣΗ 1Η; Προσθέστε (Ακόμη ένα Stop point.. ΕΝΔΙΑΜΕΣΑ - λίγο πιο Σκούρο) ! / ΛΥΣΗ 2 : Βάλτε στο CSS 1 Πολύ λεπτό NOISE Overlay Filter !!
Μπορώ να 'Kόψω - Με Γωνία (Harsh Lines)'.. Το ένα Χρώμα με το Άλλο; ΧΩΡΙΣ... να 'σβήνει' / Fade ;;
ΑΠΟΛΥΤΩΣ !! Λέγετε (Hard-Stop Striping) Model! Το Κόλπο: Αν ο σταθμός (Stop 1) : Κόκκινο Σταματάει ΣΤΟ ( 50% ) ... ΤΟΤΕ, Βάλε ΤΟΝ Δευτερο (Σταθμό) .. -ΑΚΡΙΒΩΣ- ΝΑ ΞΕΚΙΝΑΕΙ ΣΤΟ.. ( 50% ) ΕΠΙΣΗΣ. : `linear-gradient(90deg, red 50%, blue 50%)` !! Αποτέλεσμα? Μια -Τέλεια, Αιματηρή, Όρθια ΜΑΧΑΙΡΙΑ!! (Τέλειος διαχωρισμός/Hard Solid Line Division!).