Randen, ronde hoeken en slagschaduwen toevoegen.
Omlijst een kaart, rond de hoeken van een foto af of til een box met een schaduw van de pagina. Je stelt dit allemaal in in het paneel Stijl van het element, en je kunt het bij hover wijzigen in het paneel Zweefstijl. Gebruik het om één kaart te laten opvallen. Voor hetzelfde kader op een hele reeks kaarten houdt een gedeelde klasse ze gelijk.
De video volgt het recept hieronder: hij maakt van een tekstblok een kaart met een rand, ronde hoeken en een schaduw die bij hover dieper wordt.
Voordat je begint
- Open de pagina in DXPR Builder; als je op een element wijst toont hij zijn besturingsbalk met More. Nieuw in de builder? Zie Je eerste pagina.
- Opslaan in het dialoogvenster bewaart een wijziging in de editor. Opslaan op de builder-werkbalk boven je inhoud slaat de pagina op en toont “Veld opgeslagen”.
- Licht één ding uit. Een rand of een schaduw trekt het oog naar een belangrijke datum, een aanbieding of een citaat. Zet hem op alles en hij werkt niet meer.
- Houd een reeks gelijk. Voor hetzelfde kader op veel kaarten sla je één kaart op als sjabloon of gebruik je een gedeelde klasse. Zie HTML-ID en klassen.
- Laat het thema schaduwen afstemmen. De vijf niveaus van Slagschaduw zijn één keer gedefinieerd voor de hele site. Je thema kan een niveau anders stijlen, en elk element dat het gebruikt volgt.
Recept: een uitgelichte kaart
Je krijgt een zachte box met een dunne rand in je merkkleur. Hij heeft ronde hoeken en een schaduw die groeit bij hover.
- Beweeg over het Tekst-element, klik op More en daarna Instellingen.
- Open het paneel Stijl. Het boxmodel staat bovenaan. Zijn slotjes beginnen open; klik op het slotje naast Opvulling om het te sluiten, zodat zijn vier kanten samen bewegen.
- Klik op de bovenkant van Opvulling, typ 32 en druk op Enter. Alle vier de kanten tonen nu 32px.
- Kies een lichte Achtergrond-kleur, zoals lichtgrijs.
- Zet Randstijl op Effen.
- Sluit het slotje naast Rand en klik dan op een van zijn kanten, typ 1 en druk op Enter.
- Kies een Randkleur, zet Randradius op 16 en zet Slagschaduw op 3.
- Open het paneel Zweefstijl en zet Slagschaduw op 5.
- Klik in het dialoogvenster op Opslaan en daarna Opslaan op de werkbalk.
- Kies Voorbeeld in het weergavemenu (het oogpictogram) en wijs naar de kaart. Zijn schaduw wordt dieper.
Wat je ziet
De kaart heeft een dunne rand in je kleur, ronde hoeken en een zachte schaduw eronder. In Voorbeeld groeit de schaduw dieper terwijl de aanwijzer op de kaart staat en zakt terug als hij weggaat.
Hoe een rand is opgebouwd
Een rand heeft drie instellingen nodig, en het paneel spreidt ze uit. Stel alle drie in:
- Randstijl kiest de lijn: Effen, Gestippeld of Gestreept. Op Themostandaarden hebben de meeste elementen helemaal geen rand. Geen verwijdert een rand die je thema tekent.
- De Rand-ring van het boxmodel stelt de breedte van elke kant in, van 0 tot 50 px. Als je hem leeg laat, gebruikt de browser zijn eigen breedte van ongeveer 3 px.
- Randkleur stelt de kleur in. Als je hem leeg laat, neemt de rand de kleur van de tekst.
Randradius rondt alle vier de hoeken af, van 0 tot 100 px. Hij rondt ook de achtergrond en de schaduw af. Op een Afbeelding rondt hij de foto zelf af.
Voor een cirkel maak je het element vierkant. Zet dan Randradius op de helft van zijn breedte in pixels: 100 voor een element van 200 px breed. Voor alles wat breder is voeg je de klasse Cirkelvormig (50% radius) toe onder HTML-klassen. Op een Afbeelding rondt deze klasse het kader om de foto af, niet de foto, dus gebruik daar Randradius.
Niveaus van slagschaduw
| Niveau | Schaduw onder het element |
|---|---|
| 0 | Geen van DXPR Builder; je thema beslist |
| 1 | 2 px omlaag, 7 px vervaging, 20% zwart |
| 2 | 4 px omlaag, 12 px vervaging, 30% zwart |
| 3 | 5 px omlaag, 25 px vervaging, 30% zwart |
| 4 | 8 px omlaag, 38 px vervaging, 30% zwart |
| 5 | 12 px omlaag, 57 px vervaging, 30% zwart |
Dit zijn de standaardniveaus. Elk niveau is een gedeelde stijl, geen waarde opgeslagen in je pagina, dus een thema kan een niveau voor de hele site opnieuw afstemmen. Voor je thema-ontwikkelaar: de niveaus zijn de CSS-variabelen --dxb-box-shadow-1 tot --dxb-box-shadow-5.
In het paneel Zweefstijl stelt Slagschaduw het niveau in terwijl de aanwijzer op het element staat. De nieuwe schaduw vloeit in over 0,15 seconden. Een hoger niveau bij hover laat een kaart opgetild lijken.
HTML-klassen biedt meer vormen: Opgetilde slagschaduw, Verhoogde slagschaduw, 3D-schaduw en Gebogen horizontale slagschaduw. Hij heeft ook de Bootstrap-klassen Kleine schaduw, Standaardschaduw en Grote schaduw. Gebruik één schaduw per element. De schaduwklassen van Bootstrap winnen van de regelaar Slagschaduw.
Als je de ingestelde rand, hoeken of schaduw niet ziet
- De rand verschijnt niet. Randstijl staat op Themostandaarden of Geen. Kies Effen, Gestippeld of Gestreept.
- De rand is dikker dan je wilt. Er is geen breedte ingesteld, dus de browser gebruikt ongeveer 3 px. Stel de Rand-kanten in in het boxmodel.
- De rand heeft de verkeerde kleur. Een lege Randkleur neemt de tekstkleur. Kies een Randkleur.
- De hoeken blijven vierkant. Een klasse zoals Geen ronde hoeken (rounded-0) onder HTML-klassen, of een themaregel met
!important, wint. Verwijder de chip, of vraag je webmaster naar de themaregel. - De hoeken ronden af maar er verschijnt geen cirkel. De regelaar stopt bij 100 px. Gebruik de klasse Cirkelvormig (50% radius).
- Slagschaduw verandert niets. Een Bootstrap-schaduwklasse zoals Grote schaduw onder HTML-klassen wint. Verwijder zijn chip. Niveau 1 is ook zwak, dus probeer niveau 3 om te testen.
- De schaduw groeit niet bij hover. Stel Slagschaduw in in het paneel Zweefstijl, niet in Stijl, en kies een hoger niveau dan het rustniveau.
- Slechts één kant veranderde. Het slotje naast Opvulling of Rand stond open. Sluit het en voer de waarde opnieuw in.
- De zweefschaduw verschijnt nooit op een telefoon. Touchscreens hebben geen aanwijzer, dus een zweefuiterlijk verschijnt pas na een tik.
Wat nu?
- Witruimte: geef de inhoud ruimte in de rand.