Marketing Περιεχόμενο
Δυνατότητες CSS3 που ενδέχεται να μην γνωρίζετε: Flexbox, Διατάξεις πλέγματος, προσαρμοσμένες ιδιότητες, μεταβάσεις, κινούμενα σχέδια και πολλαπλά υπόβαθρα
Φύλλα στυλ καταρράκτη (CSS) συνεχίζουν να εξελίσσονται και οι πιο πρόσφατες εκδόσεις μπορεί να έχουν ορισμένα χαρακτηριστικά που μπορεί να μην γνωρίζετε καν. Ακολουθούν μερικές από τις σημαντικές βελτιώσεις και μεθοδολογίες που εισήχθησαν με το CSS3, μαζί με παραδείγματα κώδικα:
- Διάταξη ευέλικτου κουτιού (Flexbox): μια λειτουργία διάταξης που σας επιτρέπει να δημιουργείτε ευέλικτες και ανταποκρινόμενες διατάξεις για ιστοσελίδες. Με το flexbox, μπορείτε εύκολα να ευθυγραμμίσετε και να διανείμετε στοιχεία σε ένα κοντέινερ. σε αυτό το παράδειγμα, το
.container
χρήσεις της τάξηςdisplay: flex
για να ενεργοποιήσετε τη λειτουργία διάταξης flexbox. οjustify-content
ιδιοκτησία έχει οριστεί σεcenter
για να κεντράρετε οριζόντια το θυγατρικό στοιχείο μέσα στο δοχείο. οalign-items
ιδιοκτησία έχει οριστεί σεcenter
για να κεντράρετε κατακόρυφα το παιδί στοιχείο. ο.item
Η τάξη ορίζει το χρώμα φόντου και το padding για το στοιχείο θυγατρικό.
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
Αποτέλεσμα
Κεντρικό στοιχείο
- Διάταξη πλέγματος: μια άλλη λειτουργία διάταξης που σας επιτρέπει να δημιουργείτε σύνθετες διατάξεις βασισμένες σε πλέγμα για ιστοσελίδες. Με το πλέγμα, μπορείτε να καθορίσετε σειρές και στήλες και, στη συνέχεια, να τοποθετήσετε στοιχεία σε συγκεκριμένα κελιά του πλέγματος. Σε αυτό το παράδειγμα, το
.grid-container
χρήσεις της τάξηςdisplay: grid
για να ενεργοποιήσετε τη λειτουργία διάταξης πλέγματος. οgrid-template-columns
ιδιοκτησία έχει οριστεί σεrepeat(2, 1fr)
για να δημιουργήσετε δύο στήλες ίσου πλάτους. οgap
Η ιδιότητα ορίζει την απόσταση μεταξύ των κελιών πλέγματος. ο.grid-item
Η τάξη ορίζει το χρώμα φόντου και το padding για τα στοιχεία πλέγματος.
HTML
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
Αποτέλεσμα
Αντικείμενο 1
Αντικείμενο 2
Αντικείμενο 3
Αντικείμενο 4
- Μεταβάσεις: Το CSS3 εισήγαγε μια σειρά από νέες ιδιότητες και τεχνικές για τη δημιουργία μεταβάσεων σε ιστοσελίδες. Για παράδειγμα, το
transition
Η ιδιότητα μπορεί να χρησιμοποιηθεί για την κίνηση αλλαγών στις ιδιότητες CSS με την πάροδο του χρόνου. Σε αυτό το παράδειγμα, το.box
Η class ορίζει το πλάτος, το ύψος και το αρχικό χρώμα φόντου για το στοιχείο. οtransition
ιδιοκτησία έχει οριστεί σεbackground-color 0.5s ease
για κίνηση αλλαγών στην ιδιότητα χρώματος φόντου σε διάστημα μισού δευτερολέπτου με λειτουργία ease-in-out χρονισμού. ο.box:hover
Η κλάση αλλάζει το χρώμα φόντου του στοιχείου όταν ο δείκτης του ποντικιού βρίσκεται πάνω του, ενεργοποιώντας την κίνηση μετάβασης.
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
Αποτέλεσμα
Φτερουγίζω
Εδώ!
Εδώ!
- κινούμενα σχέδια: Το CSS3 εισήγαγε μια σειρά από νέες ιδιότητες και τεχνικές για τη δημιουργία κινούμενων εικόνων σε ιστοσελίδες. Σε αυτό το παράδειγμα, προσθέσαμε μια κινούμενη εικόνα χρησιμοποιώντας το
animation
ιδιοκτησία. Έχουμε ορίσει α@keyframes
κανόνας για την κινούμενη εικόνα, ο οποίος καθορίζει ότι το πλαίσιο πρέπει να περιστρέφεται από 0 μοίρες σε 90 μοίρες σε διάρκεια 0.5 δευτερολέπτων. Όταν το κουτί αιωρείται από πάνω, τοspin
Η κίνηση εφαρμόζεται για την περιστροφή του πλαισίου. οanimation-fill-mode
ιδιοκτησία έχει οριστεί σεforwards
για να διασφαλίσετε ότι η τελική κατάσταση της κινούμενης εικόνας διατηρείται μετά την ολοκλήρωσή της.
HTML
<div class="rotate"></div>
CSS
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
Αποτέλεσμα
Φτερουγίζω
Εδώ!
Εδώ!
- Προσαρμοσμένες ιδιότητες CSS: Γνωστός και ως Μεταβλητές CSS, οι προσαρμοσμένες ιδιότητες εισήχθησαν στο CSS3. Σας επιτρέπουν να ορίζετε και να χρησιμοποιείτε τις δικές σας προσαρμοσμένες ιδιότητες στο CSS, οι οποίες μπορούν να χρησιμοποιηθούν για την αποθήκευση και την επαναχρησιμοποίηση τιμών σε όλα τα φύλλα στυλ σας. Οι μεταβλητές CSS προσδιορίζονται με ένα όνομα που ξεκινά με δύο παύλες, όπως π.χ
--my-variable
. Σε αυτό το παράδειγμα, ορίζουμε μια μεταβλητή CSS που ονομάζεται –primary-color και της δίνουμε μια τιμή#007bff
, το οποίο είναι ένα μπλε χρώμα που χρησιμοποιείται συνήθως ως βασικό χρώμα σε πολλά σχέδια. Χρησιμοποιήσαμε αυτήν τη μεταβλητή για να ορίσουμε τοbackground-color
ιδιότητα ενός στοιχείου κουμπιού, χρησιμοποιώντας τοvar()
συνάρτηση και μεταβίβαση στο όνομα της μεταβλητής. Αυτό θα χρησιμοποιήσει την τιμή της μεταβλητής ως χρώμα φόντου για το κουμπί.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Πολλαπλά υπόβαθρα: Το CSS3 σάς επιτρέπει να καθορίσετε πολλές εικόνες φόντου για ένα στοιχείο, με τη δυνατότητα να ελέγχετε τη θέση και τη σειρά στοίβαξής του. Το φόντο αποτελείται από δύο εικόνες,
red.png
καιblue.png
, τα οποία φορτώνονται χρησιμοποιώντας τοbackground-image
ιδιοκτησία. Η πρώτη εικόνα,red.png
, βρίσκεται στην κάτω δεξιά γωνία του στοιχείου, ενώ η δεύτερη εικόνα,blue.png
, βρίσκεται στην επάνω αριστερή γωνία του στοιχείου. οbackground-position
Η ιδιότητα χρησιμοποιείται για τον έλεγχο της θέσης κάθε εικόνας. οbackground-repeat
Η ιδιότητα χρησιμοποιείται για τον έλεγχο του τρόπου επανάληψης των εικόνων. Η πρώτη εικόνα,red.png
, έχει ρυθμιστεί να μην επαναλαμβάνεται (no-repeat
), ενώ η δεύτερη εικόνα,blue.png
, έχει ρυθμιστεί για επανάληψη (repeat
).
HTML
<div id="multibackground"></div>
CSS
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}