Menu Chiudi

Esperimenti con il CSS

Avrete notato che oggi è spuntato un nuovo “header” su pollycoke :) Oltre a quello sto facendo alcuni esperimenti con i caratteri, sul mio Epiphany si vedono benissimo e mi piacciono molto di più adesso:

pollycss-thu.png

Ciò non toglie che alcuni potrebbero avere problemi di visualizzazione (grazie GS Defender!) con altri browser o sistemi operativi. Per favore segnalatemi eventuali noie e se siete ferrati in CSS magari datemi qualche dritta ;)

102 commenti

  1. piplos

    Ehm… non per guastare l’atmosfera… ma i caratteri mi sembrano un po troppo “alti e magri”.
    Comunque per l’header va molto meglio adesso! :)

  2. Pythagoreion

    L’header è fantastico :D
    I caratteri io non li vedo poi così stretti in realtà, comunque sì son molto “alti”, ma non mi danno fastidio

  3. piplos

    Felipe, prova a ridurre solo il valore “line-height“! Ho scoperto che i caratteri sono a posto (insomma!) è il valore dell’altezza delle linee che è un tantino esagerato, di conseguenza sembra che le pagine siano lunghe… :D

  4. piplos

    Da correggere la frase “Ho scoperto che…” con un più opportuno “Ho notato che…” -.-

    Scusatemi per il flood. -.-“

  5. *Gian*

    Bell’header…i caratteri sono belli, anche se dopo un po’ che leggo mi pare siano troppo grandi.L’impressione è proprio quella rilevata da Piplos #6

  6. Pawz

    Anche secondo me i caratteri sono troppo grandi, sembrano quasi in “grassetto” e con firefox non hanno la stessa resa che hanno con il tuo epiphany

  7. EnricoTuxMind

    felipe fanno abbastanza venire il mal di testa i caratteri..abbassano la vista di 3 gradi a botta :-(

    Mentre l’header è fantastico complimenti, l’hai fatto tu a manina con la penna grafica ?

    Io cambierei un attimo i caratteri comunque ;-)

  8. lcip

    I font vanno bene ma un po’ troppo alti per i miei gusti,
    per quanto riguarda l’header io lo distanzierei maggiormente rispetto al menù.
    Continua così, rinnovarsi è sempre buona norma.
    Tutto ciò con konqueror, con lynx tutto perfetto hehe!

  9. ludo

    Per chi non usa l’antialias come il sottoscritto, i font sono semplicemente inguardabili. Ma che male c’è a usare un classico Verdana/Arial/Georgia? :)

  10. Larry

    L’header è davvero bellino! Il font non mi piace un gran che. Ho provato sia da Ubu+Firefox che da Win+IE7 :P e non ci sono grosse differenze nella visualizzazione.

  11. fede

    ciao…

    con iceweasel si vedono come firefox..

    facendo un pò gli “stufosi” il font-family che stai usando è:

    “DejaVu Sans Condensed”, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, Arial, Sans-Serif;

    i primi tre mi pare vengano presi dai brwser sotto linux…mentre con win credo che i browser prendano verdana…o arial…

    per la poca esperienza che ho in materia css ^^ sec me per evitare rotture di fonts….è meglio tagliare la testa al toro e andare di:

    font-family:Verdana, sans-serif;

    e sei tranquillo col 99% dei browser…

    p.s. se ritrovo un bel link dove spiegava tutte le menate della visibilità dei fonts ecc..ecc.. te lo posto…

    ciao ciao

  12. Xander

    Se mi spieghi come ottenere la tua risoluzione dei font a me van ben, uso già il DejaVu Condensed..

  13. piplos

    Concordo con Fede… meglio un sano “Verdana, Sans-serif“, oppure ancora meglio “‘Lucida Grande’, Verdana, Arial, Sans-Serif“, la stessa famiglia di font usata dal mio blog :)

  14. fede

    giusto per precisare…

    io ritengo che la family “Verdana, Sans-serif” sia la + indicata per i testi e i contenuti delle pagine…nei menu e nelle altre aree di una pagina, poi, ci si può anche sbizzarrire con i fonts…!!

    ciao ciao

  15. Merlin

    bha, a me sembra tutto decisamente più leggibile. soprattutto il menu di navigazione destro ne ha avuto particolare giovamento.
    poi si sa i gusti…

    firefox su ubuntu edgy

  16. Dzamir

    Il menù a destra è più leggibile, ma il contenuto dei post adesso sembra deformato in verticale e gira la testa a leggere!

  17. Zoin

    Ubuntu edgy, firefox autohinter attivato, gnome con antialiasing rgba e hinting full.
    Sia con epiphany che con firefox pessimo rendering del font.. identico a 15. Roberto…

  18. Sofisma

    Bello il nuovo “header”.

    Con Firefox caratteri a me vanno bene così :) con risoluzione 1600×900 su monitor LCD da 20″

    bye

  19. Gasolino

    sembra che firefox (almeno il 2.0) renda il font con una dimensione leggermente maggiore rispetto ad epiphany (?!?). comunque se si imposta la dimensione di default dei caratteri a 14pt anziché 16pt (su firefox) il risultato è pressoché identico.

    il carattere è troppo alto e stretto, non è adatto ai contenuti… necessita di un diverso rapporto d’aspetto ;-) (come sono tecnico…) nei CSS c’è modo di indicare la larghezza dei singoli caratteri, dovrebbe essere ‘font-stretch’, ma non so quanto sia supportata. cmq ti indico questo link (anche se credo tu lo conosca…):
    http://www.w3.org/TR/2002/WD-CSS21-20020802/
    c’è una carrellata delle opzioni esistenti nei CSS e come si usano…

  20. Roberto

    Allora… Sulla mia linuxbox autohinter e hinstyle sono impostato correttamente. Come ha scritto fede @21 è proprio il font a non essere azzeccato (in ogni caso “de gustibus non disputanda est” ;-), anche se il fallback impostato su “verdana” e “sans serif” evita grosse complicazioni con gli altri sistemi operativi.

    CiauZ e buon lavoro con i css.

  21. anonimo sganassa

    apparte l’interlinea troppo grande (imho) va tutto bene.
    piccolu bug sul mio ff: le scritte “COMPLETO” e “COMMENTI” dei 2 link ai feeds in basso a destra inizia sovrapposte all’icona.
    hader bello!!!

  22. sito

    Concordo con anonimo sganassa e devo dire che ho pigiato + volte F5 per ricaricare la pagina pensando che firefox avesse sbagliato nel caricare il font giusto, poi ho letto quì e mi son accorto che non era un problema mio, carattere troppo allungato e stretto.

  23. edger

    nella zona con la casella “search” il tasto “GO” viene visualizzato nella riga sottostante la casella, forse un problema di CSS?
    (firefox 2 su win)

  24. giovanni

    A me piace e ci vedo benissimo anche con questi caratteri. Nessun problema di visualizzazione (FF 2.0.0.2).

    Ciao!

  25. giovanni

    Tra l’altro felipe ha chiesto se il CSS va bene, non come vogliamo i caratteri… Non voglio far polemica, ma se sul vostro sito capitasse uno che vi dice “Ciao, i caratteri che a te piacciono a me fanno schifo, cambiali.” Cosa rispondete ?

    Ovviamente questa è una mia opinione.

    Ciao

  26. naygiai

    konqueror su kubuntu, caratteri troppo piccoli, era molto meglio prima.
    l’header è bella, felipe ritorna con i caratteri di prima :-(

  27. felipe

    @tutti:
    Grazie per i commenti!

    Per quanto riguarda i caratteri: a me piacciono molto e piacciono anche con quell’antialias molto accentuato. Vedrò di sistemare l’interlinea di usare quante più accortezze possibili, ma l’idea di fondo sarebbe quella. Se però non dovessero proprio piacere a nessuno o dovessero procurare mal di testa e acidità di stomaco, rimetto quelli vecchi che sono un po’ più tristi ma collaudati.

    Facciamo una prova per un paio di giorni, nel frattempo ci lavoro su e se qualcuno vuole darmi qualche altro consiglio, ben venga :) So che c’è qualche lettore abbastanza in gamba con web publishing e tutto quello che ci gira attorno.

  28. ZeD

    ah, già che sei in vena di cambiamenti, non puoi, per piacere, allargare l’intero sito? Non pretendo un layout liquido (oramai c’ho rinunciato a chiederlo alla maggior parte dei bloggers) ma almeno che possa utilizzare la maggior parte dei 1024 pixel di larghezza del mio monitor.

    Ah, e i caratteri sono inguardabili. Se proprio non vuoi cambiare il font, almeno imposta una grandezza maggiore.

  29. piplos

    Io credo che basterebbe diminuire il valore dell’interlinea (line-height) e di appena 1px la grandezza dei caratteri, ma poi bisogna vedere come viene, mica già con “una sola botta” stai a posto, bisogna fare diverse prove con il CSS…

  30. Gabriele

    Io userei un ancor migliore : verdana, arial, helvetica, sans-serif.
    Davvero Felipe dopo pochi minuti danno noie alla vista!

    P.S.
    Se hai bisogno di aiuto sono disponibile, ho una ditta di Web Design e con i CSS ci lotto quasi tutti i giorni :)

  31. Anonimo

    @giovanni
    non si tratta di gusti, ma di fruibilità del sito…io ora nella home vedo parecchie parole con caratteri accavallati fra di loro e sot usando iceweasel :)

  32. Gabriele

    @Roberto
    Io vedo i fonts esattamente come te, ed è decisamente fastidioso e stancante leggere più di 2 righe di testo in quelle condizioni :(

  33. felipe

    @caratteri:
    Non capisco come mai il testo del div #content non prenda le impostazioni relative a line-height, che invece funziona nel #widget_text “Pollycoke Legalese”. In ogni caso come ripetuto poco fa: se proprio non piace o da fastidio torniamo ai caratteri di prima :)

    @layout-liquido:
    Se ci fosse un modo sano di limitare dimensioni massima e minima a valori definiti, non avrei problemi a trasformare il tema in liquido. La bellezza di questo tema comincia a svanire se si stravolgono le impostazioni

  34. anonimo sganassa

    prova con:
    #content p {
    margin:12px 0;
    line-height:1.2em;
    }

    P.S.
    quando decideranno di fare una statua al sig. Chris (webdevelopertoolbar) Pederick???

  35. loopback

    Felipe, ma non andava bene come era una volta? Io cosi’ non riesco proprio piu’ a leggerlo questo blog. Ieri i font erano troppo alti e le ‘i’ sparivano annegate nelle lettere vicine, adesso l’altezza va bene, ma le lettere sembrano distanti tra loro…

  36. fede

    ciao Felipe…una domandina…

    non hai mai pensato di prendere uno spazio web tuo così da poter gestire tutto come ti pare senza dover rimanere legato a wordpress ??

    sec me…considerando il numero di utenti che ti seguono e che sarebbero disposti a darti una mano, potrebbe venire fuori qualche cosa di ottimo !!!

    ciao ciao

  37. felipe

    @tutti:
    Grazie per le dritte e le critiche. Ecco cosa ho ulteriormente migliorato:

    * I caratteri dei post sono più scuri e quindi più leggibili (come ho fatto a non pensarci prima?)
    * Grazie ad anonimo sganassa e alla sua webdevelopertoolbar adesso l’interlinea è uguale a quella di prima
    * I design è finalmente fluido ma con restrizioni di larghezza minima (730px) e massima (1050px). Questo aiuterà chi legge pollycoke da dispositivi esotici con schermo piccolo e allo stesso modo mega LCD, ma senza stravolgere il tema :)

    Io sono quasi soddisfatto. Per favore fatemi sapere se adesso va meglio e notificatemi di qualsiasi stranezza :)

  38. fede

    basta smanettare col css felipe !!! :)

    ^__^

    anche a me piace di + così !!

    consiglio…

    metti background-repeat:no-repeat; nella div dell’header così l’immagine di sfondo non si ripete !!

    ciao ciao

  39. fede

    ah…. ^__^

    forse volevi far visualizzare il tappo hai vinto con la larghezza massima ^__^

    eheheh carino !!

    sorry..prima vedevo ripetersi pollycoke !!

  40. piplos

    @fede: l’immagine è 1050 di larghezza, la larghezza massima della struttura (come ha detto felipe) è di 1050px, credo che non serva mettere un no-repeat…
    Per i font e tutte le altre cose vanno benissimo adesso, unica eccezione è la barra di sottoscrizione feed, l’ultima voce della sidebar, i 2 testi “Completo” e “Commenti” sono sopra le 2 immagini dei feed.

  41. piplos

    @fede: l’immagine è 1050 di larghezza, la larghezza massima della struttura (come ha detto felipe) è di 1050px, credo che non serva mettere un no-repeat…

    Per i font e tutte le altre cose vanno benissimo adesso, unica eccezione è la barra di sottoscrizione feed, l’ultima voce della sidebar, i 2 testi “Completo” e “Commenti” sono sopra le 2 immagini dei feed.

  42. rope

    ehi no aiuto mi associo ai NO: è un bel font come stile però è sempre sfuocato.. io uso il solito bitstream vera sans per intenderci, e con l’antialias al massimo è sempre bello in griglia.

    Peccato perché mi piace molto come stile, bello arrotondato

  43. fede

    @piplos

    hai ragione sorry….prima vedevo ripetersi la scritta pollycoke !! non avevo fatto caso al tappo hai vinto ;)

    si è perso un pezzo di post prima… :(

    non che ce ne freghi molto dei winzozzari :) però le dichiarazioni min-width e max-width da IE6 in giù non vengono considerate…

    ciao ciao

  44. Rino

    Per quel che mi riguarda la leggibilità è migliorata moltissimo. Con Epiphany (in particolare) o Firefox le pagine del tuo blog adesso sono molto più agevoli da consultare. Complimenti!

  45. Bl@ster

    Non so come, ma il blog adesso risulta più leggero (parlo in termini di caricamento)… complimenti per l’header, è stata la prima cosa che ho visto, e la prima su cui ho sbavato… comunque gran bello style! Da Firefox vedo ancora le maiuscole un po’ strane (tipo la O più piccola della M) ma da Epiphany tutto a posto. Ancora Complimenti.

  46. volevoessere

    Hai sacrificato la leggibilità con Opera. Non sarà un software libero, ma manda su errori sul nuovo css e i font sembrano nascosti dietro un vetro smerigliato, o uno sputo.
    Forse _questo fatto_ non aiuta la leggibilità :p

  47. Filogamo

    Adesso su swiftfox i post si vedono bene, ma i commenti danno ancora l’idea di avere un paio di occhiali troppo potenti..

  48. rope

    da me il contrario :) ora i commenti hanno un ottimo font. un po’ meno i post: troppo grande e sfuocato; e proprio ora noto il testo dei campi per postare i commenti: più piccolo degli altri e comunque sfuocato.

    ps: firefox 2 su edgy

  49. riva.dani

    Per cause di forza maggiore (SPSS) sono costretto a postarvi da Windows XP con Firefox 2, e devo dire che il risultato è ottimo! Per ora complimenti, poi più tardi riavvio e vedo come viene con Edgy e Firefox. ;)

  50. os3ga

    Sinteticamente:
    – Il menu copre la testata. (lo faceva anche prima eh).
    – COMPLETO e COMMENTI coprono le icone dei feed. (come anonimosganassa e piplos)
    vedi immagine:
    http://img518.imageshack.us/img518/4364/pollycsswh5.jpg

    – search e go ora sono sulla stessa riga (bene!)
    – ma non dovrebbe essere cerca e vai? huh?
    – la larghezza della colonna principale ora è molto meglio (bene!)
    – la data (24 Marzo 2007 @ 21:22) potrebbe stare su una sola riga altrimenti possono restare numeri orfani tipo il 24.
    – la scritta pollycoke a mano è più umana (bene!)
    – i caratteri alti e stretti rallentano (affaticano?) la lettura.

    Ho firefox 2.0.0.2 su Ubuntu edgy con dimensione minima carattere a 24.

    Ps: Piccola considerazione. Molte persone tengono la dimensione minima del carattere più alta rispetto ai valori di default. Chi come me per non affaticare la vista ma ci sono anche 3.000.000 di persone solo in Italia che hanno il diabete e fanno molta fatica coi caratteri piccoli. Il risultato è che molti siti al solo aumento della dimensione dei caratteri risultano stravolti e a volte inutilizzabili.

  51. cga

    fello con i nuovi font mi bruciano parecchio gli occhi.. sono deleteri

    ps: bello il tappo con “Hai Vinto!” mi ha fatto spaccaare di risa

  52. felipe

    @tutti:

    * icone dei feed sovrapposte: questo è un bug del tema originale, il problema c’era anche prima e francamente per adesso non mi va di pensarci, anche perché c’è tutto un intreccio di css

    * tipo di caratere: personalmente mi piace molto, ma a questo punto ci sono semplicemente due opinioni opposte, non so se abbia fondamento la prospettiva che questo carattere farà venire l’emicrania ad una generazione di pinguini, nel dubbio aspettiamo e usiamoli per un paio di giorni, poi decidiamo :)

    Se proprio non si trova una soluzione, una via di mezzo potrebbe essere quella di riservare il nuovo carattere al corpo dei post, e riportare quelli vecchi per tutto il resto, che ne dite?

    * dimensioni dei caratteri: c’è chi dice che i commenti vanno bene e i post no, e chi sostiene il contrario. Potrei portarli tutti a dimensioni più simili tra loro, oppure adottare la soluzione del punto precedente.

    * search/go: molti elementi (html) non posso controllarli, e purtroppo restano in inglese

    Insomma, secondo me ci stiamo avvicinando… o forse mi sto solo stancando di stare appresso al css :D

  53. frank95com

    L’header è molto bello, quell’altro era più serio.

    Per quanto riguarda i caratteri li vedo benissimo sia con Epiphany sia con Galeon ed io ho anche qualche problemino di vista (scusate, ho detto una parolaccia:D).

    Forse sarà anche perché ho lo schermo wide. Boh.

  54. left

    terrificanti i caratteri, mi si incrocia facilmente la vista :|

    ma quel tappo con scritto “hai vinto” c’e sempre stato? ._.

  55. felipe

    @kpaolo:
    Che io sappia non c’è modo di specificare favicon tramite css :/

    @tutti:
    Come anticipavo nel commento #79, ho riportato i caratteri di commenti e sidebar a quelli originali del tema regulus, lasciando i nuovi solo per i post.

    Spero di aver raggiunto una specie di compromesso accettabile :)

  56. Vanni Zatta

    vorrei segnalarvi che la stampa degli articoli non funziona. con firefox 2 (su windows) viene stampata solo 1 pagina ed il resto è bianco. Se mi dite che è solo un problema mio allora ricontrollo il tutto…
    ciao, Vanni

  57. j

    ciao felipe, a me ieri risultava tutto piacevole e leggibile. ho visto che hai rimpicciolito la sidebar ma si è troncato il tappo con hai vinto, leggo solo “ha vint”
    (edgy-firefox). ciao!

  58. dadokkio

    allora..x la favicon linko un tutorial trovato in giro http://www.sergejpinka.it/2007/02/06/aggiungere-una-favicon-ad-un-blog-wordpress/

    per il resto a me così piace il sito piace..lo leggo bene e anche l’header (a parte il tappo “hai vinto”) lo trovo più gradevole..
    per giocare con i css ti invito a provare http://browsershots.org/ che, dato un elenco ti browser da testare e altre opzioni come risoluzione e presenza di plugin, ti mostra gli screenshot di come il sito appare (anche se ci mette davvero tanto)

  59. Trinità

    A me i caratteri risultano sfuocati (con firefox e con epiphany su lcd) è solo un mio problema?
    Qualche giorno fa erano molto più nitidi e belli

  60. Postman

    so Ubuntu Edgy, ho tolto l’antialiasing dalle font con dimensione minore di 12, e con il nuovo css vedo il testo del blog completamente sgranato e con delle scalettature orribili.

    Non credo di essere il solo ad aver tolto l’antialiasing alle font con dimensione piccola,quindi vedi se puoi fare qualcosa con il nuovo css. Grazie

  61. Hi

    Uso Ubuntu Dapper ed ho dei problemi con opera si legge proprio male(come se non ci fosse l’antialiasing) mentre con Firefox tutto a posto. Ciao!

  62. bluvega

    I miei complimenti Felipe! Secondo me con le modifiche fatte il sito è migliorato tantissimo. L’header va decisamente meglio rispetto a prima, è molto più elegante e l’idea della fluidità relativa la trovo ottima (complimenti a chi l’ha proposta). Io uso ubuntu con firefox e i caratteri vanno benissimo.
    L’unico appunto che potrei fare riguarda il logo “hai vinto”… la scritta è un pò sfocata e da un senso di fastidio agli occhi. Credo si possa migliorarne la definizione.

  63. Piplos

    @ Felipe: quei tre di prima (Trinità, Postman e Hi, #91-92-93) ho la nettissima sensazione che siano la stessa persona, qualche burlone, ma può darsi che esagero! ;)

  64. Chris

    @felipe: ho provato a mandare una mail all’indirizzo pollycoke@gmail.com in cui segnalavo alcuni problemi che si manifestano sul mio browser da quando è stato modificato il css della pagina ma, a due giorni dall’invio, non ho ancora ricevuto la conferma che vi sia arrivata.
    dato che ilpost è di qualche giorno fa non so se qualcuno leggerà questo commento, comunque tentar non nuoce..
    ciao e complimenti per l’ottimo lavoro.

  65. blood

    volevo segnalare dato ke siamo in tema di webdesign un programma poco noto..
    KompoZer (http://www.kompozer.net/) che nnn è altro che uan versione con qualke bugfix e aggiunta di Nvu (che è stato a quanto pare abbandonato).
    Non so e ci saranno futuri aggiornamenti di questo Kompozer..
    però gestisce i CSS molto più facilmente per esempio..
    da prova..IMO

  66. Pingback:CSS: decisione dopo 10 giorni « pollycoke :)

Rispondi

%d blogger hanno fatto clic su Mi Piace per questo:
Vai alla barra degli strumenti