Laatikkovarjot
Lisätkää syvyyttä shadow-sm–shadow-2xl-luokilla, käyttäkää shadow-inner-luokkaa upotettuihin tehosteisiin ja poistakaa varjot shadow-none-luokalla.
Laatikkovarjot on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Tailwind CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Varjot ja visuaalinen syvyys
Laatikkovarjot luovat tasomaisiin käyttöliittymiin vaikutelman syvyydestä ja korkeuserosta. Ne saavat elementit näyttämään sivun yläpuolella leijuvilta, ohjaavat käyttäjän katsetta ja ilmaisevat hierarkiaa. Tailwindin shadow-*-apuluokat tarjoavat huolellisesti suunnitellun laatikkovarjojen asteikon, jonka arvot toimivat harmonisesti yhdessä. Arvot vaihtelevat tuskin havaittavasta shadow-sm-varjosta voimakkaaseen shadow-2xl-varjoon, joten korkeuseron hallinta on täysin käsissänne.
<!-- Shadow elevation scale -->
<div class="grid grid-cols-2 gap-6 p-8 bg-gray-50">
<div class="bg-white p-4 rounded-lg shadow-sm">shadow-sm</div>
<div class="bg-white p-4 rounded-lg shadow">shadow</div>
<div class="bg-white p-4 rounded-lg shadow-md">shadow-md</div>
<div class="bg-white p-4 rounded-lg shadow-lg">shadow-lg</div>
<div class="bg-white p-4 rounded-lg shadow-xl">shadow-xl</div>
<div class="bg-white p-4 rounded-lg shadow-2xl">shadow-2xl</div>
</div>Varjoapuluokkien viite
Jokainen Tailwindin varjoasteikon varjo on suunniteltu tietylle korkeuseron tasolle. shadow-sm (erittäin hienovarainen, 1 pikselin sumennus) sopii syötekentille ja pienille käyttöliittymäelementeille. shadow ja shadow-md sopivat korteille ja pudotusvalikoille. shadow-lg sopii ihanteellisesti popovereille ja modaalisille ikkunoille. shadow-xl ja shadow-2xl on tarkoitettu suurille modaalisille ikkunoille, koko näytön peittokuville ja näyttäville hero-elementeille, joiden on näytettävä selvästi kohotetuilta.
<!-- Semantic shadow usage by component type -->
<div class="space-y-4 max-w-sm">
<input class="w-full border border-gray-300 rounded-lg px-4 py-2 shadow-sm" placeholder="Input with shadow-sm" />
<div class="bg-white border rounded-xl p-4 shadow-md">Card with shadow-md</div>
<div class="bg-white rounded-2xl p-6 shadow-xl">Modal panel with shadow-xl</div>
</div>shadow-inner sisäsyntyisiin varjoihin
shadow-inner lisää sisäänpäin suuntautuvan varjon, joka saa elementin näyttämään upotetulta tai pintaan painetulta. Se on visuaalisesti tavallisten korkeuseroa ilmaisevien varjojen vastakohta. Yleisiä käyttökohteita ovat painettujen painikkeiden tilat, aktiivisuuden osoittavat hakukentät, koverat säiliöt sekä toggle-kytkimien urat, joiden halutaan näyttävän upotetuilta koholla olevan nupin vastakohtana.
<!-- Inset shadow for recessed / pressed effects -->
<div class="flex gap-4">
<!-- Search input looking recessed -->
<div class="flex-1 bg-gray-100 rounded-lg px-4 py-3 shadow-inner flex items-center gap-2">
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11A6 6 0 111 11a6 6 0 0116 0z" />
</svg>
<span class="text-gray-400 text-sm">Search...</span>
</div>
<!-- Pressed button state -->
<button class="bg-gray-200 shadow-inner px-4 py-2 rounded-lg font-medium text-gray-700">
Pressed
</button>
</div>shadow-none varjojen poistamiseen
shadow-none poistaa elementistä kaikki laatikkovarjot. Tämä on hyödyllistä, kun peritty varjo on ohitettava — esimerkiksi kun kortin varjo poistetaan mobiilissa, jossa kortti on täysleveä ja varjo näyttää hankalalta näytön reunoilla. Kaava shadow-md md:shadow-lg käyttää mobiilissa pienempää varjoa ja työpöydällä suurempaa, jolloin leijuvat kortit näyttävät paremmilta.
<!-- Remove shadow on mobile, restore on tablet+ -->
<div class="bg-white p-4 rounded-none sm:rounded-xl shadow-none sm:shadow-lg">
<h3 class="font-bold">Responsive Card Shadow</h3>
<p class="text-gray-600 mt-1">No shadow on mobile, shadow on larger screens.</p>
</div>Värilliset laatikkovarjot
Tailwind v3 esitteli värilliset varjot: shadow-blue-500 tekee varjosta sinisen. Tämä luo tummissa teemoissa ja laskeutumissivuilla suosittuja kirkkaita, hohdetta muistuttavia tehosteita. Varjon väri määritetään CSS-muuttujalla --tw-shadow-color, joten väriluokan rinnalla tarvitaan edelleen shadow-*-kokoluokka — esimerkiksi shadow-lg shadow-blue-500/50.
<!-- Colorful glow effects with colored shadows -->
<div class="flex gap-6 p-8 bg-gray-900 justify-center">
<button class="bg-blue-500 text-white px-6 py-3 rounded-xl font-bold shadow-lg shadow-blue-500/50">
Blue Glow
</button>
<button class="bg-purple-500 text-white px-6 py-3 rounded-xl font-bold shadow-lg shadow-purple-500/50">
Purple Glow
</button>
<button class="bg-pink-500 text-white px-6 py-3 rounded-xl font-bold shadow-lg shadow-pink-500/50">
Pink Glow
</button>
</div>Hover-tilassa kohoava kortti
Yksi yleisimmistä vuorovaikutteisista malleista on hover-tilassa kohoava kortti: kortti alkaa hienovaraisella varjolla ja saa hover-tilassa syvemmän varjon, mikä luo vaikutelman kohoamisesta. Yhdistä luokat shadow-md hover:shadow-xl ja transition-shadow duration-300 saadaksesi aikaan sulavan animaation. Tämä kertoo käyttäjille, että korttia voi käyttää, ja tekee koontinäytöistä sekä tuotelistauksista viimeistellyn tuntuisia.
<!-- Interactive card with hover-lift effect -->
<div class="grid grid-cols-3 gap-6 p-6">
<div class="bg-white rounded-xl p-5 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer">
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-3">
<span class="text-blue-600">📊</span>
</div>
<h3 class="font-bold">Analytics</h3>
<p class="text-sm text-gray-500 mt-1">View your stats</p>
</div>
</div>Drop shadow ja box shadow
Tailwind tarjoaa sekä laatikkovarjoja (shadow-*) että suodatinpohjaisia varjoja (drop-shadow-*). Keskeinen ero on seuraava: shadow-* kohdistuu elementin rajaavaan suorakulmioon, kun taas drop-shadow-* on CSS-suodatin, joka seuraa elementin todellista näkyvää muotoa, myös läpinäkyvillä alueilla. drop-shadow-* sopii ihanteellisesti epäsäännöllisen muotoisille elementeille, kuten läpinäkyvän taustan omaaville PNG-kuvakkeille.
<!-- Box shadow (rectangular) vs drop shadow (shape-aware) -->
<div class="flex gap-8 p-6 items-center">
<!-- Box shadow on transparent PNG -->
<div>
<p class="text-sm mb-2">shadow-lg (rectangular)</p>
<svg class="w-16 h-16 text-blue-500 shadow-lg" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
</svg>
</div>
<!-- Drop shadow follows shape -->
<div>
<p class="text-sm mb-2">drop-shadow-lg (shape-aware)</p>
<svg class="w-16 h-16 text-blue-500 drop-shadow-lg" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
</svg>
</div>
</div>Useiden varjojen kerrostaminen
CSS tukee useita varjoja yhdessä elementissä, mutta Tailwindin valmiit apuluokat tarjoavat vain yhden varjon luokkaa kohden. Jos tarvitsette useita kerroksia, laajentakaa Tailwindin teemaa tiedostossa tailwind.config.js mukautetulla varjolla, joka sisältää pilkuilla erotetun luettelon varjomäärityksiä. Näin voitte toteuttaa esimerkiksi materiaalisen suunnittelun korkeuserotehosteen tai hienovaraisen ulkoisen hohteen yhdistettynä sisäiseen määrittävään varjoon.
/* In tailwind.config.js */
module.exports = {
theme: {
extend: {
boxShadow: {
/* Layered: outer glow + standard shadow */
'glow-blue': '0 0 20px rgba(59,130,246,0.5), 0 4px 6px rgba(0,0,0,0.1)',
/* Material elevation --*/
'material': '0 2px 1px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.1), 0 16px 24px rgba(0,0,0,0.06)',
}
}
}
}Varjot tummassa tilassa
Varjot näkyvät tummilla taustoilla heikommin, koska niissä käytetään yleensä läpikuultavaa mustaa. Tummassa tilassa Tailwindin värilliset varjot tai vaaleammat varjosävyt säilyttävät näkyvyytensä. Yleinen ratkaisu on käyttää tummassa tilassa luokkaa shadow-gray-700/50, joka luo näkyvän varjon tummaa pintaa vasten. Vaihtoehtoisesti tummilla taustoilla voi käyttää varjojen sijaan reunuksia, sillä reunukset pysyvät näkyvinä taustan vaaleudesta riippumatta.
<!-- Shadow strategies for dark mode -->
<div class="bg-gray-900 p-8 rounded-xl space-y-4">
<!-- Standard shadow (invisible on dark bg) -->
<div class="bg-gray-800 p-4 rounded-lg shadow-xl">
Shadow barely visible
</div>
<!-- Colored shadow for dark mode -->
<div class="bg-gray-800 p-4 rounded-lg shadow-lg shadow-gray-700/70">
Shadow visible with colored tint
</div>
<!-- Border instead of shadow on dark bg -->
<div class="bg-gray-800 border border-gray-700 p-4 rounded-lg">
Border as separator on dark backgrounds
</div>
</div>Kohdistusvarjo saavutettavuutta varten
Näkyvät kohdistusilmaisimet ovat WCAG 2.1 AA -saavutettavuusstandardien vaatimus. Vaikka Tailwindin ring-*-apuluokat ovat suositeltu nykyaikainen lähestymistapa, myös laatikkovarjoja voi käyttää kohdistusilmaisimina. Kaava focus:shadow-[0_0_0_3px_rgba(59,130,246,0.5)] luo sinisen hohteen — käytännössä saman kuin ring-2 ring-blue-500, mutta shadow-ominaisuuden avulla vanhojen selainten yhteensopivuutta varten.
<!-- Accessible focus indicators using shadow and ring -->
<div class="flex gap-4 flex-wrap">
<!-- Using ring (preferred modern approach) -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Ring Focus
</button>
<!-- Using shadow for legacy support -->
<button class="bg-purple-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:shadow-[0_0_0_3px_rgba(168,85,247,0.5)]">
Shadow Focus
</button>
</div>Täydellinen varjohierarkia
Oikeassa käyttöliittymässä johdonmukainen varjojen määrittäminen luo selkeän visuaalisen hierarkian. Käyttäkää järjestelmällistä lähestymistapaa: shadow-sm syötekenttien hienovaraisiin reunuksiin, shadow-md sisältökortteihin, shadow-lg pudotusvalikoihin, shadow-xl sivulta avautuviin vetolaatikoihin ja shadow-2xl modaalisiin ikkunoihin. Tämä hierarkia auttaa käyttäjiä ymmärtämään tilasuhteita sekä sen, mitkä elementit ovat kontekstisidonnaisia ja mitkä ensisijaisia.
<!-- Dashboard showing shadow hierarchy -->
<div class="bg-gray-100 p-6 space-y-4">
<!-- Page-level card: shadow-md -->
<div class="bg-white rounded-xl shadow-md p-5">
<h2 class="font-bold text-lg">Analytics Overview</h2>
<!-- Inline component: shadow-sm -->
<div class="mt-4 grid grid-cols-3 gap-3">
<div class="bg-gray-50 rounded-lg p-3 shadow-sm text-center">
<div class="text-2xl font-bold text-blue-600">142</div>
<div class="text-xs text-gray-500">Users</div>
</div>
<div class="bg-gray-50 rounded-lg p-3 shadow-sm text-center">
<div class="text-2xl font-bold text-green-600">94%</div>
<div class="text-xs text-gray-500">Uptime</div>
</div>
<div class="bg-gray-50 rounded-lg p-3 shadow-sm text-center">
<div class="text-2xl font-bold text-purple-600">38</div>
<div class="text-xs text-gray-500">Issues</div>
</div>
</div>
</div>
</div>Pikatarkistus
Testatkaa, kuinka hyvin hallitsette tämän oppitunnin Tailwind CSS Mastery -käsitteet.
Oppitunnin yhteenveto
Tässä oppitunnissa opitte, että shadow-sm–shadow-2xl muodostavat syvyyttä ilmaisevan korkeuseroasteikon, shadow-inner luo upotetun vaikutelman painettuihin tiloihin ja hakukenttiin ja värilliset varjot, kuten shadow-lg shadow-blue-500/50, luovat hohdetehosteita tummiin teemoihin. Seuraavaksi tutustumme outline- ja ring-apuluokkiin saavutettavia kohdistusilmaisimia varten.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Laatikkovarjot” ilmainen?
Kyllä – oppitunnin ”Laatikkovarjot” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Tailwind CSS Academy-kurssin, päivitä CoddyKit PROhon. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Laatikkovarjot”?
Lisätkää syvyyttä shadow-sm–shadow-2xl-luokilla, käyttäkää shadow-inner-luokkaa upotettuihin tehosteisiin ja poistakaa varjot shadow-none-luokalla. Harjoittelet Tailwind CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Tailwind CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Tailwind CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Laatikkovarjot”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Tailwind CSS Academy-oppitunnilla?
Kyllä. Jokainen Tailwind CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.