2010 13. märts 2010

@ Fontface: Väljendades seda kirja vabal valikul; Kasutades WebFonts

CSS lõpule 10 aastat olemasolu sel aastal! Need, kes on olnud juba mõnda aega, teenida oma leiba (või mitte), kasutades CSS, siis võib teada, kuidas meil on näljas hea valik fonte. Isegi vähene fonts disainerid nagu need, CSS Zen Garden on kasutanud CSS taustapilte vahetada fonts elluviimisel teeme mõned õigusemõistmise oma designs. Samuti oleme püüdnud Flash / JavaScript ® hacks, et saavutada meie disain eesmärke. Mitte sugugi see on vale viis saada kiri soovime meie web designs, kuid kindlasti ei ole kõige soovitavam viisil. ja aastate web disainer, nagu mina, on täiesti tugines 10 või nii fonte oma disainilahendustele.

Viimased arengud veebi standardeid ja font formaadid võimaldavad muuta HTML teksti kirjatüübid muud kui sama vana default fonte. Comes "@ fontface" CSS decleration.

@ Fontface provids lahendus siduda tegeliku font fail ja leidke veebist. Kasutades @ fontface, saaksid kasutada fonte ilma külmutada teksti tausta pilte. Rakendamine on väga lihtne, nagu allpool näidatud, kuid nagu kõik head asjad on CON osa see, et mitte kõik brauserid toetavad singel "font tüüp". Kui te plaanite kasutada @ fontface sisse saidi vajavad läbivoolu brauseri tugi, siis on pakkuda allikatest erinevaid font-tüüpi sama.

  1. TrueType - formaat mõeldud hea välimusega ekraanile. Soovitatakse eriti Windows brauserid (Chrome).
  2. OpenType (CFF) - See formaat on parem print tööd ja ei ole alati hea välja nägema Windows.
  3. EOT - Sa pead selles formaadis, kui soovite sihtida Internet Explorer. IE ei kasuta muud formaati. Meie EOT s võiks pidada "Lite", sest nad ei suru ega domeeni piiratud.
  4. SVG - see on XML formaadis toetasid mõned brauserid, sealhulgas iPhone.
  5. WOFF - See cross-brauser, web-only font formaat on kerge (font andmed on zip pakitud) ning saab koostada kas TrueType või PostScript (CFF) piirjooni. Praegu on toetatud Firefox 3.6 +.

Kasutades @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular";
 src: url ("CalligraphyFLF.eot ');
 src: kohalik ("CalligraphyFLF"), kohalik ("CalligraphyFLF"), url ("CalligraphyFLF.woff) formaadis (" woff "), url (" CalligraphyFLF.ttf) formaadis ("truetype"), url ("CalligraphyFLF . svg # CalligraphyFLF) formaadis ("SVG");
 }
 @ Font-face {
   font-family: "Teie kirjas";
   src: url ("fonts / font_filename.eot");
   src: kohalik ("Alternatiivne nimi"), kohalik ("Alternatename")
     url ("fonts / font_filename.woff") formaadis ("woff")
     url ("fonts / font_filename.otf") formaadis ("OpenType")
     url ("fonts / font_filename.svg # font_filename") formaadis ("SVG");
   }
 h2 {font-family: "Teie kirjas", Georgia, serif;} 

Nagu näete eespool näiteks ka valitud font kirjatüüp, üks on link komplekt fonttypes sama kirjatüüpi. Seega inimesed nimetavad seda "Font Kit".
On Font Kits olemas, mis sõnaselgelt lubab sidumine CSS @ font-face vara all Lõppkasutaja litsentsileping (EULA).

Kasulik WebFont Ressursid:

  • Fondid saadaval @ font-face kinnistades wiki lehele http://webfonts.info/wiki/index.php?title=Main_Page
  • Ray Larabie . Ta on tuntud font disainer, kes on teinud sadu huvitavaid TrueType fonte vabalt kasutatavad veebis. Tema fondid on elegantne, dekoratiivsed ja mänguline.
  • Dieter Steffmann on veel üks suur font disainer. Ka tema on teinud palju ilusaid fonte kättesaadavaks kõigile kasutada.
  • Tähe pood : pakub fonts spetsiaalselt veebi kasutamiseks. Rohkem kui 30 kõige edukamad FontFont pered on nüüd saadaval Web FontFonts. FontShop on ka üksikasjalik WebFont kasutusjuhend http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  • Font Squirrel : tutvustatakse kõiki fonte, mis Font Squirrel pakub kasutamiseks @ font-face CSS kinnistades. Font Squirrel pakub muljetavaldav kogus tüübi, muudab surnud lihtne valida üks välja ja osavalt pakub "kits" - kirjatüüpi valitud, mitmes eri vormingus pakkida demo HTML & CSS, mis kasutab väga praegune @ font-face süntaks . Nad pakuvad ka võimalus teha oma @ font-face komplektid . Kui kirjatüüp, mida soovite kasutada on litsentseeritud sobivalt (need, mis tulevad arvuti ei pruugi kõik korras), generaator toodab EOT, SVG ja hei! WOFF faile.

2010 9. märts 2010

Selle kohta "Web disainerid, kes ei saa koodi"

Minu piiratud oskuste komplekt vahendeid, nagu Photoshop ja Illustrator, võin ausalt tunnistama, et ma olen parem arendaja kui ma olen disainer. Aga minu taust core (serveripoolne) arengu Java / PHP / COBOL, on olnud väga positiivne mõju minu UI arendamise oskusi. Mida ma mõtlen on, luues samas minu designs, st kui ma ei projekteerimine, ma mõtlen, kuidas disaini saab kõige paremini ümber HTML-CSS ja tehes samal ajal HTML-CSS, ma annan mõelnud backend tehnoloogia ja teha mõistlikult kindel et HTML on võimalik kergesti üle võtta XSL silmuste või PHP pikad jne

Aastate jooksul olen visanud pea edasi disainilahendusi UI disainerite kes ilmselt donot aimugi mis HTML või CSS on. Kõik need aastad olen ma mõelnud, et ma oleks küsida liiga palju, kui ma lihtsalt oodata, disainer, kes üritab shov oma "võimatu koodi" disaini alla mu kõri, mõista natuke mida tema disain oleks ümber arvesse. Mis aitaks eks?

Siis ma leidsin selle postituse täna ... Web disainerid, kes ei saa koodi ... Tänan Lord! Ma olen lihtsalt üks paljudest, kes tunnevad sama ... eespool artitle on natuke pikk Hengästynyt .. kuid tasub lugeda, iga sõna sellest.

Tänu Elliot Jay Varud ... ma tunnen kergendust!

Siin on mõned väljavõtted elliots artikkel .

Vau, mida päev! See algas üks väike piiksuma ja lõppes aruteluga, mis tundus pühkima kogu web design kogukonnas. Selgub, et mõned väga tugevad arvamused peetud teemal, kas veebidisainerid peaks olema võimalik koodi.
...
Niisiis, enne kui me sinna, lubage mul kiiresti sulgege mida ma ütlesin täna hommikul puperdama:

Ausalt, ma olen šokeeritud, et aastal 2010 ma olen ikka tulevad üle "veebidisainerid", kes ei suuda kodeerida oma designs. Mingit vabandust.

... Ma olen olnud vähe täpsem minu piiksuma. Ma rääkisin disainerid, kes ei pea isegi kõige elementaarsem HTML ja CSS oskused omakorda korter disaini tegelik kohas. Pole inimesi, kes tahtlikult ei soovi kood; need, kes ei saa. Ja ma olen ka viidata üksnes esiotsa koodi siin, muidugi on see naeruväärne mõelda, et disainerid peaksid olema hämmastav back-end programmeerijad ...

Me saame "web" kujunduse saata Illustrator, 300dpi, võimatu koodi, puudub järjekindlus / kasutatavust.
~ Amy Mahon

Läheb hilja ja mul wrap selle üles kuidagi. Ma tean, et seal on palju, kes ei nõustu minuga ja mu eesmärk on mitte solvata või häirida kedagi, kes ei saa koodi, kuid ma loodan, et mõned, mida ma olen öelnud peegeldab mõningaid punkte, mis alati tulla, kui delving arutelu.

Aasta lõpus päeval, ma ei kaota une üle, kes suudavad koodi ja kes ei saa. Ma olen lihtsalt tõeliselt üllatunud, et paljud disainerid, et puudub esiotsa oskusi, nagu ma arvasin, et see oli minevik.

Lugege ka kommentaare, seal oli umbes 320 kommentaari, nagu ma kirjutan ... nad on väärt lugeda.
Palun lugege elliots täis postitus siin .. Web disainerid, kes ei saa koodi


2010 4. märts 2010

Viies nupp teksti

Kuna nupp ja teksti on inline, nii et tekst viia end põhja nupp, tekst tundub olevat veidi alla nupp.
Kui soovite need viia tippu, siis on teil panna raadio ja teksti eraldi konteinerites nagu divs või kestab (vastavalt vajadusele) ja nad hoolitsevad viimist. Oleks lihtsam kasutada tabeli lahtrid ka oma disain lühike lubab.

See ei tundu sama igas brauseris, kui iga brauser näitab raadio veidi erinevalt, nii et seal on alati saab olema suurus küsimusi ükskõik, mida te teete.


NDK kodus | Väljendades IT | väljendamine Maitse | väljendamine Penmenship | väljendamine Awe | väljendamine Myself