[HTML/CSS] Δύσκολία εφαρμογής image background σε Page Curl Effect

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: Super-Moderators, WebDev Moderators

Απάντηση
Άβαταρ μέλους
philos
Δημοσιεύσεις: 260
Εγγραφή: 30 Αύγ 2007 23:32

[HTML/CSS] Δύσκολία εφαρμογής image background σε Page Curl Effect

Δημοσίευση από philos » 29 Ιούλ 2017 01:58

Έχω βρει το εξής στο codepen: https://codepen.io/JoostKiens/pen/sIwmb
... το οποίο με εξυπηρετεί (ειδικά από το γεγονός ότι έχει top left τοποθέτηση).

Όλα ωραία, εκτός από το γεγονός ότι δεν έχω καταφέρει να βάλω εικόνα μέσα στο "τρίγωνο", που να φαίνεται ένα μέρος της όταν είναι σε κανονική κατάσταση και όταν κάνεις hover να φαίνεται η υπόλοιπη.
Προφανώς θα χρειαστεί να φτιάξω μια εικόνα 240x240px (που είναι το μέγεθος σε hover κατάσταση), όμως δεν ξέρω πως να την εφαρμόσω χωρίς να χαλάει το υπόλοιπο λευκό "χαρτί" και οι σκιές.

Καμιά ιδέα; :D

sibas
Honorary Member
Δημοσιεύσεις: 1850
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Re: [HTML/CSS] Δύσκολία εφαρμογής image background σε Page Curl Effect

Δημοσίευση από sibas » 01 Αύγ 2017 10:23

καλό css εφέ, θα προσπαθούσα να το κάνω κάπως έτσι

Κώδικας: Επιλογή όλων

<div class="holder">δηλαδη position relative
<div class="image>η εικόνα με τις σωστες αναλογίες, position absolute z-index 1
<div class="curl"></div>αλλαγή του linear-gradient από #fff σε transparent και z-index 2
</div>
</div>
καλή επιτυχία :D

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης