philos Δημοσ. 29 Ιουλίου 2017 Δημοσ. 29 Ιουλίου 2017 Έχω βρει το εξής στο codepen: https://codepen.io/JoostKiens/pen/sIwmb... το οποίο με εξυπηρετεί (ειδικά από το γεγονός ότι έχει top left τοποθέτηση και δεν είναι flash ή gif).Όλα ωραία, εκτός από το γεγονός ότι δεν έχω καταφέρει να βάλω εικόνα μέσα στο "τρίγωνο", που να φαίνεται ένα μέρος της όταν είναι σε κανονική κατάσταση και όταν κάνεις hover να φαίνεται η υπόλοιπη.Προφανώς θα χρειαστεί να φτιάξω μια εικόνα 240x240px (που είναι το μέγεθος σε hover κατάσταση), όμως δεν ξέρω πως να την εφαρμόσω χωρίς να χαλάει το υπόλοιπο λευκό "χαρτί" και οι σκιές.Καμιά ιδέα;
tzotzosgr Δημοσ. 29 Ιουλίου 2017 Δημοσ. 29 Ιουλίου 2017 Καλησπέρα, HTML <div class="curl"> <img src="http://tigresse004.t.i.pic.centerblog.net/t7hiim1o.jpg"> </div> CSS .curl { width: 120px; height: 120px; position: absolute; left: 0; top: 0; z-index: 1000; overflow: hidden; background: white; box-shadow: 0 0 10px grey; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .curl:hover { width: 150px; height: 150px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; box-shadow: 10px 10px 50px grey; } .curl:after { position: absolute; display: block; content: ''; width: 100%; height: 100%; left: 0; top: 0; transform: rotate(45deg) translateX(70%) scale(1.4); background: #afafaf; background: -moz-linear-gradient(left, #afafaf 0%, #ffffff 29%); background: -webkit-linear-gradient(left, #afafaf 0%,#ffffff 29%); background: linear-gradient(to right, #afafaf 0%,#ffffff 29%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afafaf', endColorstr='#ffffff',GradientType=1 ); } 2
dominotrix Δημοσ. 29 Ιουλίου 2017 Δημοσ. 29 Ιουλίου 2017 Ειναι λιγο αναπηρο οπως το εφτιαξε. Το ασπρο που εμφανιζεται εκει ειναι στην ουσια ενα gradient. background : linear-gradient( 135deg, #fff, #f3f3f3 45%, #ddd 50%, #aaa 50%, #bbb 56%, #ccc 62%, #f3f3f3 80%, #fff 100% ); Οποτε δε νομιζω να μπορεις να βαλεις εικονα. Λιγο ακυρο.. Αα.. το εκανε ο τζοτζοσ απο πανω.. δε σκεφτηκα να βαλω εικονα στην html μονο με background-image το ειδα ((
philos Δημοσ. 29 Ιουλίου 2017 Μέλος Δημοσ. 29 Ιουλίου 2017 Τέλεια, ευχαριστώ πολύ!! Κι εγώ βάσει background-image το πήγαινα και δεν έβγαινε!
tzotzosgr Δημοσ. 29 Ιουλίου 2017 Δημοσ. 29 Ιουλίου 2017 και σε background-image βγαίνει! HTML <div class="curl"></div> CSS .curl { width: 120px; height: 120px; position: absolute; left: 0; top: 0; z-index: 1000; overflow: hidden; background-image: url("http://tigresse004.t.i.pic.centerblog.net/t7hiim1o.jpg"); background-color: white; box-shadow: 0 0 10px grey; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .curl:hover { width: 150px; height: 150px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; box-shadow: 10px 10px 50px grey; } .curl:after { position: absolute; display: block; content: ''; width: 100%; height: 100%; left: 0; top: 0; transform: rotate(45deg) translateX(70%) scale(1.4); background: #afafaf; background: -moz-linear-gradient(left, #afafaf 0%, #ffffff 29%); background: -webkit-linear-gradient(left, #afafaf 0%,#ffffff 29%); background: linear-gradient(to right, #afafaf 0%,#ffffff 29%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afafaf', endColorstr='#ffffff',GradientType=1 ); } 2
Προτεινόμενες αναρτήσεις
Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε
Πρέπει να είστε μέλος για να αφήσετε σχόλιο
Δημιουργία λογαριασμού
Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!
Δημιουργία νέου λογαριασμούΣύνδεση
Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.
Συνδεθείτε τώρα