CSS 3, τι καινούργιο;

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

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

Απάντηση
Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

CSS 3, τι καινούργιο;

Δημοσίευση από Basilakis » 31 Μαρ 2010 19:33

Τα css3 έρχονται για να μας βοηθήσουν να στήνουμε πολλά κομμάτια της σελίδας με πολύ γρηγορότερο τρόπο! Δυστυχώς ακόμη δεν υποστηρίζουν όλοι οι browsers τον ίδιο τρόπο, αλλά χρειάζονται και διαφορετική ιδιότητα ο καθένας, παρόλα αυτά, σύντομα, θα έχουμε μόνο μια ιδιότητα να λειτουργεί!

Ας δούμε μερικά παραδείγματα λοιπόν!

Rounded Corners
Ένα απο τα τελευταία trends είναι οι στρογγυλές γωνίες στα αντικείμενα της σελίδας μας. Ο τρόπος είναι απλός

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

.border-round {
border-radius: 10px;  
 -moz-border-radius: 10px;  
 -webkit-border-radius: 10px;  
}

Box Shadow
Η τρίτη διάσταση έχει περάσει και στο Web. Τώρα έχουμε την δυνατότητα να βάζουμε shadow στα αντικείμενα της σελίδας μας, χωρίς να χρησιμοποιούμε εικόνες όπου και βαραίνουν το όλο web site!

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

.box {  
box-shadow: 5px 5px 2px black;  
 -moz-box-shadow: 5px 5px 2px black;  
 -webkit-box-shadow: 5px 5px 2px black;  
} 

Text Shadow
Γιατί να έχουμε μόνο στα αντικείμενα shadow? Εγώ θέλω και στα κείμενα μου! ναι θέλω τα titles μου να είναι κείμενο για να μπορούν να διαβάζοντα καλύτερα απο τις μηχανές αναζήτης!

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

.font {  
text-shadow: 0 1px 0 #000;  
 }  
Τώρα όμως τι είναι αυτές οι τιμές εκει μέσα έ;
1) X-offset
2) Y-offset
3) Blur
4) color

Opacity
Once again, κλείνουμε το photoshop και δεν φορτώνουμε άσκοπα εικόνες στο design μας! Πώς; Απλώς ρυθμίζουμε το opacity μας μέσα απο το CSS μας!

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

opacity:0.4;filter:alpha(opacity=40)


RGBA values
Αυτό είναι από τα αγαπημένα μου. Γλυτώνεις χρόνο από το να μπλέκει με πολλά values μαζί και το σημαντικότερο, RGB στα colors! :D

Στο παρακάτω λοιπόν, βάζουμε στο text shadow, και ρίχνουμε και το opacity

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

text-shadow: 18px 0px 0 rgba(173, 9, 24, 0.5);

Font face
Πάντα άκουγα πελάτες που θέλανε μια ξεχωριστή γραμματοσειρά. Πάλι σε αυτούς, δεν μπορούσαμε να κάνουμε πολλά γιατί δεν θέλαμε να φορτώνουμε παντού εικόνες! Η λύση ήρθε και είναι πολύ απλή!

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

@font-face {  
font-family: 'Loyal';  
 src: url('loyal.ttf');  
}  


 .font {  
 font-family: Loyal;  
 font-size: 20px;  
 } 

Είδατε τα μαγικά που έκανα εκεί πάνω; Πρώτα κάλεσα το font, μαζί με το .ttf αρχείο, έκανα το familly και μετά το χρησιμοποίησα. Καλό κολπάκι έτσι; Απλώς, μην το παρακάνετε... Προς το παρών τουλάχιστον είναι καλό να το χρησιμοποιούμε μόνο σε headings! Α και καλό είναι να χρησιμοποιούμε μόνο fonts που διατήθονται ελευθερουά!

Multiple backgrounds:

Αυτό και εάν είναι απο τα καλά! Πλέον μπορούμε να χρησιμοποιήσουμε πολλαπλά background μέσα σε ένα div. Βέβαια με μερικές νέες ιδιότητες που έρχονται όπως το πως να χρησιμοποιούμε το background, απο μέγεθος, ύψος κτλ... Magic, magic!

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

<style type="text/css">
.box &#123;
width&#58; 200px;
height&#58; 150px;
background&#58; url&#40;images/bg.png&#41; repeat-x;
&#125;
	.box2 &#123;
	width&#58; 100%;
	height&#58; 100%;
	background&#58; url&#40;images/text.png&#41; center center no-repeat;
	&#125;
</style>

<div class="box">
	<div class="box2">
		<!--CONTENT-->
	</div>
</div>
Έ καλό; Πάθατε ένα soc έτσι; :kaloe:


Multiple Columns
Αυτό και εάν είναι κάτι που πραγματικά μας λύνει τα χέρια. Αντί να χρησιμοποιούμε δύο divs, floats κτλ, σπάμε ένα Div σε 2 columns.

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

.columns &#123;
-moz-column-count&#58; 2;
-webkit-column-count&#58; 2;
&#125;
Φυσικά το κάθε column ορίζεται απο ένα <p>. Ξέρετε κάποιον άλλο τρόπο για να το σπάσουμε στα δύο;

Border Image
Αντί να βάζουμε ένα image στο background και να το χρησιμοποιήσουμε σαν border, πλέον μπορούμε απευθείας με το border-image!

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

.box &#123;
border-width&#58; 20px;
-webkit-border-image&#58; url&#40;images/border.png&#41; 27 round;
-moz-border-image&#58; url&#40;images/border.png&#41; 27 round;
border-image&#58; url&#40;images/border.png&#41; 27 round;
&#125;
Φυσικά βλέπουμε και το width το οποίο έχουμε ορίσει στο border.

Μερικά απο τα properties που μπορείτε να περάσετε στο background image είναι
background-size: [ [ <length> | <percentage> | auto ]{1,2} || round ]


Gradient
για να ορίσουμε gradient σε ένα κουτί περιεχομένου ( ναι για ακόμη μια φορά δεν χρησιμοποιούμε Images! pro layouts! )

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

gradient&#40;
    linear,
    left bottom,
    left top,
    color-stop&#40;0.34, rgb&#40;28,89,56&#41;&#41;,
    color-stop&#40;0.67, rgb&#40;56,116,84&#41;&#41;
&#41;
-webkit-gradient&#40;
    linear,
    left bottom,
    left top,
    color-stop&#40;0.34, rgb&#40;28,89,56&#41;&#41;,
    color-stop&#40;0.67, rgb&#40;56,116,84&#41;&#41;
&#41;
-moz-linear-gradient&#40;
    center bottom,
    rgb&#40;28,89,56&#41; 34%,
    rgb&#40;56,116,84&#41; 67%
&#41;

Transform
Θέλετε να δώσετε μια μικρή κλίση σε ένα αντικείμενο; That is so simply now, χρησιμοποιώντας την transform!

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

transform&#58; rotate&#40;-45deg&#41;;
-webkit-transform&#58; rotate&#40;-45deg&#41;;
-moz-transform&#58; rotate&#40;-45deg&#41;;

Δεν ξέρω εάν έχω ξεχάσει κάτι, ελπίζω εάν το έκανα να το προσθέσετε :)

Για να προλάβω κάποιους
1) Selectors δεν αναφέρομαι ακόμη. Είναι ποίο advanced πράγματα ας ξεκινήσουμε σιγά σιγά.

HTML5, next stop!

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

CSS 3, τι καινούργιο;

Δημοσίευση από korgr » 31 Μαρ 2010 19:54

Και ο επομενος εφιαλτης με την προς τα πισω συμβατοτητα αναφωνησε:
Let the War Begin! :lol:

Άβαταρ μέλους
loxy
Δημοσιεύσεις: 208
Εγγραφή: 17 Ιούλ 2007 01:18

CSS 3, τι καινούργιο;

Δημοσίευση από loxy » 31 Μαρ 2010 20:06

Πολυ ομορφα πραγματα!
Ηρθε για να μας κανει τη ζωη πιο ευκολη,ιδιαιτερα για μας που το σχεδιαστικο κομματι, δεν το κατεχουμε και πολυ.

Αιντε και καλο διαβασμα ... :D

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

CSS 3, τι καινούργιο;

Δημοσίευση από Basilakis » 31 Μαρ 2010 20:12

@korgr επίσης προτείνω αυτό:
http://plugins.jquery.com/project/crash

:P

Άβαταρ μέλους
vcore
Δημοσιεύσεις: 354
Εγγραφή: 20 Δεκ 2003 01:19
Τοποθεσία: Crete
Επικοινωνία:

CSS 3, τι καινούργιο;

Δημοσίευση από vcore » 01 Απρ 2010 00:09

Πράγματα και θαύματα!!! Ρε εξέλιξη !!! Πολύ ενδιαφέροντα futures indeed !! :)
Easy CMS
------------
Το να ζητάς βοήθεια δεν σημαίνει ότι είσαι εξαρτημένος.

Άβαταρ μέλους
loxy
Δημοσιεύσεις: 208
Εγγραφή: 17 Ιούλ 2007 01:18

CSS 3, τι καινούργιο;

Δημοσίευση από loxy » 03 Απρ 2010 20:11

Επανερχομαι στο θεμα.
Μπορει καποιος να κανει μια εκτιμηση σχετικα με το ποτε θα μπορουν οι browsers μας, θα μπορουν εκμεταλλευτουν τις δυνατοτητες του CSS 3 ;

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

CSS 3, τι καινούργιο;

Δημοσίευση από Basilakis » 03 Απρ 2010 20:51

To thema den einai pote tha arxisoun oi browsers. To thema einai pws mporei o kathenas apo Emas na arxisei na ta xrhsimopoiei se pelatosites, dinontas ston pelath ton akrives logo xrhshs tous.

Άβαταρ μέλους
loxy
Δημοσιεύσεις: 208
Εγγραφή: 17 Ιούλ 2007 01:18

CSS 3, τι καινούργιο;

Δημοσίευση από loxy » 03 Απρ 2010 20:59

Γιατι να δωσεις "λογαριασμο" ( λιγο ακομψη φραση αλλα... ) στον πελατη για τη χρηση του CSS 3;
Ο πελατης θελει να δει το τελικο αποτελεσμα , χωρις να τον νοιαζει αν θα ειναι με τη χρηση CSS 3 ή μεσω εικονων, κατα τη γνωμη μου.
Και περα απο την σκοπια του πελατη, εμενα δεν θα με ενοιαζε αν καποια rounded corners ηταν με τη χρηση εικονων ή css ...

Άβαταρ μέλους
agrippas
Script Master
Δημοσιεύσεις: 494
Εγγραφή: 18 Ιούλ 2002 14:52
Τοποθεσία: Υπερπέραν
Επικοινωνία:

CSS 3, τι καινούργιο;

Δημοσίευση από agrippas » 03 Απρ 2010 21:01

Το CSS3 είναι δυστυχώς η μεγαλύτερη πατάτα των τελευταίων χρόνων. Και αυτό διότι όταν θα είναι ευρέως υποστηριζόμενο από τους browsers (δηλαδή τον Explorer, γιατί από τους άλλους υποστηρίζεται), τότε πια όλες οι πατέντες του (shadows, corners, κλπ) θα είναι ξεπερασμένες από τη μόδα και θα φαντάζουν τόσο παλιές και κιτς όσο τα marquee tags και τα <blink>.

Φυσικά γνωρίζετε όλοι ποια εταιρεία ευθύνεται για τη μη χρήση του CSS3 στο web development. Η ίδια εταιρεία (Μικροσόφτ) ανακοίνωσε ότι θα το υποστηρίζει πια, μαζί με τα svg στην έκδοση Explorer 9, που θα γίνει δημοφιλής όταν πια εμείς θα έχουμε γεράσει και όταν όλοι οι άλλοι θα είναι πάλι άλλα 10 επίπεδα πιο μπροστά.

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

CSS 3, τι καινούργιο;

Δημοσίευση από korgr » 04 Απρ 2010 12:19

agrippas έγραψε:Το CSS3 είναι δυστυχώς η μεγαλύτερη πατάτα των τελευταίων χρόνων. Και αυτό διότι όταν θα είναι ευρέως υποστηριζόμενο από τους browsers (δηλαδή τον Explorer, γιατί από τους άλλους υποστηρίζεται), τότε πια όλες οι πατέντες του (shadows, corners, κλπ) θα είναι ξεπερασμένες από τη μόδα και θα φαντάζουν τόσο παλιές και κιτς όσο τα marquee tags και τα <blink>.

Φυσικά γνωρίζετε όλοι ποια εταιρεία ευθύνεται για τη μη χρήση του CSS3 στο web development. Η ίδια εταιρεία (Μικροσόφτ) ανακοίνωσε ότι θα το υποστηρίζει πια, μαζί με τα svg στην έκδοση Explorer 9, που θα γίνει δημοφιλής όταν πια εμείς θα έχουμε γεράσει και όταν όλοι οι άλλοι θα είναι πάλι άλλα 10 επίπεδα πιο μπροστά.
Συμφωνω απολυτως!
Και με αυτο το μηνυμα αλλα και με το "σημασια εχει τι βλεπουμε στο output και οχι με ποιο τροπο εγινε". Ειδικα για θεματα συμβατοτητας για μενα παντα θα ισχυει το "η πατεντα θα ειναι παντα αποδεκτη αν αυτο εξυπηρετει την οσο το δυνατον μεγαλυτερη συμβατοτητα". Γιατι η ασυμβατοτητα "φαινεται" σε αντιθεση με τον τροπο υλοποιησης που αφορα εμας του επαγγελματος που κανουμε view source με σκοπο κυριως να καυτηριασουμε τη δουλεια του αλλου. Εγω βλεπω τα παντα πλεον σαν πελατης (= κυριως αδαης ή μεσος χρηστης) και οχι σαν web devigner :D

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

CSS 3, τι καινούργιο;

Δημοσίευση από Basilakis » 04 Απρ 2010 15:35

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

<script type="text/javascript" src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript">
$&#40;function&#40;&#41;&#123;
	$&#40;'.box'&#41;.corners&#40;'10px'&#41;;
&#125;&#41;;
</script>

<div class="box">
	<!--CONTENT-->
</div>


θα μπορούσες να κάνεις για παράδειγμα τα rounder corners και έτσι...

παρόλα αυτά, το border-radius σου δίνει μια άλλη ευκολία, έναν πολύ καλύτερα γραμμένο αλλά και ποίο γρήγορο κώδικα...

Άβαταρ μέλους
Maradonna
Δημοσιεύσεις: 135
Εγγραφή: 07 Ιουν 2007 03:19
Τοποθεσία: Αθήνα
Επικοινωνία:

CSS 3, τι καινούργιο;

Δημοσίευση από Maradonna » 22 Απρ 2010 02:10

Να αγιάσει το silicon valey!!
Είναι πολύ χρήσιμες αλλαγές γιατι μας λύνουν τα χέρια σε κάποια θέματα.

Πολυ ομορφη παρουσίαση βασιλάκης
Εικόνα
Code is poetry

Άβαταρ μέλους
pasxal
Δημοσιεύσεις: 83
Εγγραφή: 16 Απρ 2010 04:39

CSS 3, τι καινούργιο;

Δημοσίευση από pasxal » 27 Απρ 2010 02:55

Είδα κάποια στοιχεία εδώ που μου άρεσαν και τα πρόσθεσα σε ένα site που φτιάχνω.
Το ερώτημα είναι κατα πόσον θεωρείται καλό από άποψη σχεδίασης να χρησιμοποιώ ένα background που προέκυψε από το rendering σε safari για να φαίνεται ίδιο αποτέλεσμα στον μικρομαλακό.
Κάτι σαν να χρησιμοποιώ psd μόνο για τον ie μου φαίνεται.
Βασικά είμαι πολύ νέος στο άθλημα και ήθελα να ακούσα μια άποψη.

omorfipoli
Δημοσιεύσεις: 19
Εγγραφή: 22 Οκτ 2009 15:29
Τοποθεσία: αθήνα
Επικοινωνία:

CSS 3, τι καινούργιο;

Δημοσίευση από omorfipoli » 10 Μάιος 2010 13:10

Όσο εμείς τα μαθάινουμε, αυτοί τα αλλάζουνε.... χαχ αχ αχ αχα χα χα
διαβάστε μας, http://www.omorfipoli.com

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

CSS 3, τι καινούργιο;

Δημοσίευση από korgr » 06 Ιουν 2010 02:36

Μια και μιλησαμε για css rounded corners σ' αυτο το θεμα, να προσθεσω ενα υπεροχο link να τα εχουμε συγκεντρωμενα:
http://jonraasch.com/blog/css-rounded-c ... l-browsers

Δοκιμασμενο! :wink:

Απάντηση

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

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

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