Η δημιουργία μιας εντυπωσιακής landing page ή ενός ιστότοπου γίνεται όλο και δυσκολότερη, καθώς ο ανταγωνισμός αυξάνεται. Το να δίνετε στους χρήστες μια αίσθηση «wow» μόλις φτάσουν είναι πολύ σημαντικό, αν θέλετε να μείνουν και να μάθουν περισσότερα για εσάς, τις υπηρεσίες και τα προϊόντα σας. Ένας τρόπος να το πετύχετε είναι με επικαλύψεις χρώματος πάνω από λευκά φόντα ή εικόνες. Παρακάτω δίνουμε κώδικα CSS που έχει δοκιμαστεί και χρησιμοποιηθεί σε πολλούς ιστότοπους WordPress.
Επικάλυψη μονού χρώματος.
1. Βρείτε το στοιχείο CSS που περιέχει την εικόνα φόντου
2. Προσθέστε τον παρακάτω κώδικα CSS για αυτή την κλάση
.mybackgroundclass:before {
display: block !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
background-color: rgba(0, 0, 0, 0.45) !important;
z-index: 1 !important;
content: ' ' !important; }
Ίσως χρειαστεί να δοκιμάσετε διαφορετικές τιμές στην ιδιότητα z-index για να πετύχετε το σωστό αποτέλεσμα.
Αυτό θα σας δώσει το εξής αποτέλεσμα (μια μαύρη επικάλυψη πάνω στην εικόνα, που τονίζει περισσότερο τους τίτλους):
Επικάλυψη με διαβάθμιση.
Το μόνο που χρειάζεται να αλλάξετε για διαβάθμιση αντί για μονό χρώμα είναι αυτή η γραμμή:
background-color: rgba(0, 0, 0, 0.45) !important;
Αλλάξτε την σε:background: -webkit-linear-gradient(left, rgba(147, 87, 204, 0.54) 0%,rgba(41, 137, 216, 0.51) 50%,rgba(44, 201, 157, 0.58) 100%);
Μπορείτε να πειραματιστείτε με διαφορετικά χρώματα, σημεία και τιμές διαφάνειας για το αποτέλεσμα που θέλετε.
Ελπίζουμε να βοηθήσαμε. Αν χρειάζεστε επιπλέον βοήθεια, πείτε μας!
Ευχαριστούμε
Η ομάδα της Sociolus
