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;
    }

    Αποτέλεσμα

    Douglas Karr

    Douglas Karr είναι ΚΟΑ του OpenINSIGHTS και ο ιδρυτής του Martech Zone. Ο Ντάγκλας έχει βοηθήσει δεκάδες επιτυχημένες νεοφυείς επιχειρήσεις της MarTech, έχει βοηθήσει στη δέουσα επιμέλεια άνω των 5 δισεκατομμυρίων δολαρίων σε εξαγορές και επενδύσεις της Martech και συνεχίζει να βοηθά τις εταιρείες στην εφαρμογή και την αυτοματοποίηση των στρατηγικών πωλήσεων και μάρκετινγκ. Ο Ντάγκλας είναι ένας διεθνώς αναγνωρισμένος ειδικός και ομιλητής στον ψηφιακό μετασχηματισμό και στη MarTech. Ο Ντάγκλας είναι επίσης δημοσιευμένος συγγραφέας ενός οδηγού Dummie και ενός βιβλίου επιχειρηματικής ηγεσίας.

    Σχετικά άρθρα

    Επιστροφή στην κορυφή κουμπί
    Κλεισιμο

    Εντοπίστηκε μπλοκ διαφημίσεων

    Martech Zone είναι σε θέση να σας παρέχει αυτό το περιεχόμενο χωρίς κόστος, επειδή δημιουργούμε έσοδα από τον ιστότοπό μας μέσω εσόδων από διαφημίσεις, συνδέσμων συνεργατών και χορηγιών. Θα εκτιμούσαμε εάν καταργούσατε το πρόγραμμα αποκλεισμού διαφημίσεων καθώς προβάλλετε τον ιστότοπό μας.