Ονομα της τεχνικης στην δημιουργια γωνιας εικονας σε αυτο το Site?

[Ruhl]

Καλησπερα παιδια

 

Μηπως γνωριζει καποιος πως ονομαζετε η πως περιπου το εκανε αυτος σε αυτο το template

την γωνια στην εικονα το οποιο αναπαραγει κατι παρομοιο και σε αλλα 2 σημεια ποιο κατω στην σελιδα? 
http://wpsparrow.com/wordpress/elbrus/

 

Θελω να αναπαραγω κατι παρομοιο με html css και bootstrap αλλα δεν ξερω ουτε πως να το αναζητησω.



 

[Neg]

http://jsfiddle.net/r3p9ph5k/

[dominotrix]

http://jsfiddle.net/r3p9ph5k/

 

Λειτουργει μονο σε Chrome η παραπανω λυση..

 

Δοκιμασε να ψαχτεις με ::before και border.

 

Μπορεις να κανεις shapes με το border και να το δηλωσεις μεσα στο ::before Που θελεις.

 

Μη ξεχνας οτι στη σελιδα που εδωσες μπορεις να πατησεις F12 και να βρεις μονος σου τον τροπο που το εκανε.

 

Συγκεκριμενα το εκανε με ενα ασπρο div το οποιο το εβαλε με postition absolute τερμα επανω (η κατω αναλογως που το θελεις) και επειτα το εκανε απλα rotate 3 μοιρες για να το περιστρεψει και να γινει το σπαστο αυτο layout.

[Ruhl]

Ευχαριστω παιδια θα δοκιμασω να δω τι θα βγει

[Ruhl]

Λειτουργει μονο σε Chrome η παραπανω λυση..

 

Δοκιμασε να ψαχτεις με ::before και border.

 

Μπορεις να κανεις shapes με το border και να το δηλωσεις μεσα στο ::before Που θελεις.

 

Μη ξεχνας οτι στη σελιδα που εδωσες μπορεις να πατησεις F12 και να βρεις μονος σου τον τροπο που το εκανε.

 

Συγκεκριμενα το εκανε με ενα ασπρο div το οποιο το εβαλε με postition absolute τερμα επανω (η κατω αναλογως που το θελεις) και επειτα το εκανε απλα rotate 3 μοιρες για να το περιστρεψει και να γινει το σπαστο αυτο layout.

Να σου πω , εσυ στο site σου http://www.dominodesign.gr/  το οποιο βρηκα πολυ ωραιο και καλα σχεδιασμενο, τις καμπυλες τις εκανες με αυτον τον τροπο(link)? και στην ουσια απλα εβαλες απο κατω ιδια αποχρωση χρωμα? για να κανει αυτην την ψευδαισθηση οτι ειναι μονοκοματο 

https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_path2

[XPHSTOS_]

Να σου πω , εσυ στο site σου http://www.dominodesign.gr/  το οποιο βρηκα πολυ ωραιο και καλα σχεδιασμενο, τις καμπυλες τις εκανες με αυτον τον τροπο(link)? και στην ουσια απλα εβαλες απο κατω ιδια αποχρωση χρωμα? για να κανει αυτην την ψευδαισθηση οτι ειναι μονοκοματο 

https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_path2

Στο site του έχει βάλει ένα div με ένα svg με το συγκριμένο σχήμα. Top και bottom.

Αρκετά safe με τον explorer να χαλάει την πιάτσα ο οποίος από 8 και κάτω δεν το παίζει.

 

Γιαυτό που θέλεις εσύ:

1) Μπορείς να το κάνεις με ένα απλό SVG το οποίο είναι αρκετά safe όπως ανέφερα πιο πάνω.

2) Μπορείς να έχεις ένα εξτρα div το οποίο με transform να το φέρνεις στο σχήμα που δείχνεις.

2.α) Μπορείς να κάνεις το παραπάνω αλλά αντί για div να το περάσεις σε ένα ψευδο-element :before :after

3) Μπορείς να το περάσεις σε κάποιο div ως img

3.α) Μπορείς να το περάσεις σε :before :after ως background img

4) Μπορείς να πιάσεις όλο το div και με transform να το φέρεις στην μορφή αυτή αλλά μετά να μηδενίσεις το transform για τα μέσα στοιχεία του div...

and the list goes on.

 

Τι προτείνω:

Αν δεν σε ενδιαφέρει να υποστηρίζεις παλιούς browsers παίξε με svg.

Αν σε ενδιαφέρει τότε παίξε με extra div ή before after και φέρτο με transform όπως θέλεις.

[dominotrix]

Για καμπυλες ναι θα χρειαστεις SVG μιας και δεν υπαρχει css εντολη που να κανει bend τα elements. Οσον αφορα ομως το δικο σου σχεδιο, μπορεις ευκολα να το κανεις με transform:rotate(-3deg); το οποιο θα ειναι σε ενα div που θα το βαλεις με ::before για να παει πριν το κεντρικο σου div.

 

Αν θελεις ξεκινησε ενα codepen.io και οπου δυσκολευτεις, κανε μας share για να σου πουμε τι να κανεις.

[XPHSTOS_]

Για καμπυλες ναι θα χρειαστεις SVG μιας και δεν υπαρχει css εντολη που να κανει bend τα elements. Οσον αφορα ομως το δικο σου σχεδιο, μπορεις ευκολα να το κανεις με transform:rotate(-3deg); το οποιο θα ειναι σε ενα div που θα το βαλεις με ::before για να παει πριν το κεντρικο σου div.

 

Αν θελεις ξεκινησε ενα codepen.io και οπου δυσκολευτεις, κανε μας share για να σου πουμε τι να κανεις.

Μια μικρή διόρθωση, δεν είναι transform rotate...

Αλλά transform: skewY(<αριθμός μοιρών>) // Y γιατί θέλουμε κατα ύψος να τροποποιήσουμε.

 

Επίσης μπορείς να πετύχεις τις καμπύλες χωρίς svg αλλά με έναν λίγο πιο ανορθόδοξο τρόπο μεν αλλά με μεγαλύτερο backwards compatibility.

Στην ουσία δημιουργείς ένα τεράστιο element το οποίο βγαίνει εκτός ορίων του canva και του δίνεις border-radius.

Την καμπυλότητα την πετυχαίνεις με το να αλλάζεις το ύψος από το element αυτό.

Στην ουσία έχεις ένα μεγάλο οβάλ σχήμα.

Παράδειγμα:  Site: http://www.remax.gr/franchise

[dominotrix]

Και με skew γινεται οπως πολυ σωστα ειπες αλλα και με rotate. Αν ενα ορθογωνιο div το κανεις rotate λιγες μοιρες, θα γινει το ιδιο εφε. Αν και νομιζω πως οντως το skew βγαζει πιο πολυ νοημα.

[vadou]

[offtopic]

Κοιτάζετε ακόμα compatibility με ΙΕ8?

Εγώ από ms μόνο IE11 και Edge ελέγχω και μόλις ωριμάσει λίγο grid, variables και es6 λέω να κόψω και τον IE11.

[/offtopic]

[XPHSTOS_]

[offtopic]

Κοιτάζετε ακόμα compatibility με ΙΕ8?

Εγώ από ms μόνο IE11 και Edge ελέγχω και μόλις ωριμάσει λίγο grid, variables και es6 λέω να κόψω και τον IE11.

[/offtopic]

Εξαρτάται από τους πελάτες σου και το target group τους.

Κανονικά η backwards υποστήριξη θα πρέπει να πληρώνεται εξτρά γιατί απαιτεί και περισσότερους ελέγχους κλπ. αλλά δυστυχώς αυτό παραμένει όνειρο απατηλό.

Όταν ο πελάτης λέει ότι θέλει ένα site, εννοεί ότι θέλει να παίζει και παντού!

 

Αν μιλάμε για ένα site το οποίο μπορεί να απευθύνεται σε άτομα μεγαλύτερης ηλικίας, μην περιμένετε να έχουν οι περισσότεροι μηχανήματα με windows 10 ή 8.

Κάποιοι θα έχουν ξεμείνει με 7, Vista και, θεός φυλάξει, XP.

Πρέπει να τους υποστηρίξεις και αυτούς.

Οπότε αν κάνεις περίεργα πράγματα flex με svg ή και εγώ δεν ξέρω τι άλλο.. θα φας τα μούτρα σου.

 

Το σωστό είναι:

1) Αν υπάρχει ήδη site, τραβάς στατιστικά για τους χρήστες σου και κάνεις μερικές υποθέσεις για τους νέους χρήστες που θες να προσελκύσεις. Έτσι προσαρμόζεσαι ανάλογα. Εικαστικά και Τεχνικά.

2) Αν δεν υπάρχει site, κάνεις υποθέσεις για τους πιθανούς σου χρήστες και προσαρμόζεσαι.

 

Δυστυχώς, και πάλι, από την ημέρα της υπογραφής για την ανάθεση του έργου μέχρι το deadline συνήθως μεσολαβούν μερικές εβδομάδες... άντε κανα 2μηνο - 3μήνο στην καλύτερη, οπότε δεν υπάρχει χρόνος για όλα αυτά.

Η πραγματικότητα προστάζει να δουλεύεις σε 5-10 προτζεκτ ταυτόχρονα και να πρέπει να βγάλεις και τα κανούργια που έρχονται.

Με αποτέλεσμα να υπάρχουν πολλά πισωγυρίσματα με τον πελάτη και στο τέλος ούτε ο developer, ούτε ο πελάτης να είναι 100% ικανοποιημένοι.

 

Σίγουρα δεν γίνεται πάντα έτσι, αλλά τις περισσότερες των περιπτώσεων υπάρχει αυτό το φαινόμενο.