Keskustelu: Nettisivujen teko: Border shadow

Viikon yrityksen jälkeen olen onnistunut saamaan border shadowin div-sisällön ympärille oikealle ja alas:

https://www.tunturisusi.com/joululinkit/

Mutta pitäisi saada myös vasemmalle, ei ylös. Miten tämän voisi toteuttaa?

Olen käyttänyt kaikki netissä tarjolla olevat koodit, ja yleensä niillä ei näy mitään, siis ei tule varjoa ollenkaan taikka vain border viiva. Sain nämä oikean laidan ja alareunan varjot tällä koodilla: Voisiko tuohon lisätä jotakin niin, että varjo olisi vasemmallakin?

.shadow1 {
	margin: 10px;
	background-color: rgb(68,68,68); /* Needed for IEs */

	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	box-shadow: 5px 5px 5px rgba(68,68,68,0.5);

	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
	zoom: 1;
}
.shadow1 .content {
	position: relative; /* This protects the inner element from being blurred */
	padding: 1px;
	background-color: #DDD;
}

Eikös tuo onnistu ihan vain luomalla useampi varjo?

Eli tähän tapaan:

box-shadow: 0px 8px 10px gray, -10px 10px 15px gray, 10px 8px 15px gray;

netistä kaivettu jsfiddle

Huoh että tuossa ap:n snippetissä on niin monta asiaa väärin. Ota pois kaikki legacy-paska.

Siis:
- -moz-box-shadow
- -webkit-box-shadow
- filter
- -ms-filter

Loistavaa, suurkiitokset, poistin nuo ja laitoin tilalle koodisi. (Siis kiitokset molemmille)

Muutin hieman noita arvoja, että sain laidoille haipuvammat varjot (kymppien tilalle 2):

box-shadow: 0px 8px 10px gray, -2px 10px 15px gray, 2px 8px 15px gray;

Saisikohan tuota alareunan varjoakin haipuvammaksi, nyt se on teräväreunainen?

Tunturisusi kirjoitti:

Viikon yrityksen jälkeen olen onnistunut saamaan border shadowin div-sisällön ympärille oikealle ja alas:

https://www.tunturisusi.com/joululinkit/

Mutta pitäisi saada myös vasemmalle, ei ylös. Miten tämän voisi toteuttaa?

Eiks tää olisi kannattanut tehdä vain laittamalla varjo keskelle ja esim. 10 - 20px alaspäin? Sitten laittanut blurria sen ~20px?

box-shadow: 0px 10px 20px rgba(0,0,0,0.25);

Lebe 80, kiitos huomiosta, koodisi näyttää tekevän samanlaiset varjot kuin tuo ensimmäisenä annettu, kun sitä kokeilin.

Kolmen sivun varjo ei välttämättä onnistu toivotulla tavalla vain yhtä elementtiä käyttämällä. Varjon siirtäminen alemmas jättää sivuvarjot pienemmiksi kuin alareunan varjon. Usean erillisen varjon käyttö taas luo alueen, jossa varjot ovat päällekkäin eli johonkin tulee osittain vielä vahvemmin varjostettu alue, joskin sopivasti valituilla arvoilla tätä ei ehkä huomaa. Yksittäistä varjoa voi suurentaa, mutta suurennus on yhtä iso x- ja y-suuntaan, joten jälleen varjo tulee kaikille neljälle sivulle tai sitten varjot ovat eri sivuilla erilaiset.

Jos tausta on tasainen, yksi ratkaisu on laittaa ulkopuolelle elementti, jossa on sisäpuolinen varjo, ja tämän elementin sisään varsinainen sisältö sopivilla marginaaleilla.

/* <div class='ulompi'> <div class='sisempi'> </div> </div> */
.ulompi {
	background: black;
	box-shadow: inset 0 0 5px 5px white;
}
.sisempi {
	background: white;
	margin: 0 10px 10px;
}

Toinen kysymys onkin, näyttääkö tämä oikeasti kivalta, kun varjo on luonnottomasti eri muotoinen kuin elementti.

Jos visuaaliset vaatimukset ovat tiukat ja kiinnostus virittelyyn on suuri, voisi laittaa sisällön taakse varjoksi toisen divin, joka olisi oikean kokoinen (eli hieman sisältöä suurempi kolmelta sivulta) ja oikean värinen ja sumennettu blur-suodattimella.

Kiitokset Metabolix. Koodisi on hyvä ja itse asiassa tuonne alas ei varjoa tarvitakaan, kun olen asiaan nyt paremmin paneutunut, vaan laidoille riittää.

https://www.tunturisusi.com/tunturisusi/

Muokkasin hieman näitä lukemia periaatteella, että milloin hyvältä näyttää - levensin ja haalensin varjoa ja muutin blackin grayksi. Muutin tuon yhden whiten värin sellaiseksi, että varjo sulautuu tuohon taustaan - toivottavasti tein muutokset "laillisesti" niin että koodi on validi edelleen?

.ulompi {
	background: gray;
	box-shadow: inset 0 0 10px 10px #f5f5f0;
}
.sisempi {
	background: white;
	margin: 0 16px 16px;
}

Lisäys: Näyttää Microsoft Edge tekevän tuollaisen ylimääräisen hennon viivan varjon reunaan - mitä taas puolestaan Google Chrome ei tee lainkaan - mutta näillä mennään ;)

Lisäys:

Tämä viimeisin koodi on hyvä tasaiselle väritaustalle. Tuo ensiksi annettu koodi on hyvä silloin, kun laidoilla on taustakuva - se näkyy kivasti varjon läpi.

Tähän koodiisi Metabolix ei varmaankaan pysty liittämään opacitya eli läpinäkyvyyttä?

Tunturisusi kirjoitti:

(03.07.2019 19:07:52): Kiitokset Metabolix. Koodisi on hyvä ja itse...

vaihda Hex rgba väriksi. Rgba(r, g, b, 0.00 - 1.00) Eli viimeinen luku määrittelee läpinäkyvyyden

Kiitokset noutti.

rgb(245, 245, 240)

Minä yritin tällä rgb-värillä jo aiemminkin, mutta tämän jälkeen tuon varjon kohdalla näkyy vain tasainen harmaa, ei lainkaan haipuvaa varjoa.

Yritin sovitella eri tavoin koodiasi, mutta en saanut mitään muuta aikaan kuin tumman saisen harmaan reunaan varjon paikalle. Mitähän en osannut enkä tajunnut?

Suosittelisin hieman lueskelemaan CSS:n perusteista esimerkiksi täältä w3schools

eli huomaa nyt, että noutti kertoi rgba:sta, eikä rgb:sta. hex -koodeilla ja rgb-koodeilla ei sinänsä ole eroja. rgba:ssa taas saat määrittää alpha kanavan värille.

eli hakemasi värikoodi voisi olla jotakuinkin

rgba(245, 245, 240, 0.4)

Antamaani viritelmäön ei voi lisätä varjolle läpinäkyvyyttä, koska varjolta näyttävä osa on oikeasti laatikon tumma tausta ja tämän vaalea häivytys taustaan on se varsinainen CSS:llä määritelty varjo. Eli jos valkoisesta varjosta tekee läpinäkyvän, jäljelle jää musta tausta, ja jos mustasta taustasta tekee läpinäkyvän, jäljelle jää ylipäänsä läpinäkyvä elementti, jossa on reunoilla vaaleaa haituvaa.

Nyt kuitenkin muutit vaatimuksiasi niin, että varjo voi olla vain sivuilla. Tällöin riittää ihan tavallinen box-shadow kahdella varjolla (molemmat elementtiä pienempiä, yksi kumpaankin sivuun):

.ulompi {
  box-shadow: -10px 0 10px -10px black, 10px 0 10px -10px black;
}
/* .sisempi kokonaan pois kaikesta koodista */

Kiitos morderca, yrittelin kyllä tuolla rgba-koodillakin, mutta en päässyt puusta pitkään. (Vaikka en tiennytkään, että tuollainenkin värikoodi on olemassa, mutta nyt tiedän)

Kiitokset Metabolix, koodissasi miinusmerkkiset vasemmalla vievät varjon vasempaan laitaan ja positiiviset oikealla oikeaan laitaan. Samankaltaisia löysin netistä ja yhteistä kaikille näille on, että mitään ei näy, kun tämän koodin lisään.

https://www.tunturisusi.com/testi/

Laitoin nettiin selvennykseksi tämän testisivun, jossa sisällön laidoilla ei näy mitään. Mikä mättää minulla?

Ongelmasi on nyt se, että kaiken ympärillä on #container, jossa on overflow: hidden, ja kun #container ja .ulompi ovat täsmälleen yhtä isot, varjo päätyy ulkopuolelle ja edellä mainitun overflow-tyylin vuoksi piiloon.

Olisi järkevää yrittää tehdä monta asiaa samalla divillä eikä tehdä jokaiselle ominaisuuudelle uutta diviä, jos ei se ole oikeasti tarpeen. Nytkin voisit jättää erillisen .ulompi-divin kokonaan pois ja laittaa varjon suoraan tuolle #container-diville.

Koodia lukiessa hieman hämää myös, että on erikseen #container ja .container, jotka ovat eri elementtejä. Näille voisi harkita kuvaavampia nimiä kuten vaikka #page-main-content ja .page-content-row, ja noista kammottavista taulukoista (kuten vaikkapa taulukko, jonka sisältönä on yksi vaakasuuntainen kuvaraita) kannattaa samalla hankkiutua eroon.

Kiitokset Metabolix, otan tästä nämä ohjeesi käyttöön ja poistan esim tuon taulukon kuvan käytössä. Minä sain täältä kuitenkin kahdet hyvät bordershadowit, ja käyttelen niitä tarpeen mukaan.