- Toto téma obsahuje 36 odpovedí, 8 hlasov, a bola naposledny upravená pred 10 years, 8 months od
.
-
Príspevky
-
Viem, že určite je takých programov veľa, preto sa pýtam na konkrétne skúsenosti:
(uvediem príklad): chcem si spraviť tlačítko na použitie na webovej stránke. Dajme tomu, že mám 64×64 ikonku a chcem vytvoriť tlačítko o rozmere 300×64. Tá ikonka by bola úplne nalavo a zvyšok tlačítka by tvoril nápis (povedzme KONTAKT), ktorý by v rámci volnej časti tlačítka (236×64) presne v strede a ten nápis by mal nejaké to (jednofarebné) pozadie.
Tlačítka chcem mať ako PNG
THX
CSS3, co viac k tomu dodat. :) Ikonu ako svg a mas to.
Od zaciatku zle. Predne, muselo by to byt nieco velmi specialne, aby si to neurobil cez CSS, cele.
Ikona v tlacitku moze byt svg symbol umiestneny v jednom velikanskom svg „sprite“‚. So spajanim jednotlivych ikon do spritu pomoze gulp/grunt a prislusny plugin.Vyhoda – obrovska modularita riesenia, plna responzivnost bez ohladu na rozlisenie. Moznost kedykolvek zmenit vyzor, vratane ofarbenia svg ikony ako chces a s svg @media queries aj plne zjednodusovanie grafiky pre mensie velkosti (povedzme pri malej velkosti taky detail nepotrebujes).
Ikony najdes tu:
http://www.flaticon.com
http://iconmelon.comPripadne ako font icon (ie 8 a android 2.x compatible):
fontello.comS automatickym prevodom svg do fontov pre fallback (pomocou modernizr) pomoze opat gulp/grunt.
A takto nejak sa to robi. Koou navodov najdes trebars na css-tricks.com
Zabudni na png a kadejake somariny. Neflexibilne, tazkopadne, nepouzitelne na responsive design.
https://itunes.apple.com/sk/app/css3-buttonbuilder/id591485692?mt=12
napr. toto je v AppStore, moje znalosti mi neumožnuju, aby som to komplet zvladol „z hlavy“
Na tlacitka potrebujes jedine element a don vnoreny svg symbol.
Ako:
Nastylovat jednou farbou, definovat ako display: inline-block, pripadne pridat zaoblene rohy cez border-radius.
Brnkacka, responzivne, flat tlacidlo za par chvilok. Pri vyuziti cisto classov mas nieco, co mozes modifikovat do zblbnutia, opakovat na webe aby si sa neopakoval s kodenim atd.
Na nejake gradienty sa vyprdni, flat.
A bez png usetris kvantum http reuqestov na server, takze stranka sa bude nacitavat vyrazne rychlejsie.
K tomu css transitions a si vybaveny bez specialnych hovadin a software. Staci textovy editor a illustrator.mám sa čo učiť :-D
ten Illustrator je moc drahý :-(
stačí mi základ
teraz mám ako ten textový editor Coda 2 a FTP klient mám tiež. Čo všetko by som si mal ešte zohnat?
nič profesionálne, proste ako home hobby :-)
zo mňa dobrý kóder nebude, som vizuálny (nie matematický) typ
https://itunes.apple.com/sk/app/buttons/id466445819?mt=12
to, čo viem, som sa učil čítaním zdrojákov. Stojí tento program za niečo?
Nestojí. Netreba ti žiadny grafický program. V dnešnej dobe 90% tlačítok, ktoré na internete vidíš nie sú obrázky. Sú „nakreslené“ cez tzv. kaskádové štýly – CSS.
Ak CSS neovládaš, na internete je veľa generátorov toho kódu.
Ja používam napríklad toto: http://buttonoptimizer.com/Lukas, tiez som vizualny typ, tiez musim vidiet ako sa co robi aby mi to bolo uplne jasne. Skusim nieco pripravit a hodim Ti link.
Jozef: toto nemas pravdu „A bez png usetris kvantum http reuqestov na server, takze stranka sa bude nacitavat vyrazne rychlejsie.“
porovnaj si ikonu v svg a png (napr 64×64) a zistis ze png ma menej bytov (zalezi aj od zlozitosti ikony – cim zlozitost ikonky je v neprospech svg). a este ak vytvoris sprite z viacerych tak budes mat jeden request a menej kb ako pri svg. a plus to co si pisal, ze automaticky prevod na font. to je sice pekne, len fonty sa nevykresluju vsade rovnako + musis stahovat font + k nemu prisluchajuce css.
je to dobre riesenie, a urcite to zachvilu nahradi png-cka ale nie je je to dokonale a zalezi skor od konkretneho pripadu ze ci je lepsie svg alebo png. a hlavne kym este treba robit webky pre ie8 alebo nebodaj pre ie7.
kazdopadne suhlasim s tym co tu bolo pisane – button sa nerobi ako obrazok, jedine ikonku do neho. takze viac ako Moj button nepotrebujes. a v css vlozis ikonku bud ako background alebo pomocou :before/:after
Hatto, samozrejme, ze narocnost vektorov stupa, ak vyrabas hovadiny s tienikmi, komplikovanymi (extremne) tvarmi atd., alev porovnani s png to ma obrovske vyhody. Sorry, SVG je tu od roku 98, snad by sa patrilo ho aj zacat pouzivat prave na tieto ucely.
Vzdy je mozno pouzit icon font prednostne, hlavne po tom, ako sa Chrome pre Windows uz naucil pisma vykreslovat ako-tak pouzitelne. Icon font ma ale svoje limity. Inak stahujes tiez len 1 font subor (1 request) s malym objemom dat (pad desiatok kB), navyse velmi dobre gzipovatelne na serveri.
Prisluchajuce Css mas vo svojom skomprimovanom min.css subore, pricom rozpis @font-face robis do parcialneho suboru cez mixin v Scss/Sass, Less alebo whatever.
Samozrejme mas pravdu s moznym zlym vykreslovanim (hlavne IE 8 a Opera mini), ale ruku na srdce – seriously?Png uz vazne nie. Flexibilta je velmi slaba, responzivita = velke subory + horsia skalovatelnost bitmapy a v pripade flat ikon datove uspory nie su nic extra.
Kazdopadne ak ozelieme kompatibilitu s primitivnymi browsermi (aj toto sa da poriesit gulp/grunt prevodom do PNG+Modernizr, ked nie icon font) sme vybaveni.takže, tu je screenshot od bratranca: http://www.stanislavknopp.net//files/141616516.png
prečo je ten web taký úzky?
(pozn.: z menu ide len tlačítko Domov, presmeruje na google.sk)
uzky je preto, lebo nema dostatocne mnozstvo obsahu. Sirka tlacitok je dana textom v nich, ak ju chces vacsiu, tak len pouzit velky padding, alebo flexbox.
Obsah dole (zemegula) ma proste tak definovany rozmer samotneho obrazku.
Proste tu plochu nema co vykryt preto to je take uzke :)Vzasade nic nedefinovat v pixeloch, ale percentach. A neuzatvarat web stranku do nejakeho chlieva s pixelovo urcenou sirkou, to je picovina.
chces to mat na celu obrazovku ci ako?
lebo si dal max-width – to znamena ze maximalne bude na 100, inak bude mat svoju originalnu velkost ten obrazokMusis classu .earth definovat ako width: 100%, alebo menej, ale v percentach. Na to ale nemas rozlisenie obrazku dostatocne.
Takisto, obidva
, ktore obaluju obrazok aj text (vitajte) mozes odstranit, su tam nadbytocne. To same plati o .block-menu_main, ktory obaluje menu 2x.Hlavnu navigaciu by som urcite dal do
- Musíte byť prihlásený, aby ste mohli odpovedať na túto tému.