Text Styling

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

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

Απάντηση
Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13310
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Text Styling

Δημοσίευση από EneMe » 17 Σεπ 2009 13:23

Χρησιμοποιώ css για να εμφανίσω τον τίτλο ενός site πάνω στο header image, αντί για logo.

Το πρόβλημα είναι ότι φαίνεται λίγο άσχημο, η γραμματοσειρά "pixelιάζει" στα όριά της.

Τι πρέπει να προσθέσω στο css ώστε να έχω μια καλύτερη εμφάνιση τύπου "antialias";
Επίσης μπορώ να ορίσω ποσοστό διαφάνειας για να αχνοφαίνεται η εικόνα από πίσω;
Τι άλλο εναλλακτικό αυτών προτείνετε;

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Text Styling

Δημοσίευση από dimsis » 17 Σεπ 2009 13:27

Σώσε την png-24 με transparency.
Για διαφάνεια πρόσθεσε εκεί που έχεις την εικόνα π.χ. στο .logo { ..:
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;

όπου οι τιμές 70, .07 παίζουν αναλόγως τις ανάγκες σου...

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13310
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Text Styling

Δημοσίευση από EneMe » 17 Σεπ 2009 13:31

Επειδή δεν έχω καταφέρει ποτέ να κάνω ένα png με partial transparency* να δουλέψει σωστά, το αποφεύγω...

Θα ήθελα να το κάνω με css, τουλάχιστον η συνολική ημιδιαφάνεια γίνεται, το έχω δει, απλά δεν ξέρω το πώς!

*αναφέρομαι στα όρια των γραμμάτων.

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Text Styling

Δημοσίευση από dimsis » 17 Σεπ 2009 14:23

Μάλλον πρέπει να πας σε sIFR λύση τότε:
http://dev.novemberborn.net/sifr3/svn/t ... tion/demo/

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13310
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Text Styling

Δημοσίευση από EneMe » 17 Σεπ 2009 14:49

Δοκιμάζω το text-shadow σε συνδιασμό με το opacity σε css...

Για την συμβατότητα με όλους τους browsers έχω ένα θέμα όμως!

Για το opacity βρήκα αυτό:
http://css-tricks.com/css-transparency- ... -broswers/

Για το text-shadow δεν έχω βρει κάτι...

Το σκεπτικό είναι να κάνω έντονη σκιά κεντραρισμένη στο κείμενο και να μειώσω το opacity του κειμένου.

Όποιος μπορεί να βοηθήσει υποδεικνύοντας την σύνθεση των δύο [ή να προτείνει εντελώς άλλο τρόπο σκέψης], ας μελετήσει λίγο το θέμα μου.

@dimsis
Ομολογώ ότι δεν κατάλαβα ακριβώς τι γίνεται με αυτό, αν και φαίνεται ενδιαφέρον...
Υπάρχει κάτι πιο αναλυτικό;

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Text Styling

Δημοσίευση από dimsis » 17 Σεπ 2009 15:19

Στην ουσία αυτό που κάνει είναι κάτι σαν αντικατάσταση των γραμμάτων σου σε flash fonts.
Ρίξε μια ματιά εδώ μήπως σε βοηθήσει παραπάνω:
http://el.porcupine.gr/web-design/comme ... ying_sifr/

Αν θα χρειαστείς Ελληνικά fonts δες και εδώ:
http://www.webz.gr/2008/01/30/%CE%B4%CF ... BF-%CE%B1/

Στο κανονικό site (όχι στο demo δλδ που σου δωσα πριν) έχει και πολλά examples από sites που χρησιμοποιούν την τεχνική + άλλες πληροφορίες:
http://novemberborn.net/sifr3

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

Text Styling

Δημοσίευση από korgr » 17 Σεπ 2009 15:35

Απλα επειδη προσφατα ειχαμε την συζητηση, ας παραθετουμε και μερικες φορες πραγματικα (αντι υποθετικα) παραδειγματα.
Αναφερομαι στη χρηση του flash!
Στην περιπτωση του EneMe, ενα flash header με παραμετρο flashVars τον εκαστοτε τίτλο είναι μια σωστη κατα τη γνωμη μου χρηση του Flash!

Catalyst
Δημοσιεύσεις: 195
Εγγραφή: 06 Μαρ 2009 21:40

Text Styling

Δημοσίευση από Catalyst » 17 Σεπ 2009 16:18

δοκιμασε να βαλεις στην γραμματοσειρά 1-5px περιγραμμα στο χρωμα του header image

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13310
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Text Styling

Δημοσίευση από EneMe » 17 Σεπ 2009 16:44

@dimsis
Ενδιαφέρον! Θέλει μελέτη το θέμα!

@korgr
Από flash δεν κατέχω τίποτα.

@Catalyst
Γίνεται με css αυτό; Πώς;

Το όλο θέμα αφορά header σε joomla, οπότε είναι προφανές γιατί επιμένω περισσότερο στο css... Αν δεν τα καταφέρω βέβαια...

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6237
Εγγραφή: 30 Νοέμ 2004 03:09

Text Styling

Δημοσίευση από fafos » 17 Σεπ 2009 16:45

Gia pseudoskia mporeis na paikseis me divs kai style:

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


<style type="text/css">
<!--
.div1&#123;position&#58;relative;z-index&#58;2;
  font-size &#58; 26px;
  font-family &#58; Arial;
  font-weight &#58; bold;
  color &#58; black;
&#125;
.div2&#123;position&#58;absolute;z-index&#58;1;left&#58;-1px;top&#58;-1px;
  font-size &#58; 26px;
  font-family &#58; Arial;
  font-weight &#58; bold;
  color &#58; red;
&#125;
-->
</style>
                        <div class="div1">O Fafos einai Theos
                        <div class="div2">O Fafos einai Theos</div>
                        </div>

Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Catalyst
Δημοσιεύσεις: 195
Εγγραφή: 06 Μαρ 2009 21:40

Text Styling

Δημοσίευση από Catalyst » 17 Σεπ 2009 18:21

EneMe έγραψε: @Catalyst
Γίνεται με css αυτό; Πώς;
αστο! βλακεια μου αλλο καταλαβα :crash:

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13310
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Text Styling

Δημοσίευση από EneMe » 17 Σεπ 2009 20:16

Έκανα δοκιμές όπως αυτό:

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

	filter&#58;alpha&#40;opacity=80&#41;;
	moz-opacity&#58;0.8;
	khtml-opacity&#58; 0.8;
	opacity&#58; 0.8;
	text-shadow&#58; 3px 3px 20px #fff
Στον firefox κάτι γίνεται, μπορείς να κάνεις παιχνίδι, αλλά σε οποιονδήποτε άλλο browser, είναι για κλάμματα...

Δεν το παρατάω, θα δω τα διάφορα hacks που προτείνονται σε διάφορα sites...

Θα δω όμως και πιο σοβαρά την πρόταση του dimsis...

Για καθαρό flash δεν το σκέφτομαι, είναι too much...

Θα επανέλθω...

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6237
Εγγραφή: 30 Νοέμ 2004 03:09

Text Styling

Δημοσίευση από fafos » 17 Σεπ 2009 20:59

EneMe έγραψε:Έκανα δοκιμές όπως αυτό:

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

	filter&#58;alpha&#40;opacity=80&#41;;
	moz-opacity&#58;0.8;
	khtml-opacity&#58; 0.8;
	opacity&#58; 0.8;
	text-shadow&#58; 3px 3px 20px #fff
Στον firefox κάτι γίνεται, μπορείς να κάνεις παιχνίδι, αλλά σε οποιονδήποτε άλλο browser, είναι για κλάμματα...

Δεν το παρατάω, θα δω τα διάφορα hacks που προτείνονται σε διάφορα sites...

Θα δω όμως και πιο σοβαρά την πρόταση του dimsis...

Για καθαρό flash δεν το σκέφτομαι, είναι too much...

Θα επανέλθω...
emena douleuei teleia se olous tous browsers... esy mallon to exeis se elements me allo style (p.x. text-algin: center) pou sto halane..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13310
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Text Styling

Δημοσίευση από EneMe » 17 Σεπ 2009 21:15

Εννοείται αυτό! Για joomla μιλάμε!
Δεν δίνω το css, αλλά ρίξε μια ματιά στην δομή:

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

<body>
<div id="mainout">
<div class="header">
<h1><a href="/">ΕΔΩ ΕΙΜΑΣΤΕ!
κλπ
κλπ
κλπ
Τον κώδικα τον βάζω στο σημείο του css που μορφοποιεί το h1. Περικλύεται όμως μέσα στο header και κατά σειρά στο mainout.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6237
Εγγραφή: 30 Νοέμ 2004 03:09

Text Styling

Δημοσίευση από fafos » 17 Σεπ 2009 21:59

ta <h*> elements den goustaroun alla elements opos ta divs mesa tous.. etsi isos sou doulepsei:

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

<div class="div1">
<h1>O Fafos einai Theos</h1>
<div class="div2">
<h1>O Fafos einai Theos</h1>
</div>
</div>
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Απάντηση

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

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

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