Πώς να δημιουργήσετε: CSS κορδέλα

Πώς να δημιουργήσετε μια κορδέλα

Βήμα 1 - Προσθήκη HTML:

Σε αυτό το παράδειγμα, η κορδέλα ανήκει στο στοιχείο κουμπιού:

<button class="κουμπί">Ένα κουμπί για κάτι ενδιαφέρον <span class="κορδέλα">ΝΕΟ</span></button>

Βήμα 2 - Προσθήκη CSS:

.κουμπί {
  περίγραμμα: δεν υπάρχει;
  κυκλική ακτίνα: 5px;
  χώρος καλυψης: 12px 20px;
  μέγεθος γραμματοσειράς: 16px;
  συνδρομητής: αθόρυβος;
  χρώμα παρασκηνίου: #282A35;
  χρώμα: λευκό;
  τοποθεσία: σχετική;
}
.κορδέλα {
  πλάτος: 60px;
  μέγεθος γραμματοσειράς: 14px;
  χώρος καλυψης: 4px;
  τοποθεσία: αβέβαιη;
  δεξιά: -25px;
  υψος: -12px;
  κεντρισμός κειμένου: κέντρο;
  κυκλική ακτίνα: 25px;
  μετατροπή: γυρισμός(20βαθμούς);
  χρώμα παρασκηνίου: #ff9800;
  χρώμα: λευκό;
}

Δοκιμάστε το προσωπικά

Επεξήγηση παραδείγματος:

Σε αυτό το παράδειγμα, το CSS χρησιμοποιείται για να προσθέσει μια εφέ κορδέλας σε ένα κουμπί. Η κορδέλα υλοποιείται προσθέτοντας έναν span στοιχείο με συγκεκριμένο στυλ στο εσωτερικό του στοιχείου κουμπιού. Το span στοιχείο τοποθετείται στην κορυφή του δεξιού γωνία του κουμπιού και γυρίζεται 20 βαθμούς για να δημιουργήσει το εφέ της κορδέλας. Το χρώμα του παρασκηνίου και του κειμένου της κορδέλας έχει ρυθμιστεί διαφορετικά από το χρώμα του κουμπιού για να αυξήσει την οπτική αίσθηση.