Home-theater-designers
CSS is de taal die ontwikkelaars gebruiken om een webpagina op te maken. Het bepaalt hoe HTML-elementen worden weergegeven op een scherm, op papier of in een andere vorm van media. CSS biedt de volledige aanpassingskracht om de webpagina in uw eigen afbeelding op te maken.
U kunt de achtergrondkleur, letterstijl, letterkleur, kaderschaduw, marge en tal van andere eigenschappen van een element wijzigen met behulp van CSS. We zullen u in deze handleiding door enkele effectieve toepassingen van box-schaduw leiden.
Wat is CSS-boxschaduw?
De doos-schaduw eigenschap wordt gebruikt om een schaduw toe te passen op HTML-elementen. Het is een van de meest gebruikte CSS-eigenschappen voor het opmaken van vakken of afbeeldingen.
CSS-syntaxis:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];- horizontale verschuiving: Als de horizontale offset positief is, bevindt de schaduw zich rechts van het vak. En als de horizontale offset negatief is, bevindt de schaduw zich links van het vak.
- verticale offset: Als de verticale offset positief is, bevindt de schaduw zich onder het vak. En als de verticale offset negatief is, bevindt de schaduw zich boven de doos.
- vervaging straal: Hoe hoger de waarde, hoe vager de schaduw zal zijn.
- spreidingsradius: Het geeft aan hoeveel de schaduw zich moet verspreiden. Positieve waarden vergroten de spreiding van de schaduw, negatieve waarden verkleinen de spreiding.
- Kleur: Het betekent de kleur van de schaduw. Het ondersteunt ook elk kleurformaat zoals rgba, hex of hsla.
De vervagings-, spreidings- en kleurparameters zijn optioneel. Het meest interessante aan box-shadow is dat je een komma kunt gebruiken om box-shadow-waarden een willekeurig aantal keren te scheiden. Dit kan worden gebruikt om meerdere randen en schaduwen op de elementen te creëren.
1. Voeg een donkere doosschaduw toe aan de linker-, rechter- en onderkant van de doos
U kunt zeer vage schaduwen toevoegen aan drie zijden (links, rechts en onder) van het vak met behulp van de volgende box-schaduw CSS met uw doel-HTML-element:
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;Uitgang:
2. Voeg een Dim box-schaduw toe aan All Sides
U kunt lichte schaduwen aan alle kanten van de doos toevoegen met behulp van de volgende doosschaduw-CSS met uw doel-HTML-element:
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;Uitgang:
3. Voeg een dunne doosschaduw toe aan de onder- en rechterkant
U kunt schaduwen toevoegen aan de onderkant en rechterkant van het vak met behulp van de volgende box-schaduw CSS met uw doel-HTML-element:
controleer icloud-e-mail op Android-telefoon
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;Uitgang:
4. Voeg een donkere doosschaduw toe aan Alle zijden
U kunt donkere schaduw aan alle kanten van het vak toevoegen met behulp van de volgende box-schaduw CSS met uw doel-HTML-element:
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;Uitgang:
5. Voeg gespreide schaduw toe aan alle kanten
U kunt gespreide schaduw aan alle zijden van het vak toevoegen met behulp van de volgende opdracht met uw doel-HTML-element:
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;Uitgang:
6. Voeg een dunne randschaduw toe aan alle zijden
U kunt een eenvoudige randschaduw aan alle zijden van het vak toevoegen met behulp van de volgende CSS met uw doel-HTML-element:
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;Uitgang:
7. Voeg een doosschaduw toe aan de onder- en linkerkant
U kunt een schaduw toevoegen aan de onder- en linkerkant van het vak met behulp van de volgende box-schaduw CSS met uw doel-HTML-element:
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;Uitgang:
8. Voeg een donkere schaduw toe aan de boven- en linkerkant, donkere schaduw aan de onderkant en rechterkant
U kunt een lichte schaduw aan de boven- en linkerkant van het vak toevoegen, evenals een donkere schaduw aan de onder- en rechterkant van het vak met behulp van de volgende CSS met uw doel-HTML-element:
box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;Uitgang:
9. Voeg een dunne, gekleurde randschaduw toe aan alle zijden
U kunt een eenvoudige gekleurde randschaduw aan alle zijden van de doos toevoegen met behulp van de volgende doosschaduw-CSS met uw doel-HTML-element:
box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;Uitgang:
10. Voeg meerdere gekleurde randschaduwen toe aan de onderkant en linkerkant van de doos
U kunt meerdere gekleurde randschaduwen toevoegen aan de onder- en linkerkant van het vak met behulp van de volgende CSS met uw doel-HTML-element:
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;Uitgang:
hoe maak je van een laptopscherm een monitor?
11. Voeg meerdere gekleurde randschaduwen toe aan de onderkant
U kunt meerdere gekleurde randschaduwen toevoegen aan de onderkant van het vak met behulp van de volgende doosschaduw-CSS met uw doel-HTML-element:
box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;Uitgang:
12. Voeg meerdere gekleurde randschaduwen toe aan de onderkant en rechterkant van de doos
U kunt meerdere gekleurde randschaduwen toevoegen aan de onder- en rechterkant van het vak met behulp van de volgende CSS met uw doel-HTML-element:
box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;Uitgang:
13. Voeg lichte schaduwen toe aan de linker- en rechterkant, spreid schaduw naar beneden
U kunt lichte schaduwen aan de linker- en rechterkant toevoegen en schaduw naar de onderkant van het vak verspreiden met behulp van de volgende doosschaduw-CSS met uw doel-HTML-element:
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;Uitgang:
Integreer CSS met een HTML-pagina
Nu je weet hoe je coole box-schaduweffecten kunt toevoegen met CSS, kun je ze eenvoudig op meerdere manieren integreren met HTML-elementen.
Verwant: 11 Handige hulpmiddelen om CSS-bestanden te controleren, op te schonen en te optimaliseren
U kunt het in de HTML-pagina zelf insluiten of als een afzonderlijk document bijvoegen. Er zijn drie manieren om CSS in een HTML-document op te nemen:
Interne CSS
Embedded of Internal Style Sheets worden ingevoegd in de sectie van een HTML-document met behulp van de element. U kunt een willekeurig aantal elementen in een HTML-document, maar ze moeten tussen de en labels. Hier is een voorbeeld dat laat zien hoe u interne CSS kunt gebruiken met een HTML-document:
CSS box-shadow
.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
Style 4
Inline CSS
Inline CSS wordt gebruikt om unieke stijlregels toe te voegen aan een HTML-element. Het kan worden gebruikt met een HTML-element via de stijl attribuut. Het stijlkenmerk bevat CSS-eigenschappen in de vorm van 'eigendoms-waarde' gescheiden door een puntkomma ( ; ).
Gerelateerd: Leer hoe u tweedimensionale websites kunt bouwen met CSS Grid
Alle CSS-eigenschappen moeten op één regel staan, d.w.z. er mogen geen regeleinden zijn tussen de CSS-eigenschappen. Hier is een voorbeeld dat laat zien hoe u inline CSS kunt gebruiken met een HTML-document:
CSS box-shadow
Style 4
Externe CSS
Externe CSS is de meest ideale manier om stijlen toe te passen op HTML-documenten. Een externe stylesheet bevat alle stijlregels in een apart document (.css-bestand), dit document wordt vervolgens gekoppeld aan het HTML-document met behulp van de label. Deze methode is de beste methode voor het definiëren en toepassen van stijlen op de HTML-documenten, aangezien het betrokken HTML-bestand minimale wijzigingen in de opmaak vereist. Hier is een voorbeeld dat laat zien hoe u externe CSS kunt gebruiken met een HTML-document:
Maak een nieuw CSS-bestand met de .css verlenging. Voeg nu de volgende CSS-code toe aan dat bestand:
.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}Maak ten slotte een HTML-document en voeg de volgende code toe aan dat document:
windows kon het formatteren usb niet voltooien
CSS box-shadow
Style 4
Merk op dat het CSS-bestand is gekoppeld aan het HTML-document via tag en href attribuut.
Alle bovenstaande drie methoden (Interne CSS, Inline CSS en Externe CSS) geven dezelfde uitvoer weer-
Maak uw webpagina elegant met CSS
Door CSS te gebruiken heb je volledige controle over de styling van je webpagina. U kunt elk HTML-element aanpassen met behulp van verschillende CSS-eigenschappen. Ontwikkelaars van over de hele wereld dragen bij aan CSS-updates, en dat doen ze al sinds de release in 1996. Als zodanig hebben beginners veel te leren!
Gelukkig is CSS beginnersvriendelijk. Je kunt uitstekend oefenen door te beginnen met een paar eenvoudige commando's en te kijken waar je creativiteit je brengt.
Deel Deel Tweeten E-mail 10 eenvoudige voorbeelden van CSS-codes die u in 10 minuten kunt lerenHulp nodig met CSS? Probeer deze standaard CSS-codevoorbeelden om mee te beginnen en pas ze vervolgens toe op uw eigen webpagina's.
Lees volgende Gerelateerde onderwerpen- Programmeren
- Webdesign
- CSS
Yuvraj is een student Computerwetenschappen aan de Universiteit van Delhi, India. Hij is gepassioneerd door Full Stack Web Development. Als hij niet aan het schrijven is, onderzoekt hij de diepte van verschillende technologieën.
Meer van Yuvraj ChandraAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren