Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Φόντο (background) και Περίγραμμα (border) στοιχείου ιστοσελίδας Παρουσίαση 16 η 1 Βελώνης Γεώργιος Καθηγητής
Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google Chrome 52.0 Mozilla FireFox 48.0 Yandex 16.7 Internet Explorer 11.0 Safari 5.1.7 Opera 39.0 2
Μονάδες μέτρησης mm (millimeters) cm (centimeters) in (inches): 1in = 2.54cm pt (points): 1pt = 1/72in pc (picas): 1pc = 12pt px (pixels): 1px = 1/96th of 1in em: 1em = 1 φορά το μέγεθος του font-size 3
Περιεχόμενα Φόντο στοιχείου Χρώμα φόντου - ιδιότητα background-color Εικόνα φόντου - ιδιότητα background-image Επανάληψη φόντου - ιδιότητα background-repeat Προσάρτηση φόντου - ιδιότητα background-attachment Θέση φόντου - ιδιότητα background-position Ορισμός φόντου ιδιότητα background CSS3 Φόντο στοιχείου Καθορισμός της περιοχής στοιχείου που θα χρωματιστεί - ιδιότητα background-clip Καθορισμός θέσης εικόνας - ιδιότητα background-origin Καθορισμός μεγέθους εικόνας - ιδιότητα background-size 4
Περιεχόμενα Περίγραμμα στοιχείου Δημιουργία περιγράμματος - ιδιότητα border Στυλ περιγράμματος - ιδιότητα border-style Στυλ ξεχωριστών πλευρών - ιδιότητες border-top-style, border-right-style, border-bottom-style, border-left-style Πλάτος περιγράμματος - ιδιότητα border-width Πλάτος περιγράμματος ξεχωριστών πλευρών - ιδιότητες border-top-width, border-right-width, border-bottomwidth, border-left-width Χρώμα περιγράμματος - ιδιότητα border-color Χρώμα περιγράμματος ξεχωριστών πλευρών- ιδιότητες border-top-color, border-right-color, border-bottom-color, border-left-color 5
Περιεχόμενα CSS3 Περίγραμμα στοιχείου Στρογγυλεμένες γωνίες περιγράμματος - ιδιότητα borderradius Ακτίνες στρογγυλεμένων γωνιών - ιδιότητες border-topleft-radius, border-top-right-radius, border-bottom-rightradius, border-bottom-left-radius Περίγραμμα εικόνας ιδιότητα border-image Μονοπάτι περιγράμματος εικόνας ιδιότητα borderimage-source Περικοπή περιγράμματος εικόνας ιδιότητα border-imageslice Πλάτος περιγράμματος εικόνας ιδιότητα border-imagewidth 6
Περιεχόμενα CSS3 Περίγραμμα στοιχείου (συνέχεια) Επέκταση περιγράμματος εικόνας ιδιότητα border-imageoutset Επανάληψη περιγράμματος εικόνας ιδιότητα borderimage-repeat 7
Φόντο στοιχείου Χρώμα φόντου - ιδιότητα "background-color" Η ιδιότητα background-color χρησιμοποιείται για να οριστεί το χρώμα φόντου ενός στοιχείου. Σύνταξη: background-color: χρώμα transparent initial inherit; Τιμές: χρώμα: Όνομα_χρώματος ή κωδικός_χρώματος ή rgb(x,x,x). transparent: Προεπιλογή. Ορίζει ότι το χρώμα φόντου θα πρέπει να είναι διαφανές. Παράδειγμα: p{background-color:#00ff00;} Το προεπιλεγμένο χρώμα φόντου για την ιστοσελίδα ορίζεται στον επιλογέα body. Παράδειγμα: body{background-color: yellow;} 8
Φόντο στοιχείου Χρώμα φόντου - ιδιότητα "background-color" Παράδειγμα:. <head> <style type="text/css"> body{background-color: cyan;} p{background-color: rgb(255,0,255);} </style> </head> <body> <h1><1ο ΕΠΑΛ Κατερίνης</h1> <p><τομέας Πληροφορικής</p> </body>. 9
Φόντο στοιχείου Εικόνα φόντου - ιδιότητα "background-image" Η ιδιότητα background-image χρησιμοποιείται για να οριστεί μία εικόνα ως φόντο ενός στοιχείου. Από προεπιλογή, μία εικόνα φόντου τοποθετείται στην επάνω αριστερή γωνία του στοιχείου, και επαναλαμβάνεται τόσο κάθετα όσο και οριζόντια. Σύνταξη: background-image: url("path/image_file") initial inherit; Παράδειγμα: <head> <style> body{background-image: url("./images/back1.jpg");} p{background-image: url("./images/back2.jpg");} </style> </head> 10
Φόντο στοιχείου Εικόνα φόντου - ιδιότητα "background-image" Αν ορισθούν περισσότερες από μία εικόνες ως φόντο στην ιστοσελίδα, οι τιμές τους χωρίζονται μεταξύ τους με κόμμα. Προσοχή! Για να μην υπερκαλύπτει η μία εικόνα την άλλη, οι εικόνες θα πρέπει να είναι διαφανείς (transparent). Παράδειγμα: <head> <style> body{background-image: url("./images/back3.png"), url("./images/back4.png");} </style> </head> 11 back3.png back4.png
Φόντο στοιχείου Επανάληψη φόντου - ιδιότητα "background-repeat" Η ιδιότητα background-repeat χρησιμοποιείται για να οριστεί αν θα επαναλαμβάνεται η εικόνα φόντου της σελίδας και προς ποια κατεύθυνση. Σύνταξη: background-repeat: repeat no-repeat repeat-x repeat-y initial inherit; Τιμές: repeat: Προεπιλεγμένη τιμή. Θα επαναλαμβάνεται και προς τις δύο κατευθύνσεις, μέχρι να καλύψει το στοιχείο, στο οποίο έχει οριστεί. no-repeat: Δεν θα επαναλαμβάνεται προς καμία κατεύθυνση. repeat-x: Θα επαναλαμβάνεται οριζόντια. repeat-y: Θα επαναλαμβάνεται κατακόρυφα. 12
Φόντο στοιχείου Επανάληψη φόντου - ιδιότητα "background-repeat" Παράδειγμα: <head> <style> body{ background-image: url("./images/back1.jpg"); background-repeat: repeat-y; } </style> </head> 13
Φόντο στοιχείου Προσάρτηση φόντου - ιδιότητα "background-attachment" Η ιδιότητα background-attachment χρησιμοποιείται για να οριστεί αν η εικόνα φόντου θα μένει σταθερή ή αν θα ακολουθεί το στοιχείο στο οποίο έχει οριστεί. Σύνταξη: background-attachment: fixed scroll local; Τιμές: fixed: Θα παραμένει σταθερή (κλειδωμένη). scroll: Η εικόνα κυλάει μαζί με την ιστοσελίδα μη κλειδωμένη. local: Θα ακολουθεί το περιεχόμενο του στοιχείου στο οποίο έχει οριστεί. 14
Φόντο στοιχείου Προσάρτηση φόντου - ιδιότητα "background-attachment" Παράδειγμα: <head> <style> body{ background-image: url("./images/back3.jpg"); background-repeat: repeat-x; background-attachment: fixed; } </style> </head> <body> <h1>1ο ΕΠΑΛ Κατερίνης</h1> <p>τομέας Πληροφορικής</p> </body> 15
Φόντο στοιχείου Θέση φόντου - ιδιότητα "background-position" Η ιδιότητα background-position χρησιμοποιείται για να οριστεί η ακριβής θέση που θα έχει η εικόνα φόντου μέσα σε ένα στοιχείο. Οι τιμές που παίρνει η ιδιότητα αυτή είναι δύο: η πρώτη τιμή αντιστοιχεί στην οριζόντια θέση της εικόνας και η δεύτερη αντιστοιχεί στην κάθετη θέση της ίδιας εικόνας. Αν χρησιμοποιηθεί μία τιμή, η άλλη θα είναι από προεπιλογή η τιμή center. Σύνταξη: background-position: top left top center top right center left center center center right bottom left bottom center bottom right x% y% Θέση-x Θέση-y initial inherit; body{ background-image: url("./images/back3.jpg"); background-repeat: no-repeat; background-position: center center; } 16
Φόντο στοιχείου Θέση φόντου - ιδιότητα "background-position" Θέση-x Θέση-y: Η πρώτη τιμή είναι η οριζόντια θέση και η δεύτερη η κατακόρυφη. Η επάνω αριστερή γωνία είναι 0 0. Οι μονάδες μπορούν να είναι pixels (0px 0px) ή οποιεσδήποτε άλλες μονάδες CSS (em, pt, κ.λπ.). Αν οριστεί μόνο μία τιμή, η άλλη τιμή θα είναι 50%. Μπορούν να αναμιχθούν ποσοστά (%) και θέσεις(x,y). x% y%: Ένας άλλος τρόπος για να οριστεί η θέση της εικόνας φόντου είναι να χρησιμοποιηθούν δύο ποσοστά, από 0% ως 100%. Το πρώτο ορίζει την οριζόντια και το δεύτερο ορίζει την κάθετη θέση. Η επάνω αριστερή γωνία είναι 0% 0% και η κάτω δεξιά γωνία είναι 100% 100%. Αν ορίσετε μόνο μία τιμή, η άλλη τιμή θα είναι 50%. Προεπιλεγμένη τιμή είναι: 0% 0%. 17
Φόντο στοιχείου Θέση φόντου - ιδιότητα "background-position" Παράδειγμα 1: body{ background-image: url("./images/back3.jpg"); background-repeat: no-repeat; background-position: 30% 50%; } <h1>1ο ΕΠΑΛ Κατερίνης</h1> </br></br></br> <p>τομέας Πληροφορικής</p> 18
Φόντο στοιχείου Θέση φόντου - ιδιότητα "background-position" Παράδειγμα 2: body{ background-image: url("./images/back3.jpg"); background-repeat: no-repeat; background-position: 50px 100px; } <h1>1ο ΕΠΑΛ Κατερίνης</h1> </br></br></br> <p>τομέας Πληροφορικής</p> 19
Φόντο στοιχείου Θέση φόντου - ιδιότητα "background-position" Προσοχή: η ιδιότητα background-position, για να δουλέψει, προϋποθέτει την ύπαρξη της ιδιότητας background-repeat έχοντας την τιμή no-repeat. Παράδειγμα: body{ background-image: url("./images/back3.jpg"); background-repeat: no-repeat; background-position: bottom center; } 20
Φόντο στοιχείου Ορισμός φόντου - ιδιότητα "background" Όπως προαναφέρθηκε, υπάρχουν πέντε ιδιότητες φόντου. Υπάρχει η δυνατότητα να γραφούν όλες μαζί σε μια ιδιότητα, για χάρη συντομίας, κάνοντας χρήση της ιδιότητας background, αν και συνίσταται οι ιδιότητες να γράφονται μεμονωμένες, διότι έτσι είναι εύκολα αναγνώσιμες άρα και εύκολο να τις διαχειριστεί κανείς. Σύνταξη: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial inherit; Τιμές (βλέπετε CSS3): bg-size: Ορίζει το μέγεθος των εικόνων φόντου, π.χ. 60px 80px. bg-origin: Ορίζει την περιοχή από την οποία θα ξεκινά η τοποθέτηση της εικόνας φόντου. bg-clip: Ορίζει την επιφάνεια του στοιχείου που θα χρωματιστεί. 21
Φόντο στοιχείου Ορισμός φόντου - ιδιότητα "background" Παράδειγμα: body{ background: yellow url("./images/back5.png") center 50px/60px 60px no-repeat fixed; } 22
CSS3 Φόντο στοιχείου Καθορισμός περιοχής στοιχείου που θα χρωματιστεί - ιδιότητα "background-clip" Η ιδιότητα background-clip ορίζει την επιφάνεια του στοιχείου που θα χρωματιστεί. Σύνταξη: background-clip: border-box content-box padding-box initial inherit; Τιμές: border-box: Προεπιλεγμένη τιμή. Χρωματίζεται όλο το υπόβαθρο του στοιχείου ακόμη και του περιγράμματός του (θα φανεί σε διακεκομμένα περιγράμματα). content-box: Το υπόβαθρο περικόπτεται στο πλαίσιο περιεχομένου. Δηλαδή αν υπάρχει ένα <div> πλαίσιο, μέσα στο οποίο έχει εισαχθεί κάποιο κείμενο, τότε η επιφάνεια που θα χρωματιστεί με το χρώμα του υποβάθρου θα είναι μόνο το background του κειμένου και όχι όλη η επιφάνειά του <div>. 23
CSS3 Φόντο στοιχείου Καθορισμός περιοχής στοιχείου που θα χρωματιστεί - ιδιότητα "background-clip" Τιμές συνέχεια: padding-box: Χρωματίζεται όλη η επιφάνεια του κειμένου και του padding. Παράδειγμα 1: div { } border: 5px dashed black; padding: 25px; background: cyan; background-clip: border-box; 24
CSS3 Φόντο στοιχείου Καθορισμός περιοχής στοιχείου που θα χρωματιστεί - ιδιότητα "background-clip" Παράδειγμα 2: <head> <style> #bbox { border: 10px dashed black; padding: 25px; background: yellow; background-clip: padding-box; } </style> </head> <body> <div id="bbox"> <h1>1ο ΕΠΑΛ Κατερίνης</h1> <p>τομέας Πληροφορικής</p> </div> </body> 25
CSS3 Φόντο στοιχείου Καθορισμός περιοχής στοιχείου που θα χρωματιστεί - ιδιότητα "background-clip" Παράδειγμα 3: <head> <style> #cbox { border: 10px dashed black; padding: 25px; background: yellow; background-clip: content-box; } </style> </head> <body> <div id="cbox"> <h1>1ο ΕΠΑΛ Κατερίνης</h1> <p>τομέας Πληροφορικής</p> </div> </body> 26
CSS3 Φόντο στοιχείου Καθορισμός θέσης εικόνας - ιδιότητα "background-origin" Η ιδιότητα background-origin ορίζει την περιοχή από την οποία θα ξεκινά η τοποθέτηση της εικόνας φόντου. Σύνταξη: background-origin: padding-box border-box content-box initial inherit;; Τιμές: padding-box: Προεπιλεγμένη τιμή. Η εικόνα φόντου ξεκινά από την πάνω αριστερή γωνία της άκρης του padding. border-box: Η εικόνα φόντου ξεκινά από την πάνω αριστερή γωνία του περιγράμματος. content-box: Η εικόνα φόντου ξεκινά από την άνω αριστερή γωνία του περιεχομένου. 27
CSS3 Φόντο στοιχείου Καθορισμός θέσης εικόνας - ιδιότητα "background-origin" Παράδειγμα: <body> <head> <div id="cbox"> <style> <h1>1ο ΕΠΑΛ Κατερίνης</h1> #cbox { <p>τομέας Πληροφορικής</p> border: 10px solid black; </div> </body> padding: 35px; background: url(./images/back3.jpg); background-repeat: no-repeat; background-origin: content-box; } </style> </head> 28
CSS3 Φόντο στοιχείου Καθορισμός μεγέθους εικόνας - ιδιότητα "background-size" Η ιδιότητα background-size ορίζει το μέγεθος της εικόνας φόντου. Σύνταξη: background-size: auto length cover contain initial inherit; Τιμές: auto: Προεπιλεγμένη τιμή. Η εικόνα φόντου περιέχει το πλάτος και το ύψος της. length: Ορίζει το πλάτος και το ύψος της εικόνας φόντου. Η πρώτη τιμή ορίζει το πλάτος και η δεύτερη το ύψος. Εάν δοθεί μόνο μία τιμή, η δεύτερη έχει οριστεί σε "auto". 29
CSS3 Φόντο στοιχείου Καθορισμός μεγέθους εικόνας - ιδιότητα "background-size" Τιμές συνέχεια: percentage: Μεταβάλει το πλάτος και το ύψος της εικόνας φόντου σε ποσοστό του αρχικού της μεγέθους. Η πρώτη τιμή ορίζει το πλάτος και η δεύτερη το ύψος. Εάν δοθεί μόνο μία τιμή, η δεύτερη έχει οριστεί σε "auto". cover: Μετατρέπει την κλίμακα της εικόνας φόντου, έτσι ώστε η περιοχή του στοιχείου να καλύπτεται πλήρως από αυτήν. Ορισμένα τμήματα της εικόνας φόντου μπορεί να μην είναι στη θέση εντός της περιοχής τοποθέτησης του φόντου. contain: Μετατρέπει την κλίμακα της εικόνας στο μεγαλύτερο μέγεθος, έτσι ώστε τόσο το πλάτος όσο και το ύψος της, να μπορεί να χωρέσει μέσα στην περιοχή περιεχομένου. 30
CSS3 Φόντο στοιχείου Καθορισμός μεγέθους εικόνας - ιδιότητα "background-size" Παράδειγμα : <body> <head> <div id="box"> <style> <h1>1ο ΕΠΑΛ Κατερίνης</h1> #box { <p>τομέας Πληροφορικής</p> border: 10px solid black; </div> </body> padding-top: 35px; background: url(./images/back3.jpg); background-size: 80px 80px; background-repeat: no-repeat; } </style> </head> 31
Περίγραμμα στοιχείου Δημιουργία περιγράμματος - ιδιότητα "border" Η ιδιότητα border επιτρέπει τον ορισμό του στυλ, του πλάτους και του χρώματος του περιγράμματος ενός στοιχείου. Σύνταξη: border: border-width border-style border-color initial inherit; Τιμές: border-width: Ορίζει το πλάτος του περιγράμματος του στοιχείου. border-style: Ορίζει το στυλ του περιγράμματος. border-color: Ορίζει το χρώμα του περιγράμματος. Παράδειγμα: p { border: 8px solid blue;} 32
Περίγραμμα στοιχείου Δημιουργία περιγράμματος - ιδιότητα "border" Παράδειγμα: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1, p{border:5px solid blue;} </style> </head> <body> <h1>1ο ΕΠΑΛ Κατερίνης</h1> <p>τομέας Πληροφορικής</p> </body> </html> 33
Περίγραμμα στοιχείου Στυλ περιγράμματος - ιδιότητα "border-style" Η ιδιότητα border-style ορίζει το στυλ των τεσσάρων περιγραμμάτων ενός στοιχείου. Αυτή η ιδιότητα μπορεί να έχει από μία έως τέσσερις τιμές. Σύνταξη: border-style:none hidden dotted dashed solid double groove ridge inset outset initial inherit; Τιμές: none: Προεπιλεγμένη τιμή. Για να μην υπάρχει περίγραμμα. hidden: Όπως η «none». dotted: Ορίζει διακεκομμένο περίγραμμα με κουκίδες. dashed: Ορίζει διακεκομμένο περίγραμμα με παύλες. solid: Ορίζει συμπαγές περίγραμμα. double: Ορίζει διπλό συμπαγές περίγραμμα. 34
Περίγραμμα στοιχείου Στυλ περιγράμματος - ιδιότητα "border-style" Τιμές συνέχεια 1: groove: Ορίζει ένα αυλακωτό 3D περίγραμμα. ridge: Ορίζει ένα ραβδωτό 3D περίγραμμα. inset: Ορίζει ένα ένθετο 3D περίγραμμα, δημιουργώντας την αίσθηση πως εισάγεται προς τα «μέσα» στην σελίδα. outset: Ορίζει ένα 3D περίγραμμα, δημιουργώντας την αίσθηση πως «βγαίνει» ένα επίπεδο προς τα έξω από την σελίδα. Σημείωση: Σε όλες τις τέσσερις παραπάνω ιδιότητες, το αποτέλεσμα εξαρτάται από την τιμή της border-color. 35
Περίγραμμα στοιχείου Στυλ περιγράμματος - ιδιότητα "border-style" Ορισμός και χρήση border-style:dotted solid double dashed; (πάνω-δεξιά-κάτωαριστερά) border-style:dotted solid double; (πάνω-δεξιά-κάτω) border-style:dotted solid; (πάνω-δεξιά) border-style:dotted; (όλα) 36
Περίγραμμα στοιχείου Στυλ περιγράμματος - ιδιότητα "border-style" 37 Παράδειγμα των τιμών του border-style
Περίγραμμα στοιχείου Στυλ περιγράμματος - ιδιότητα "border-style" Παράδειγμα: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1{border-style: dashed;} p{border-style: double;} </style> </head> <body> <h1>1ο ΕΠΑΛ Κατερίνης</h1> <p>τομέας Πληροφορικής</p> </body> </html> 38
Περίγραμμα στοιχείου Στυλ ξεχωριστών πλευρών - ιδιότητες "border-top-style ", "borderright-style ", "border-bottom-style ", "border-left-style " border-top-style: Ορίζει το στυλ του άνω περιγράμματος border-right-style: Ορίζει το στυλ του δεξιού περιγράμματος border-bottom-style: Ορίζει το στυλ του κάτω περιγράμματος border-left-style: Ορίζει το στυλ του αριστερού περιγράμματος Παράδειγμα: p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } 39
Περίγραμμα στοιχείου Πλάτος περιγράμματος - ιδιότητα "border-width" Η ιδιότητα border-width ορίζει το πλάτος των τεσσάρων περιγραμμάτων ενός στοιχείου. Αυτή η ιδιότητα μπορεί να έχει από μία έως τέσσερις τιμές. Σύνταξη: border-width: medium thin thick length initial inherit; Τιμές: medium: Προεπιλεγμένη τιμή. Ορίζει ένα μεσαίου μεγέθους περίγραμμα. thin: Ορίζει ένα λεπτό περίγραμμα. thick: Ορίζει ένα παχύ περίγραμμα. length: Επιτρέπει τον ακριβή ορισμό του πάχους του περιγράμματος. 40
Περίγραμμα στοιχείου Πλάτος περιγράμματος - ιδιότητα "border-width" Παράδειγμα: p { border-style: solid; border-width: medium; } <p>medium border</p> <p>thin border</p> <p >Thick border</p> <p >15px border</p> 41
Περίγραμμα στοιχείου Πλάτος περιγράμματος - ιδιότητα "border-width" Ορισμός και χρήση border-width:thin medium thick 10px; (πάνω-δεξιά-κάτωαριστερά) border-width:thin medium thick; (πάνω-δεξιά-κάτω) border-width:thin medium; (πάνω-δεξιά) border-width:thin; (όλα) Σημείωση: Πρέπει να δηλώνεται πάντα η ιδιότητα border-style, πριν από την ιδιότητα border-width. Ένα στοιχείο πρέπει να έχει περιγράμματα για να μπορέσει να ρυθμιστεί το πλάτος τους. 42
Περίγραμμα στοιχείου Πλάτος περιγράμματος ξεχωριστών πλευρών - ιδιότητες "border-top-width", "border-right-width", "border-bottom-width", "border-left-width" border-top-width: Ορίζει το πλάτος του άνω περιγράμματος border-right-width: Ορίζει το πλάτος του δεξιού περιγράμματος border-bottom-width: Ορίζει το πλάτος του κάτω περιγράμματος border-left-width: Ορίζει το πλάτος του αριστερού περιγράμματος Παράδειγμα: p { border-style: solid; border-top-width: medium; border-right-width: 10px; border-bottom-width: medium; border-left-width: 10px; } 43
Περίγραμμα στοιχείου Χρώμα περιγράμματος - ιδιότητα "border-color" Η ιδιότητα border-color ορίζει το χρώμα των τεσσάρων περιγραμμάτων ενός στοιχείου. Αυτή η ιδιότητα μπορεί να έχει από μία έως τέσσερις τιμές. Σύνταξη: border-color: color transparent initial inherit; Τιμές: color: Ορίζει το χρώμα του περιγράμματος. transparent: Ορίζει το χρώμα του περιγράμματος σε διαφανές. Παράδειγμα: p { border-style: solid; border-width: medium; border-color: blue; } <p>τομέας Πληροφορικής</p> 44
Περίγραμμα στοιχείου Χρώμα περιγράμματος ξεχωριστών πλευρών - ιδιότητες "border-top-color", "border-right-color", "border-bottom-color", "border-left-color" border-top-color: Ορίζει το χρώμα του άνω περιγράμματος border-right-color: Ορίζει το χρώμα του δεξιού περιγράμματος border-bottom-color: Ορίζει το χρώμα του κάτω περιγράμματος border-left-color: Ορίζει το χρώμα του αριστερού περιγράμματος Παράδειγμα: p { border-style: solid; border-top-color: red; border-right-color: blue; border-bottom-color: green; border-left-color: yellow; } 45
CSS3 Περίγραμμα στοιχείου Στρογγυλεμένες γωνίες περιγράμματος - ιδιότητα "border-radius" Η ιδιότητα border-radius ορίζει σε στρογγυλεμένες τις γωνίες των τεσσάρων περιγραμμάτων ενός <div> στοιχείου. Αυτή η ιδιότητα μπορεί να έχει από μία έως τέσσερις τιμές. Σύνταξη: border-radius: 1-4 length % / 1-4 length initial inherit; Τιμές length: Προεπιλεγμένη τιμή. Ορίζει το σχήμα των γωνιών σε px. %: Ορίζει το σχήμα των γωνιών σε ποσοστό (%) Παράδειγμα: div {border: 5px solid; border-radius: 30px;} 46
CSS3 Περίγραμμα στοιχείου Στρογγυλεμένες γωνίες περιγράμματος - ιδιότητα "border-radius" Ένα προαιρετικό δεύτερο σύνολο τιμών, προηγείται ενός συμβόλου «/» και ορίζει την κάθετη ακτίνα και για τις τέσσερις γωνίες. Εάν υπάρχει μόνο ένα σύνολο τιμών, αυτές χρησιμοποιούνται για να καθορίσουν τόσο την κάθετη, όσο και την οριζόντια ακτίνα εξίσου. Παράδειγμα: div { border-style: solid; border-radius: 10px 10px 5px 10px / 30px 30px 10px 5px; } 30px 10px 47
CSS3 Περίγραμμα στοιχείου Στρογγυλεμένες γωνίες περιγράμματος - ιδιότητα "border-radius" Παράδειγμα: div { background: yellow; border-style: solid; border-radius: 65px; width: 130px; height: 130px; text-align: center; line-height: 35px; } <div> <p>τομέας Πληροφορικής</p> </div> 48
CSS3 Περίγραμμα στοιχείου Στρογγυλεμένες γωνίες περιγράμματος - ιδιότητα "border-radius" Ορισμός και χρήση border-radius:10px 40px 20px 5px; (πάνω-δεξιά-κάτωαριστερά) border-radius:10px 40px 20px ; (πάνω-δεξιά-κάτω) border-radius:10px 40px ; (πάνω-δεξιά) border-radius:10px; (όλα) Σημείωση: Πρέπει να δηλώνεται πάντα η ιδιότητα border-style (ή border) πριν από την ιδιότητα border-radius. Ένα στοιχείο πρέπει να έχει περιγράμματα για να είναι δυνατόν να ρυθμιστούν οι γωνίες των περιγραμμάτων του. 49
CSS3 Περίγραμμα στοιχείου Ακτίνες στρογγυλεμένων γωνιών - ιδιότητες "border-top-leftradius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius" border-top-left-radius: Ορίζει ένα στρογγυλεμένο περίγραμμα στην πάνω αριστερή γωνία ενός <div> στοιχείου. border-top-right-radius: Ορίζει ένα στρογγυλεμένο περίγραμμα στην πάνω δεξιά γωνία ενός <div> στοιχείου. border-bottom-right-radius: Ορίζει ένα στρογγυλεμένο περίγραμμα στην κάτω δεξιά γωνία ενός <div> στοιχείου. border-bottom-left-radius: Ορίζει ένα στρογγυλεμένο περίγραμμα στην κάτω αριστερή γωνία ενός <div> στοιχείου. Σύνταξη: border-*-*-radius: length % [length %] initial inherit; 50
CSS3 Περίγραμμα στοιχείου Ακτίνες στρογγυλεμένων γωνιών - ιδιότητες "border-top-leftradius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius" Παράδειγμα: div { border-style: solid; border-top-left-radius: 20px; border-bottom-right-radius: 30px; } <div style="text-align:center;"> <p>τομέας Πληροφορικής</p> </div> 51
CSS3 Περίγραμμα στοιχείου Ακτίνες στρογγυλεμένων γωνιών Το παρακάτω διάγραμμα δίνει μερικά παραδείγματα για το πώς μπορεί να εμφανίζονται τα περιγράμματα αν δοθούν γωνίες με διαφορετικές ακτίνες: 52
CSS3 Περίγραμμα στοιχείου Περίγραμμα εικόνας ιδιότητα "border-image" Η ιδιότητα border-image ορίζει μια εικόνα ως περίγραμμα ενός στοιχείου. Σύνταξη: border-image: source slice width outset repeat initial inherit; Τιμές: source: Η διαδρομή για την εικόνα που θα χρησιμοποιηθεί ως περίγραμμα. slice: Πώς θα περικοπεί το περίγραμμα εικόνας. width: Το πλάτος του περιγράμματος εικόνας. outset: Το ποσό κατά το οποίο το περίγραμμα εικόνας εκτείνεται πέρα από το border box. repeat: Το περίγραμμα εικόνας θα πρέπει να επαναληφθεί, στρογγυλεμένο ή τεντωμένο. 53
CSS3 Περίγραμμα στοιχείου Περίγραμμα εικόνας ιδιότητα "border-image" Παράδειγμα: p.p1{ text-align: center; border: 20px solid transparent; padding: 15px; border-image: url(./images/border.png) 30 round; } 54 <p class="p1">1ο ΕΠΑΛ Κατερίνης</p>
CSS3 Περίγραμμα στοιχείου Μονοπάτι περιγράμματος εικόνας ιδιότητα "border-image-source" Η ιδιότητα border-image-source ορίζει μια εικόνα ως περίγραμμα ενός στοιχείου. Σύνταξη: border-image-source: none image initial inherit; Τιμές: none: Δεν θα χρησιμοποιηθεί κάποια εικόνα. image: Η διαδρομή για την εικόνα που θα χρησιμοποιηθεί ως περίγραμμα. Παράδειγμα:.p1{ } border-image-source: url(./images/border.png); 55
CSS3 Περίγραμμα στοιχείου Περικοπή περιγράμματος εικόνας ιδιότητα "border-image-slice" Η ιδιότητα border-image-slice ορίζει το πόσο θα περικοπεί το περίγραμμα εικόνας ενός στοιχείου. Σύνταξη: border-image-slice: number % fill initial inherit; Τιμές: number: Ο αριθμός (οι) αντιπροσωπεύουν τα pixels για εικόνες raster ή συντεταγμένες για εικόνες vector. %: Τα ποσοστά είναι σε σχέση με το ύψος ή το πλάτος της εικόνας. fill: Ορίζει τη θέση που θα εμφανίζεται το μεσαίο τμήμα της εικόνας. 56
CSS3 Περίγραμμα στοιχείου Περικοπή περιγράμματος εικόνας ιδιότητα "border-image-slice" Παράδειγμα: p.p1{ } text-align: center; border: 20px solid transparent; padding: 15px; border-image: url(./images/border.png) 30 round; border-image-slice: 60; <p class="p1">1ο ΕΠΑΛ Κατερίνης</p> 57
CSS3 Περίγραμμα στοιχείου Πλάτος περιγράμματος εικόνας ιδιότητα "borderimage-width" Η ιδιότητα border-image-width ορίζει το πλάτος περιγράμματος εικόνας ενός στοιχείου. Σύνταξη: border-image-width: length number % auto initial inherit; Τιμές: length: Μια μονάδα μήκους (px) για τον καθορισμό του μεγέθους του border-width. number: Προεπιλεγμένη τιμή 1. Αντιπροσωπεύει πολλαπλάσια της αντίστοιχης border-width. %: Αναφέρεται στο μέγεθος της περιοχής περιγράμματος της εικόνας : το πλάτος της περιοχής για οριζόντιες μετατοπίσεις, το ύψος για κάθετες μετατοπίσεις. 58
CSS3 Περίγραμμα στοιχείου Πλάτος περιγράμματος εικόνας ιδιότητα "borderimage-width" Τιμές συνέχεια: auto: Αν καθοριστεί, το πλάτος είναι το εγγενές πλάτος ή το ύψος του αντίστοιχου image slice. Παράδειγμα: p.p1{ text-align: center; border: 10px solid transparent; padding: 15px; border-image: url(./images/border.png); border-image-repeat: round; border-image-slice: 30; border-image-width: 30px; } 59
CSS3 Περίγραμμα στοιχείου Επέκταση περιγράμματος εικόνας ιδιότητα "border-image-outset" Η ιδιότητα border-image-outset ορίζει το ποσό κατά το οποίο η περιοχή του περιγράμματος εικόνας εκτείνεται πέρα από το border box. Σύνταξη: border-image-outset: length number initial inherit; Τιμές: length: Προεπιλεγμένη τιμή το 0. Μια μονάδα μήκους προσδιορίζει το πόσο μακριά από τα άκρα θα εμφανιστεί το περίγραμμα εικόνας. number: Αντιπροσωπεύει πολλαπλάσια της αντίστοιχης borderwidth; 60
CSS3 Περίγραμμα στοιχείου Επέκταση περιγράμματος εικόνας ιδιότητα "border-image-outset" Παράδειγμα: p.p1{ text-align:center; border: 10px solid transparent; padding: 15px; border-image: url(./images/border.png); border-image-repeat: round; border-image-slice: 30; border-image-outset: 10px; } 61
CSS3 Περίγραμμα στοιχείου Επανάληψη περιγράμματος εικόνας ιδιότητα "border-image-repeat" Η ιδιότητα border-image-repeat ορίζει εάν το περίγραμμα της εικόνας θα πρέπει να επαναληφθεί, στρογγυλευθεί ή τεντωθεί. Σύνταξη: border-image-repeat: stretch repeat round initial inherit; Τιμές: stretch: Προεπιλεγμένη τιμή. Η εικόνα παραμορφώνεται για να γεμίσει την περιοχή. repeat: Η εικόνα γίνεται tiled (επαναλαμβανόμενη) για να γεμίσει την περιοχή. round: Η εικόνα γίνεται tiled (επαναλαμβανόμενη) για να γεμίσει την περιοχή. Αν δεν γεμίζει το χώρο με μια ολόκληρη σειρά από tiles, η εικόνα αλλάζει κλίμακα έτσι ώστε να ταιριάζει. 62
CSS3 Περίγραμμα στοιχείου Επανάληψη περιγράμματος εικόνας ιδιότητα "border-image-repeat" Παράδειγμα: p.p1{ text-align:center; border: 10px solid transparent; padding: 15px; border-image: url(./images/border.png); border-image-repeat: round; border-image-slice: 30; border-image-outset: 10px; } stretch repeat round 63
Βιβλιογραφία W3schools.com (https://www.w3schools.com/css/default.asp) WLearn (http://www.wlearn.gr/index.php/home-css-83) Πίνακες ιδιοτήτων CSS2 (https://iekgalatsiou.files.wordpress.com) CSC (http://www.csc.com.gr) CSS3.info (http://www.css3.info) 64