Εάν το έχετε παρατηρήσει, σε αυτό εδώ το blog οι σύνδεσμοι των άρθρων είναι λίγο διαφορετικοί από τους συνηθισμένους. Σε όλα σχεδόν τα wordpress templates ο τρόπος που φαίνονται οι σύνδεσμοι είναι λίγο… βαρετός. Όμως, με τη μαγεία της CSS μπορούμε να κάνουμε μικρές παρεμβάσεις με θεαματικά αποτελέσματα.

See the Pen Testing LInks by Thodoris (@teokarts) on CodePen.

Στο παραπάνω pen από το Codepen, είναι ένα μικρό παράδειγμα για το πως μπορώ να “πειράξω” τους συνδέσμους. Προϋπόθεση είναι να γνωρίζετε τα βασικά της HTML.

Επεξηγήσεις αναλυτικά

Ο παρακάτω κώδικας CSS

a {
  padding:50px;
  background-color:orange;
  transition: all 0.2s ease-in-out;
}

είναι η αρχική κατάσταση του συνδέσμου, δηλαδή του τρόπου που φαίνεται η HTML <a> ετικέτα (tag) μόλις φορτώνεται η σελίδα. Δηλώνουμε ένα padding 50 pixels, το χρώμα του φόντου (background-color) και το… transition (μια ιδιότητα που θα εξηγήσουμε σε επόμενη καταχώρηση).

Για να δούμε αλλαγές όταν μετακινούμε τον δείκτη του ποντικιού πάνω από τον σύνδεσμο (hover) γράφουμε τον παρακάτω κώδικα

a:hover {
  background-color:black;
  color:white;
}

που μας επιτρέπει ν’ αλλάξουμε το χρώμα του φόντου σε μαύρο και το χρώμα των γραμμάτων (color) σε άσπρο.

Οι πειραματισμοί είναι δυνητικά άπειροι!

ΠΡΟΣΟΧΗ: Τα παραπάνω αφορούν απλή HTML και CSS, όχι προσαρμογή σε template του WordPress. Θα το εξηγήσουμε σε επόμενη καταχώρηση.