CSS-kysymyksiä

O.J. · 12.01.2017

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?

Urbanproof · 12.01.2017

Pystyy helpostikin;

Koodi:

a[href="https://sivu1"] { color: white; }

O.J. · 12.01.2017

Tuhat kiitosta tästä!

ANTI_L · 03.12.2018

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.

Zvona · 03.12.2018

ANTI_L sanoi:
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

ANTI_L · 03.12.2018

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.

uotila · 03.12.2018

ANTI_L sanoi:
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.

ANTI_L · 03.12.2018

uotila sanoi:
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.

uotila · 03.12.2018

ANTI_L sanoi:
Ää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.

ANTI_L · 03.12.2018

uotila sanoi:
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ä.

ANTI_L · 03.12.2018

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.

nnaku · 09.02.2019

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 · 04.04.2019

Ä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:

null · 09.04.2019

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

Urbanproof · 09.04.2019

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

null · 09.04.2019

Urbanproof sanoi:
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!

Tapio X · 04.05.2019

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?

Paapaa · 04.05.2019

Tapio X sanoi:
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 · 05.05.2019

Tapio X sanoi:
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.

Urbanproof sanoi:
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.

Tapio X · 05.05.2019

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.

Tapio X · 05.05.2019

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?

neko · 05.05.2019

Ensimmäinen hakutulos: CSS Shadow Effects

greenlight · 05.05.2019

Tapio X sanoi:
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.

Tapio X · 05.05.2019

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:

Paapaa · 05.05.2019

Tapio X sanoi:
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ä.

Tapio X · 05.05.2019

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.

Tup3x · 05.05.2019

Tapio X sanoi:
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.

Tapio X · 05.05.2019

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ä?

Tapio X · 19.05.2019

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ä.

null · 14.06.2019

Onko jotain kätevää tapaa poistaa css skaalauksen whitespace?

Tapio X · 14.06.2019

Mitä tarkoitat asialla? Missä yhteydessä whitespace?

null · 15.06.2019

Tapio X sanoi:
Mitä tarkoitat asialla? Missä yhteydessä whitespace?

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ä.

Paapaa · 15.06.2019

null sanoi:
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"?

null · 15.06.2019

Paapaa sanoi:
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.

Paapaa · 15.06.2019

null sanoi:
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.

null · 15.06.2019

Paapaa sanoi:
Laita sitten sellainen esimerkki, jossa se todellinen ongelmasi tulee esille.

Tuo tieto riittää tässä vaiheessa. Kiitos siitä.

Paapaa · 15.06.2019

null sanoi:
Tuo tieto riittää tässä vaiheessa. Kiitos siitä.

Tsekkaas tämä:

Using CSS transforms

Eli se elementti pienenee, mutta alkup koko määrää muiden elementtien asemoinnin.

null · 15.06.2019

Paapaa sanoi:
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ä.

Paapaa · 15.06.2019

null sanoi:
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.

null · 15.06.2019

Paapaa sanoi:
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.

Paapaa · 15.06.2019

null sanoi:
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?

null · 15.06.2019

Paapaa sanoi:
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.

Nigel · 17.06.2019

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...

null · 17.06.2019

Nigel sanoi:
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 · 21.05.2020

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ä?

m K o · 21.05.2020

@nnaku vastaisiko tuollainen esimerkki mitä ajat takaa: https://codepen.io/aardrian/pen/vMpayz
Tuossa pienet taulukot mutta ikkunan kokoa pienentämällä pääsee testaamaan toiminnallisuutta.

CSS-kysymyksiä

BANNATTU

I'm object-oriented!

BANNATTU

BANNATTU

ᓚᘏᗢ

BANNATTU

ツ

I'm object-oriented!

Uutiset

Statistiikka

Hinta.fi