Help de ontwikkeling van de site en deelt het artikel met vrienden!

Inleiding tot CSS box-shadow

CSS box-shadow definieert als een eigenschap die schaduwen aan een gespecificeerd element koppelt. Dit voegt diepe ontwerpen toe aan het maken van de website zonder dat afbeeldingen en andere containerelementen nodig zijn. Deze eigenschap ha alt een kader weg van de achtergrond door alleen randen te tekenen. Dit zijn slechts krachtige eigenschappen in CSS die kunnen worden bereikt om 8 schaduweffecten op papier te creëren. De eigenschap Box-shadow biedt 2D-effecten op een webpagina.

Syntaxis en parameters:

box-shadow: geen|h-offset v-offset - vervagen - spread |color |inset|initial|inherit;

Hier worden de twee waarden gewoonlijk gevolgd door de overige waarden.

Voorbeeld:

Hier hebben we drie parameters, de eerste twee stellen de locatie van de schaduwen in beide assen in.

demo1
{
Box-schaduw: 5px ,10px, rood; // Dit zegt offset-x, y, kleurwaarde.
}

Hoe werkt box-shadow Property in CSS?

De CSS-boxschaduw heeft zes verschillende waarden voor deze eigenschap.

1. inzet

Deze waarde creëert schaduw in het vak met behulp van de eigenschap schaduw, omdat het de schaduw buiten niet kon creëren. Dit wordt aangegeven aan het begin of het einde van het pand. In sommige situaties kan dit worden weggelaten.

Voorbeeld:

box-shadow: inzet 1px 1px 2px 2px groen; //(inzet)(horizontale offset)(verticale offset)(vervagingsradius)(gespreide afstand)(kleur)

2. kleur

Hiermee wordt de kleur van het schaduwvak ingesteld.

3. horizontale offset

Het geeft een lengte van het schaduweffect. Positieve waarden worden toegewezen om de schaduw naar rechts weer te geven. Negatieve waarden verschuiven de schaduwen naar links.

Voorbeeld:

box-schaduw: 30px 20px;

Hier is de horizontale offset ingesteld op 30px, wat hoger is dan de v-as en de verticale offset is 20px.

4. verticale offset

Het geeft de schaduwpositie van de vakken op de Y-as weer. Hier wordt de positieve waarde verlaagd en de negatieve waarden omhoog.

Voorbeeld met negatieve waarden:

Box-schaduw: 20 px -10 px; hier verschuift de negatieve waarde de schaduw naar boven.

5. vervagen

De scherpte van de schaduw is duidelijk zichtbaar. En in sommige gevallen is het optioneel omdat de standaardwaarde nul is, wat aangeeft dat een kleur effen is en de schaduw scherper is.

Voorbeeld:

Box-schaduw: 4px 4px 10px;

6. spreid afstand

Hiermee kan de grootte van de schaduw krimpen of groeien in de doos. Hier is de vierde waarde voor de spreidingsradius. Dit spreidt de schaduw die zich in alle richtingen uitstrekt. De positieve waarde zorgt ervoor dat de schaduw zich in alle maten uitbreidt. Negatieve waarde contract aan alle kanten.

Voorbeeld:

Box-schaduw: 0 20px 20px -4px;

Van deze zes waarden wordt het belang gegeven aan twee waarden, zoals horizontale en verticale OFFSET. Behalve voor kleur- en inzetwaarden, is de CSS-lengte px, em en percentage en gebruikt de kleurwaarde hexadecimale waarden.

Voorbeelden van CSS box-schaduw

Hieronder staan de voorbeelden:

Voorbeeld 1

Ingevoegde eigenschapswaarde gebruiken.

Hier wordt een randschaduw naar binnen gereflecteerd met de kleur rood.

Code:



Als je probeert te bereiken, zullen er wegversperringen zijn. Ik heb ze gehad; iedereen heeft ze gehad. Maar obstakels hoeven je niet tegen te houden. Als je tegen een muur aanloopt, draai je dan niet om en geef het op. Zoek uit hoe je erop kunt klimmen, er doorheen kunt gaan of er omheen kunt werken.
Lees meer op https://www.brainyquote.com/topics/wisdom-quotes.

- Michael Jordan


Uitvoer:

Voorbeeld 2

Kleurwaarde gebruiken.

Code:


Box-Shadow met behulp van Offset

Een online leszelfstudie

Uitvoer:

Voorbeeld 3

Meerdere schaduwen op de doos gebruiken.

Met behulp van een enkele box-schaduw eigenschap kunnen we meerdere schaduwen op een element toevoegen. Er kan dus een willekeurig aantal tinten met verschillende kleuren worden opgegeven, maar deze moeten worden gescheiden door komma's. In de onderstaande code specificeert box-shadow drie verschillende kleuren. box-schaduw:4px 4px rood, 12px 12px groen, 16px 16px geel.

Code:


Toont weerspiegeling van schaduwen in meerdere.



Toont weerspiegeling van schaduwen met vervagingseffect.

Uitvoer:

Voorbeeld 4

Code:


Box-Shadow Demo
Met hovercase

Uitvoer:

Bij het wijzigen van de y-offset naar negatief, zoals.

Code:

Dus hier konden we zien dat de rand bovenaan gearceerd is vanwege een negatieve waarde.

Uitvoer;

Voorbeeld 5

Beginwaarde gebruiken - standaard.

Code:


Box-Shadow Demo
Met beginwaarde

Uitvoer:

Voorbeeld 6

Onscherpte schaduw weergeven.

Code:



Als je een doel probeert te bereiken, zal er een wegversperring zijn. ik heb ze gehad; iedereen heeft ze persoonlijk gehad. Maar obstakels hoeven je niet tegen te houden. Als je een barrière tegenkomt, draai je dan niet om en geef het doel op. Maak duidelijk hoe je erop moet klimmen, er doorheen moet of er omheen moet werken.
Lees meer op https://www.brainyquote.com/topics/wisdom-quotes.

- Michael Jordan


Uitvoer:

Conclusie

Daarom kan met deze Shadow-box-eigenschapswebpagina een 3D-effect worden gecreëerd met behulp van de elementen die worden gebruikt in ontwerpsoftware. Daarom hebben we in dit artikel hun eigendomswaarden doorgenomen met een gedetailleerde demo erop. Deze schaduw geeft een aantal geweldige effecten.

Aanbevolen artikelen

Dit is een gids voor CSS box-schaduw. Hier bespreken we hoe de eigenschap box-shadow werkt in respectievelijk CSS en voorbeelden. U kunt ook de volgende artikelen bekijken voor meer informatie -

  1. CSS Header Design
  2. CSS-navigatiebalk
  3. Checkbox CSS
  4. CSS-bestelling

Help de ontwikkeling van de site en deelt het artikel met vrienden!

Categorie:

HTML-zelfstudie