Κατηγορίες Blog

Διαχωριστής Σχήματος Elementor με διάφανο background χρησιμοποιώντας clip-path css

Κοινοποίηση σε facebook
Κοινοποίηση σε twitter
Κοινοποίηση σε pinterest
Κοινοποίηση σε linkedin
Κοινοποίηση σε reddit
Κοινοποίηση σε vk
Κοινοποίηση σε odnoklassniki
Κοινοποίηση σε tumblr
Κοινοποίηση σε digg
Κοινοποίηση σε skype
Κοινοποίηση σε stumbleupon
Κοινοποίηση σε mix
Κοινοποίηση σε telegram
Κοινοποίηση σε pocket
Κοινοποίηση σε xing
Κοινοποίηση σε whatsapp
Κοινοποίηση σε email

Στην περίπτωση που επιθυμείτε να διαχωρίσετε ένα background στο elementor με διαχωριστή σχήματος (shape divider) προκειμένου να μετατρέψετε την εικόνα σας είτε πάνω είτε κάτω με κυματισμούς ή άλλα σχήματα και ταυτόχρονα θέλετε να εμφανίζεται η πίσω εικόνα background (εκεί που κάνει το κόψιμο δηλαδή), δυστυχώς δεν θα μπορέσετε με τον κλασικό διαχωριστή σχήματος του Elementor. Αυτό γιατί ο διαχωριστής σχήματος στο χώρισμα μπορεί μόνο να εμφανίσει χρώμμα (μέχρι και τις 31/1/2022).

Για να πετύχετε το αποτέλεσμα που ακολουθεί στην εικόνα θα χρειαστεί να χρησιμοποιήσετε τα μαγικά του css και πιο συγκεκριμένα το clip-path.

Οδηγίες Clip-path:

  • Θα πρέπει πρώτα να επισκεφθείτε το clip-path waves generator: https://wave.novoselski.net
  • Ρυθμίστε το offset , το amplitude και το frequency σύμφωνα με τα γούστα σας (το offset αφορά ουσιαστικά το ύψος της εικόνα)
  • To generator από μόνο του φτιάχνει waves για το κάτω μέρος μιας εικόνας.
  • Αν θέλετε το αποτέλεσμα να αντιστραφεί (δηλαδή τα κύματα να γίνουν στο πάνω μέρος της εικόνας), θα πρέπει να παραβιάσετε με το χέρι το τελικό αποτέλεσμα που σας δίνει ο generator καθώς δεν έχει την δυνατότητα για αντιστροφή (δείτε παρακάτω).

Κύματα κάτω από την εικόνα:


.kymatapanw{
clip-path: polygon(100% 0%, 0% 0% , 0% 81.00%, 1% 81.00%, 2% 81.02%, 3% 81.04%, 4% 81.07%, 5% 81.11%, 6% 81.16%, 7% 81.22%, 8% 81.29%, 9% 81.36%, 10% 81.45%, 11% 81.54%, 12% 81.64%, 13% 81.74%, 14% 81.86%, 15% 81.98%, 16% 82.11%, 17% 82.24%, 18% 82.38%, 19% 82.53%, 20% 82.68%, 21% 82.84%, 22% 83.00%, 23% 83.17%, 24% 83.34%, 25% 83.52%, 26% 83.69%, 27% 83.88%, 28% 84.06%, 29% 84.25%, 30% 84.43%, 31% 84.62%, 32% 84.81%, 33% 85.00%, 34% 85.19%, 35% 85.38%, 36% 85.57%, 37% 85.76%, 38% 85.95%, 39% 86.13%, 40% 86.31%, 41% 86.49%, 42% 86.66%, 43% 86.84%, 44% 87.00%, 45% 87.17%, 46% 87.32%, 47% 87.48%, 48% 87.62%, 49% 87.76%, 50% 87.90%, 51% 88.03%, 52% 88.15%, 53% 88.26%, 54% 88.37%, 55% 88.47%, 56% 88.56%, 57% 88.64%, 58% 88.72%, 59% 88.78%, 60% 88.84%, 61% 88.89%, 62% 88.93%, 63% 88.96%, 64% 88.98%, 65% 89.00%, 66% 89.00%, 67% 89.00%, 68% 88.98%, 69% 88.96%, 70% 88.93%, 71% 88.89%, 72% 88.84%, 73% 88.78%, 74% 88.71%, 75% 88.64%, 76% 88.55%, 77% 88.46%, 78% 88.36%, 79% 88.25%, 80% 88.14%, 81% 88.02%, 82% 87.89%, 83% 87.76%, 84% 87.61%, 85% 87.47%, 86% 87.31%, 87% 87.16%, 88% 86.99%, 89% 86.83%, 90% 86.66%, 91% 86.48%, 92% 86.30%, 93% 86.12%, 94% 85.94%, 95% 85.75%, 96% 85.56%, 97% 85.37%, 98% 85.18%, 99% 84.99%, 100% 84.80%);
}

Για να το αντιστρέψετε αλλάξτε το class σε κάτι πιο αναγνωρίσιμο, πηγαίνετε ξανά στο generator και χαμηλώστε κατά πολύ το offset , πάρτε το νέο αποτέλεσμα , σβήστε αυτά τα πρώτα “100% 0%, 0% 0% ,” από πάνω και προσθέστε στο τέλος του polygon πριν το “)” τα ακόλουθα: ,100% 100%, 0% 100%

Δηλαδή ο κώδικας θα γίνει έτσι:


.kymatakatw{
clip-path: polygon(0% 19.5%, 1% 19.49%, 2% 19.48%, 3% 19.45%, 4% 19.42%, 5% 19.37%, 6% 19.32%, 7% 19.25%, 8% 19.18%, 9% 19.09%, 10% 19%, 11% 18.9%, 12% 18.79%, 13% 18.66%, 14% 18.54%, 15% 18.4%, 16% 18.26%, 17% 18.1%, 18% 17.95%, 19% 17.78%, 20% 17.61%, 21% 17.43%, 22% 17.25%, 23% 17.06%, 24% 16.87%, 25% 16.67%, 26% 16.47%, 27% 16.27%, 28% 16.06%, 29% 15.85%, 30% 15.64%, 31% 15.43%, 32% 15.21%, 33% 15%, 34% 14.78%, 35% 14.57%, 36% 14.36%, 37% 14.15%, 38% 13.94%, 39% 13.73%, 40% 13.52%, 41% 13.32%, 42% 13.13%, 43% 12.93%, 44% 12.75%, 45% 12.56%, 46% 12.39%, 47% 12.22%, 48% 12.05%, 49% 11.89%, 50% 11.74%, 51% 11.6%, 52% 11.46%, 53% 11.33%, 54% 11.21%, 55% 11.1%, 56% 11%, 57% 10.9%, 58% 10.82%, 59% 10.75%, 60% 10.68%, 61% 10.63%, 62% 10.58%, 63% 10.55%, 64% 10.52%, 65% 10.5%, 66% 10.5%, 67% 10.51%, 68% 10.52%, 69% 10.55%, 70% 10.58%, 71% 10.63%, 72% 10.68%, 73% 10.75%, 74% 10.82%, 75% 10.91%, 76% 11%, 77% 11.11%, 78% 11.22%, 79% 11.34%, 80% 11.47%, 81% 11.6%, 82% 11.75%, 83% 11.9%, 84% 12.06%, 85% 12.22%, 86% 12.4%, 87% 12.57%, 88% 12.76%, 89% 12.94%, 90% 13.14%, 91% 13.33%, 92% 13.54%, 93% 13.74%, 94% 13.95%, 95% 14.16%, 96% 14.37%, 97% 14.58%, 98% 14.79%, 99% 15.01%, 100% 15.22%,100% 100%, 0% 100%);
}

 

Τέλος αν θέλετε και άλλα σχήματα, μπορείτε να δείτε το ακόλουθο generator: https://bennettfeely.com/clippy/ και επίσης το ακόλουθο άρθρο: https://www.sitepoint.com/introducing-css-clip-path-property/

Καλή συνέχεια.

Δεν υπάρχουν σχόλια on Διαχωριστής Σχήματος Elementor με διάφανο background χρησιμοποιώντας clip-path css

Γράψτε ένα σχόλιο ή ερώτηση