CSS-kysymyksiä

Liittynyt
01.11.2016
Viestejä
8
Ajattelin, että tähän ketjuun voi kerätä pieniä css-aiheisia kysymyksiä ja vastauksia.

Itse kaipaisin apua seuraavaan ongelmaan: Minulla on html-sivu, jonka koodiin en pysty vaikuttamaan. Lisäksi on sivun ulkoasua määrittävä css-tiedosto, jota pystyn muuttamaan. Sivulla on navigointi, joka on rakennettu seuraavasti:

Koodi:
<ul>
 <li class="service"><a href="https://sivu1">Sivu 1</a></li>
 <li class="service"><a href="https://sivu2">Sivu 2</a></li>
 ...
</ul>
Eli kaikki navigointilinkit kuuluvat luokkaan .service. Kysymykseni kuuluu: pystynkö css:n avulla mitenkään muuttamaan yksittäisen linkin ulkoasua? Voiko yksittäisen linkin identifioida jotenkin tuon url:n perusteella?
 
Liittynyt
21.10.2016
Viestejä
156
Pystyy helpostikin;
Koodi:
a[href="https://sivu1"] { color: white; }
 
Viimeksi muokattu:
Liittynyt
05.11.2016
Viestejä
1 528
Vähän on vanha ketju, mutta kokeillaan osuisiko, eli onko tilanne nyt se, että en pysty tekemään staattista oikeassa kuvasuhteessa selaimen ikkunan kanssa skaalautuvaa taustakuvaa CSS:llä niin, että toimisi Edgessä, Chromessa, Safarissa ja Mozillassa +mobiiliselaimissa?

Tässä on nyt kohta pari viikkoa yritetty, eikä tuosta tule kuin paha mieli.

Tämän lisäksi haluaisin myös jollain ilveellä saada Edgen tajuamaan, että kun sisältö mahtuu ruudulle, niin ei niitä scrollipalkkeja tarvita siihen ruudulle. Tämäkin on melkoisen vittumaista saada toimimaan.

Ettei soppa olisi liian helppoa keittää, tarkoitus on siis laittaa myös tuon taustakivan päälle logokuva, joka olisi kaikilla selaimilla samalla tavalla skaalautuvassa läpinäkyvässä laatikossa.

Samoja laatikoita olisi sitten sivuston sisällä niin, että niissä olisi kuvia ja tekstiä.

Kaikki tämä siis ilman mitään javascriptiä ja pelkästään html ja css koodeilla.
 
Liittynyt
18.10.2016
Viestejä
272
Vähän on vanha ketju, mutta kokeillaan osuisiko, eli onko tilanne nyt se, että en pysty tekemään staattista oikeassa kuvasuhteessa selaimen ikkunan kanssa skaalautuvaa taustakuvaa CSS:llä niin, että toimisi Edgessä, Chromessa, Safarissa ja Mozillassa +mobiiliselaimissa?

Tässä on nyt kohta pari viikkoa yritetty, eikä tuosta tule kuin paha mieli.

Tämän lisäksi haluaisin myös jollain ilveellä saada Edgen tajuamaan, että kun sisältö mahtuu ruudulle, niin ei niitä scrollipalkkeja tarvita siihen ruudulle. Tämäkin on melkoisen vittumaista saada toimimaan.

Ettei soppa olisi liian helppoa keittää, tarkoitus on siis laittaa myös tuon taustakivan päälle logokuva, joka olisi kaikilla selaimilla samalla tavalla skaalautuvassa läpinäkyvässä laatikossa.

Samoja laatikoita olisi sitten sivuston sisällä niin, että niissä olisi kuvia ja tekstiä.

Kaikki tämä siis ilman mitään javascriptiä ja pelkästään html ja css koodeilla.
En täysin hahmottanut kysymyksenasettelua. Mutta jotain tällaistako haet: BGbVNM
 
Liittynyt
05.11.2016
Viestejä
1 528
Muuten näytti ihan hyvältä, mutta tosiaan se logokuva olisi opacity 0 ja sen ympärille/alle tuleva laatikko vaikka opacity 0.6, myös taustan tulisi skaalautua täyttämään koko selainikkuna samalla säilyttäen muotonsa.

Tsekkaan kotona toimiiko tuo koodi puukottamalla kaikilla selaimilla oikein.

Kysymys saattoi olla pienen turhautumisvitutuksen myötä hieman sekava.
 
Liittynyt
17.10.2016
Viestejä
240
Muuten näytti ihan hyvältä, mutta tosiaan se logokuva olisi opacity 0 ja sen ympärille/alle tuleva laatikko vaikka opacity 0.6, myös taustan tulisi skaalautua täyttämään koko selainikkuna samalla säilyttäen muotonsa.

Tsekkaan kotona toimiiko tuo koodi puukottamalla kaikilla selaimilla oikein.

Kysymys saattoi olla pienen turhautumisvitutuksen myötä hieman sekava.
Tuo on mahdottomuus. Jos taustakuvan kuvasuhde on vaikka 2:1, se EI VOI täyttää koko selainikkunaa säilyttäen muotonsa. Joko se täyttää koko selainikkunan ja kuva menettää muotonsa tai sitten kuvasta osa leikkautuu pois ja se täyttää selainikkunan. Selainikkunan kuvasuhde vaihtelee joka tapauksessa.
 
Liittynyt
05.11.2016
Viestejä
1 528
Tuo on mahdottomuus. Jos taustakuvan kuvasuhde on vaikka 2:1, se EI VOI täyttää koko selainikkunaa säilyttäen muotonsa. Joko se täyttää koko selainikkunan ja kuva menettää muotonsa tai sitten kuvasta osa leikkautuu pois ja se täyttää selainikkunan. Selainikkunan kuvasuhde vaihtelee joka tapauksessa.
Ääh, siis skaalautuu täyttämään selainikkunan tietenkin niin, että osa kuvasta aina leikkautuu ikkunan ulkopuolelle, mutta kuvan muoto pysyy. Olen siis saanut tuon jo toimimaan html5:tä ja CSS:a oikein tukevilla selaimilla, mutta tässä onkin nyt kyse siitä, että miten tehdä tuo toimivaksi mm. edgellä tai androidin päällä pyörivällä Chromella, jotka eivät tue täydellisesti HTML5:tä tai CSS:a.

Harjoitukset jatkukoon.
 
Liittynyt
17.10.2016
Viestejä
240
Ääh, siis skaalautuu täyttämään selainikkunan tietenkin niin, että osa kuvasta aina leikkautuu ikkunan ulkopuolelle, mutta kuvan muoto pysyy. Olen siis saanut tuon jo toimimaan html5:tä ja CSS:a oikein tukevilla selaimilla, mutta tässä onkin nyt kyse siitä, että miten tehdä tuo toimivaksi mm. edgellä tai androidin päällä pyörivällä Chromella, jotka eivät tue täydellisesti HTML5:tä tai CSS:a.

Harjoitukset jatkukoon.
Noniin, jos kuva saa leikkautua niin eihän tuossa sen merkillisempää ole, background-size on soveltuva tuohon.

Edit: forkkasin vielä tuota Zvonan koodia.
 
Viimeksi muokattu:
Liittynyt
05.11.2016
Viestejä
1 528
Noniin, jos kuva saa leikkautua niin eihän tuossa sen merkillisempää ole, background-size on soveltuva tuohon.

Edit: forkkasin vielä tuota Zvonan koodia.
Tämä näyttää aika hyvältä ja jostain syystä toimii myös edgellä oikein, täytynee katsoa mitä erilaista omassa koodissa oli. Toki tähän nyt sitten lisättäköön, että tuo sivu johon tätä on tarkoitus käyttää sisältää 1200x600 kokoisen logokuvan, jota pitää sitten vielä skaalata kun sivu skaalautuu, mutta luulenpa saavani sen tehtyä.
 
Liittynyt
05.11.2016
Viestejä
1 528
Kiitos ja kumarrus auttajille, vihdoin sain kuvan pysymään halutussa kohdassa kaikilla selaimilla ja taustan myös skaalautumaan oikein.

Noiden prosenttien säätäminen oli kyllä sellainen henkien taistelu, kun haluaa jonkun kohdan, muttei sen prosenteilla säätäminen oikeaksi ole niin helppoa kuin luulisi. :D

css_kuva.jpg
 

nnaku

I'm object-oriented!
Liittynyt
28.11.2016
Viestejä
779
Kukas se foorumin cascade welho oli?

Miten saan html progress elementiin "eri" transitiot valuen suurenemiselle ja pienenemiselle?

Koodi:
// tässä kohtaa progress value kasvaa joten transition saa suorittaa heti!
progress[value]::-webkit-progress-value {
      -webkit-transition: width 500ms ease;
      -moz-transition: width 500ms ease;
      -o-transition: width 500ms ease;
      transition: width 500ms ease;
    }

// tässä kohtaa progress value pienenee joten transition saa suorittaa delayn jälkeen!
    progress[value]::-webkit-progress-value {
      -webkit-transition: width 500ms ease  1s;  
      -moz-transition: width 500ms ease 1s;
      -o-transition: width 500ms ease 1s;
      transition: width 500ms ease 1s;
    }
 

greenlight

BANNATTU
BANNED
Liittynyt
17.10.2016
Viestejä
1 635
Älä käytä vendor prefixejä manuaalisesti vaan asenna css-esikääntäjä, joka lisää ne tarvittaessa. Ja aivan turhaan laitat joitain ihmeen Firefox-spesifejä sääntöjä sellaisen selectorin sisälle, joka toimii vain Webkit-moottoria käyttävissä selaimissa...

Transition-sääntö ei tarvitse prefixejä ollenkaan, ei ole tarvinnut pitkään aikaan. Sokea copy-paste on kaiken pahan alku ja juuri.

Voit valita käytettävän transition css-luokkia käyttämällä.

Edit: olikin todella vanha viesti tuo edellinen. No ei voi mitään. :facepalm:
 
Liittynyt
06.11.2016
Viestejä
1 748
Nyt on pieniä ongelmia css transition - ominaisuuden kanssa.
Kun sivun päivittää niin, tuo elementti mihin tuo transition on lisätty välähtää, tämä siis Firefoxissa (v.66.02)
Sama tapahtuu Chromella (v.73.0.3683.86), mutta vain silloin kun sivun päivittää shift + f5 kombolla.
Tuossa esimerkissä tämä tapahtuu vain kun tuo tumma teema on käytössä ja elementti on tuo kytkin.
Edgellä näyttää olevan lisäksi jotain ongelmia tuon kytkimen animaation kanssa, mutta katsotaan sitä myöhemmin.

Saako tämän jotenkin korjattua pelkällä css:llä vai mikä tässä kusee?

https://bit.ly/2YZlAsk
 
Liittynyt
21.10.2016
Viestejä
156
Lisäsin setThemeOnLoadiin breakpointin, niin tuo ehkä helpottaa hahmottamaan asiaan. Selain ehtii siis renderöidä tuon valkoisena ennenkuin JS:llä asetat tuota data-attribuuttia.
Helpoin korjaus on varmaan piilottaa koko elementti oletuksena, ja näyttää se vasta kun teema on asetettu vaikkapa tuolla data-attribuutilla.

https://bit.ly/2FZ7oqp
 
Liittynyt
06.11.2016
Viestejä
1 748
Lisäsin setThemeOnLoadiin breakpointin, niin tuo ehkä helpottaa hahmottamaan asiaan. Selain ehtii siis renderöidä tuon valkoisena ennenkuin JS:llä asetat tuota data-attribuuttia.
Helpoin korjaus on varmaan piilottaa koko elementti oletuksena, ja näyttää se vasta kun teema on asetettu vaikkapa tuolla data-attribuutilla.

https://bit.ly/2FZ7oqp
Asia selvä, minä kiitän!
 
Liittynyt
27.03.2018
Viestejä
782
Kysyisin, missä määrin ylipäätänsä on tarvetta -webkit- tms. spesiaaleille säädöille?

Olen laittanut -webkit- :
-webkit-border-radius
-webkit-box-shadow

-moz- en ole viitsinyt juuri laittaa - tainnut satunnaisesti jonnekin laitettua

Teemani laittaa myös

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
+ koko joukon muita vastaavia


en ole kaikkia noita laittanut ja tuntuu homma silti pelittävän. Laittaisin ne vain, jos niitä ihan oikeasti joillekin jutuille tarvitaan, en huvi vuoksi. Mutta en tiedä, mikä ihan oikeasti on tarpeen. Näitä kai luotiin siksi, että ne olivat selaimissa kokeellisia toimintoja?
 
Viimeksi muokattu:
Liittynyt
17.10.2016
Viestejä
14 542
Kysyisin, missä määrin ylipäätänsä on tarvetta -webkit- tms. spesiaaleille säädöille?
Vendor-prefixien tarve riippuu ihan siitä, mitä ja kuinka vanhoja selaimia haluat tukea. Noita ei tarvitse arpoa, vaan voit katsoa täältä:

Can I use... Support tables for HTML5, CSS3, etc

Ja noita ei tarvitse käsin laittaa, vaan voit käyttää esim. Autoprefixeriä:

postcss/autoprefixer

Esim. create-react-app käyttää tuota vakiona, jolloin kehittäjän ei tarvitse välittää prefixeistä tuon taivaallista.
 

greenlight

BANNATTU
BANNED
Liittynyt
17.10.2016
Viestejä
1 635
Kysyisin, missä määrin ylipäätänsä on tarvetta -webkit- tms. spesiaaleille säädöille?
Sinä et tarvitse niitä ollenkaan vaan käyttämäsi työkalut laittavat ne automaattisesti. Sinun tulee vain käyttää ammattimaisia työkaluja. Tuossa oli neljä viestiä ylempänä täysin kurantti vastaus tähän "ongelmaan". Valoja päälle.

Lisäsin setThemeOnLoadiin breakpointin, niin tuo ehkä helpottaa hahmottamaan asiaan. Selain ehtii siis renderöidä tuon valkoisena ennenkuin JS:llä asetat tuota data-attribuuttia.
Helpoin korjaus on varmaan piilottaa koko elementti oletuksena, ja näyttää se vasta kun teema on asetettu vaikkapa tuolla data-attribuutilla.

https://bit.ly/2FZ7oqp
Tuo aiheuttaa räpsymistä ja sisällön poukkoilua ylös, alas*. Luultavasti tässä tapauksessa säällinen workaround olisi laittaa kyseinen skripti suoraan html-dokumenttiin, jolloin arvelen sen suorittuvan ennen renderöintiä. Kyse on käytännössä one-linerista.

Ja oletuksena on tietysti määritettävä edes jokin tyyli, ettei sivu ole aivan sekaisin, jos js:n kanssa on ongelmia.

* Jos käyttää visibility-sääntöä, niin pelkästään tyhjän alueen sivulle.
 
Viimeksi muokattu:
Liittynyt
27.03.2018
Viestejä
782
Olen määrittänyt CSS:n vain NotePad++:lla. Siinä on syntax highligt apuna, ei muuta. Syntaksin olen tarkistanut WordPressin teemaeditorissa, jossa on varsin hyvä syntaksin tarkistus.

Haluan tukea muutaman vuoden vanhoja selaimia. Vai mitenkän kännyköiden ja tablet-laitteiden Chrome päivittyy.
MS IE:stä en välitä. Sitäpaitsi MS IE 11 on varsin hyvä selain, jota ei tarvitse erikseen noteerata.

Prefixit kasvattavat CSS-tiedoston kokoa paljon. Käyttäisin vain minimimäärän.
 
Viimeksi muokattu:
Liittynyt
27.03.2018
Viestejä
782
Jos laitan vain box-shadow: tai text-shadow ilman etuliitteitä, mitähän merkitystä sillä käytännössä on?
Poikkeako -webkit-box-shadow jotenkin box-shadow jotenkin toisistaan?
 

greenlight

BANNATTU
BANNED
Liittynyt
17.10.2016
Viestejä
1 635
Prefixit kasvattavat CSS-tiedoston kokoa paljon. Käyttäisin vain minimimäärän.
Eivät todellakaan kasvata. Edelleenkin: käytä kunnon freimistä ja suunnittele omatkin tyylisi siten, ettei sinun tarvitse copy-pastea joka hemmetin sääntöä yksitellen elementeille. Sitä varten css:ssä on luokat, että voit käyttää yhtä sääntörypästä monessa eri paikassa. Minimimäärän käyttäminen onnistuu juuri sillä, että opettelet ammattimaiset työkalut. Asenna Node.js ja siihen Webpack, niin pääset liikkeelle.
 
Liittynyt
27.03.2018
Viestejä
782
Kokoan kyllä samoja asioita yhteen paikkaan ja pyrin siihen, että yksittäistä määrittelyä tarvitaan mahdollisimman vähän.
Tämä CSS-määrittely on harrastus ja pärjään kyllä NotePad++:llakin.
Mutta haluaisin nyt tietää, mitä -webkit- tai -moz- ovat ihan oikeasti tarpeen.
Jos Safari tai Chrome lukee myös ilman etuliitettä olevan säännön, en etuliitettä laittaisi.
Haluaisin vain tietää, mitkä etuliitteet ovat ihan oikeasti tarpeen:
Tässä etuliitteet, jotka tulivat teeman mukana ja joihin en ole koskenut:
MS IE/Edge:
-ms-text-size-adjust:100%
-ms-hyphens: none;
-ms-interpolation-mode: bicubic;
:-ms-input-placeholder {...

Firefox oletan, että näitä tuskin tarvitaan lainkaan
-moz-box-sizing::border-box (en ole laittanut lisää)
-moz-hyphens: none;
button::-moz-focus-inner, input::-moz-focus-inner {...
:-moz-placeholder {...

Webkit:
-webkit-box-sizing:border-box
-webkit-text-size-adjust:100%
-webkit-hyphens:none/auto
-webkit-appearance: (lomake-elementeille)
::-webkit-search-decoration
-webkit-linear-gradient
::-webkit-input-placeholder
-webkit-font-smoothing: antialiased;
max-width: -webkit-calc...
-webkit-backface-visibility: hidden;
-webkit-box-shadow:

Itse olen lisännyt seuraavia:
-webkit-border-radius:
-webkit-transition
-webkit-box-shadow:
 
Liittynyt
17.10.2016
Viestejä
14 542
Mutta haluaisin nyt tietää, mitä -webkit- tai -moz- ovat ihan oikeasti tarpeen.
Tähän vastasinkin jo aiemmin:

Vendor-prefixien tarve riippuu ihan siitä, mitä ja kuinka vanhoja selaimia haluat tukea.
Kyse ei ole siis vain selaimesta, vaan myös sen versiosta. Mitä uudempi, sitä useamman CSS-propertyn kohdalla pärjätään ilman prefixejä, mutta kaikki pitää katsoa erikseen, jos tuota käsin haluat tehdä.
 
Liittynyt
27.03.2018
Viestejä
782
Firefoxille riittää n. ver 45 eikä niinkään vanhaa tarvitse kunnolla tukea. Testikännykkäni on Samsung Galaxy J5. Sen Chrome-versiosta ei ole hajuakaan eikä edes tietoa, miten usein päivittyy.

Testi tablet-laitteeni on parin vuoden takainen Huawei. Chrome-versiosta ei hajuakaan. Tablet-laitteessa Chrome päivittyy automaattisesti, joten ei merkitystä.

iPad ja iPhone päivitysstrategiasta ei ole tietoa - jos päivittyvät usein, ei kai Safarista tarvitse vanhoja versioita edes huomioida?

MS IE/Edge vain uusimmat tarpeen huomioda. 7, 8 ja 10 päivittävät ymmärtääkseni myös selaimet automaattisesti. MS IE:essä pieni visuaalinen ongelma on se, että se laittaa vierityspalkin eri lailla kuin Chrome. Tein pienen korjauksen IE:lle, mutta en yritä sille optimaalista lopputulosta.

Ylipäätänsä tarkoitus ei ole tukea vanhoja selaimia lainkaan. Katson, että on käyttäjän ongelma, jos käyttää turhan vanhaa selainta.
 
Viimeksi muokattu:

Tup3x

Liittynyt
18.10.2016
Viestejä
2 331
Jos laitan vain box-shadow: tai text-shadow ilman etuliitteitä, mitähän merkitystä sillä käytännössä on?
Poikkeako -webkit-box-shadow jotenkin box-shadow jotenkin toisistaan?
Turha käyttää vendor perfixejä noissa ellet targetoi jotain legacy versiota.
 
Liittynyt
27.03.2018
Viestejä
782
Ok. Ei ole tullut käytettyä systemaattisesti. Poistin olemassa olleetkin.

Pientä ihmetystä on herättänyt se, että teeman leiskan mukana @font-face Dashicons ei aina latautunut. Laitoin sen omaan CSS:ni, että tulee mukaan.

Tulee leikittyä WordPressin Dashicons-setillä. Niissä käytän aina text-shadow-ominaisuutta. Teema käyttää myös Genicons-settiä. WordPressin Dashicons kai voi käyttää muuallakin kuten voi Genicons-settiä?
 
Viimeksi muokattu:
Liittynyt
27.03.2018
Viestejä
782
Minulla suhteellisesti parhaiten toimii kännykkäversio. Tein sille eräänlaisen käyttöliittymän. Minkään toiminnon takia käyttäjän ei tarvitse rullata sivua ylös/alassuunnassa ja jos rullaakin, hän pääsee helpolla takaisin. Rullaamistarve on minimoitu. Mielestäni siihen pitäisi tämäntapaisessa foorumisivustolla pyrkiä.
 
Liittynyt
06.11.2016
Viestejä
1 748
Onko jotain kätevää tapaa poistaa css skaalauksen whitespace?
 
Liittynyt
17.10.2016
Viestejä
14 542
https://codepen.io/null_/pen/VJeXgN

Ongelmana on siis se, että tuo palikka vie tuon skaalauksen jälkeenkin alkuperäisen koon mukaisen tilan.
Tarkoituksena on poistaa tuo tyhjätila ('whitespace') En tiedä miten ja onko se edes mahdollista, joten ajattelin kysyä.
Kerrotko mitä oikeasti siis olet tekemässä? Miltä lopputuloksen pitäisi näyttää? Piirrä vaikka Paintilla, jos et osaa selittää. Kyllä tuon sisemmän div-elementin koko on skaalauksen verran pienempi kuten pitääkin, voit todeta tämän vaikka Inspectillä selaimessa. Millä tavalla haluat "tyhjän tilan pois"?
 
Liittynyt
06.11.2016
Viestejä
1 748
Kerrotko mitä oikeasti siis olet tekemässä? Miltä lopputuloksen pitäisi näyttää? Piirrä vaikka Paintilla, jos et osaa selittää. Kyllä tuon sisemmän div-elementin koko on skaalauksen verran pienempi kuten pitääkin, voit todeta tämän vaikka Inspectillä selaimessa. Millä tavalla haluat "tyhjän tilan pois"?
Ymmärsin, että tuo vie alaspäin skaalauksen jälkeenkin sen alkuperäisen tilan, sillä kun kokeilin tuota, niin skaalattu elementti vie enemmän tilaa kun sen pitäisi.
Mutta tuossa kusee sitten varmaan jokin muu.
 
Liittynyt
17.10.2016
Viestejä
14 542
Ymmärsin, että tuo vie alaspäin skaalauksen jälkeenkin sen alkuperäisen tilan, sillä kun kokeilin tuota, niin skaalattu elementti vie enemmän tilaa kun sen pitäisi.
Mutta tuossa kusee sitten varmaan jokin muu.
Laita sitten sellainen esimerkki, jossa se todellinen ongelmasi tulee esille.
 
Liittynyt
06.11.2016
Viestejä
1 748
Tsekkaas tämä:

Using CSS transforms

Eli se elementti pienenee, mutta alkup koko määrää muiden elementtien asemoinnin.
https://codepen.io/null_/pen/MMKGBP

Loin nyt uuden codepen esimerkin. Tarkoituksena on siis pitää noiden kolmen elementin välit tasaisena, myös tuohon paneeliin (panel) nähden, vaikka viimeinen elementti on skaalattu. Nythän se ei sitä ole.

Syy siihen miksi yksi elementti on skaalattu on se, että käytän siinä kuvaketta joka on skaalattava, ettei se näyttäisi mobiililaitteessa mössöltä.
 
Liittynyt
17.10.2016
Viestejä
14 542
https://codepen.io/null_/pen/MMKGBP

Loin nyt uuden codepen esimerkin. Tarkoituksena on siis pitää noiden kolmen elementin välit tasaisena, myös tuohon paneeliin (panel) nähden, vaikka viimeinen elementti on skaalattu. Nythän se ei sitä ole.

Syy siihen miksi yksi elementti on skaalattu on se, että käytän siinä kuvaketta joka on skaalattava, ettei se näyttäisi mobiililaitteessa mössöltä.
Ensinnäkin yrittäisin itse aluksi ratkaista tuon varsinaisen ongelmasi: eli heikkolaatuinen assetti/kuvake. Se, että pienennät elementtiä vain sen takia, ettei pikselimössö olisi niin kamalaa kuulostaa melkoiselta purkalta ja tekee UI:sta ruman/hankalan (näillä tiedoilla). Ottaisin itse 3 samankokoista elementtiä (jos ne ovat siis samaa käyttötarkoitusta) mössöllä kuin yhden erikokoisen rumentamaan vielä enemmän.

Yksi vaihtoehto on näyttää mini-ikoni pienenä sopivan taustavärin päällä sen elementin keskellä/kulmassa niin, että koko elementin koko on silti sama kuin muilla vastaavilla.

Ja jos tuo ei syystä tai toisesta ole mahdollista, niin: älä skaalaa. Määritä sille 3. elementille pienempi koko suoraan. Scale ei ole oikea tapa tilanteessa, jossa elementtejä ei haluta asemoida alkup. koon mukaisesti. Mutta itse en tätä tekisi.
 
Liittynyt
06.11.2016
Viestejä
1 748
Ensinnäkin yrittäisin itse aluksi ratkaista tuon varsinaisen ongelmasi: eli heikkolaatuinen assetti/kuvake. Se, että pienennät elementtiä vain sen takia, ettei pikselimössö olisi niin kamalaa kuulostaa melkoiselta purkalta ja tekee UI:sta ruman/hankalan (näillä tiedoilla). Ottaisin itse 3 samankokoista elementtiä (jos ne ovat siis samaa käyttötarkoitusta) mössöllä kuin yhden erikokoisen rumentamaan vielä enemmän.

Yksi vaihtoehto on näyttää mini-ikoni pienenä sopivan taustavärin päällä sen elementin keskellä/kulmassa niin, että koko elementin koko on silti sama kuin muilla vastaavilla.

Ja jos tuo ei syystä tai toisesta ole mahdollista, niin: älä skaalaa. Määritä sille 3. elementille pienempi koko suoraan. Scale ei ole oikea tapa tilanteessa, jossa elementtejä ei haluta asemoida alkup. koon mukaisesti. Mutta itse en tätä tekisi.
Kyseessä ovat siis nämä kuvakkeet Skycons
Nuohan on javascriptillä väsätty / animoitu.
Jokatapauksessa huomasin, että skaalaamalla ne pienemmäksi, näyttivät ne teräviltä myös mobiilissa, mutta tuosta tulee sitten kaikenlaisia ongelmia.
 
Liittynyt
17.10.2016
Viestejä
14 542
Jokatapauksessa huomasin, että skaalaamalla ne pienemmäksi, näyttivät ne teräviltä myös mobiilissa, mutta tuosta tulee sitten kaikenlaisia ongelmia.
Noniin, aletaan päästä siihen todelliseen ongelmaasi :) Nuo eivät ole mitään kuvia, vaan proseduraalisesti piirretään ns. täydellisellä resoluutiolla canvakselle. Eli niitä voi kasvattaa vaikka kuinka isoiksi ja mitään pikselöintiä ei tule (tämän voi nopeasti testata tuolla nettisivulla tunkkaamalla canvasin attribuutteja).

Olisiko siis liian pieni canvasin reso sinulla? Ja jos sitä sitten skaalailet myöhemmin muuttamalla elementin width/heightiä CSS:llä, niin pikselöityy varmasti. Saatko lisättyä canvasin resoa? Eli sen canvasin attribuutit width ja height?
 
Liittynyt
06.11.2016
Viestejä
1 748
Noniin, aletaan päästä siihen todelliseen ongelmaasi :) Nuo eivät ole mitään kuvia, vaan proseduraalisesti piirretään ns. täydellisellä resoluutiolla canvakselle. Eli niitä voi kasvattaa vaikka kuinka isoiksi ja mitään pikselöintiä ei tule (tämän voi nopeasti testata tuolla nettisivulla tunkkaamalla canvasin attribuutteja).

Olisiko siis liian pieni canvasin reso sinulla? Ja jos sitä sitten skaalailet myöhemmin muuttamalla elementin width/heightiä CSS:llä, niin pikselöityy varmasti. Saatko lisättyä canvasin resoa? Eli sen canvasin attribuutit width ja height?
Ongelma on ollut vissiin se, että olen muutellut noiden kokoa pikseleinä. Tai ainakin se teki tuosta mössöä mobiilissa.
Noh, joka tapauksessa nyt se toimii kuten kuuluukin ilman tuota skaalausta.
 
Viimeksi muokattu:
Liittynyt
23.10.2016
Viestejä
658
Osaako joku suositella jotain hyvää kurssia CSS-opiskeluun? CSS on varmasti suurin pullonkaula omassa osaamisessa tällä hetkellä. Ei meinaa tulla omista projekteista mitään, kun menee yksinkertaisten asioiden hieromiseen tuntitolkulla aikaa...
 
Liittynyt
06.11.2016
Viestejä
1 748
Osaako joku suositella jotain hyvää kurssia CSS-opiskeluun? CSS on varmasti suurin pullonkaula omassa osaamisessa tällä hetkellä. Ei meinaa tulla omista projekteista mitään, kun menee yksinkertaisten asioiden hieromiseen tuntitolkulla aikaa...
En nyt mitään yksittäistä kurssia osaa suositella, mutta youtubesta löytyy hyvin materiaalia ja sitten tietystin udemysta voi valkata jonkun kurssin tuohon liittyen.
Alla muutama kanava mitä tulee seurattua, noissa on paljon muutakin webdevaukseen liittyvää.

Traversy Media
DesignCourse
Dev Ed
 

nnaku

I'm object-oriented!
Liittynyt
28.11.2016
Viestejä
779
1590050698185.png


Eli pitäs vääntää tällänen leiska missä.
Punaine on parent elementti.
Vihreä on taulukko jossa on n kolumnia ja n riviä. Ja elementtiä voi scrollata molemmilla akseleilla.
Sinisellä on kolumnien otsikot, eli X positio (scrollLeft) tulisi olla aina sama Virherän kanssa.
Keltaisella on rivien otsikot (fixattu kolumni?), eli Y positio (scrollTop) tulisi olla aina sama Virherän kanssa.

Onnistuuko ns. pure css ja jos onnistuu nii miten helvetiisä?
 
Toggle Sidebar

Statistiikka

Viestiketjut
237 334
Viestejä
4 157 520
Jäsenet
70 409
Uusin jäsen
Eycte

Hinta.fi

Ylös Bottom