Hoewel ontwerptrends elk jaar variëren, kunt u erop rekenen dat het gebruik van nietjesschaduweffecten zoals box-schaduw en slagschaduw een positieve bijdrage levert aan de esthetiek van een website. U kunt slagschaduwen gebruiken om aangename, prachtig weergegeven effecten te creëren zonder dat het te cheesy overkomt.
Laten we de CSS slagschaduweigenschap eens nader bekijken .
slagschaduw( ) is een CSS-effect dat een schaduw weergeeft rond de vorm van een opgegeven object. Hier is de syntaxis voor het toepassen van een CSS -slagschaduw .
Syntax: filter: drop-shadow(offset-x offset-y blur-radius color);
Er is een breed scala aan filterfuncties, waaronder vervaging( ) , helderheid( ) en slagschaduw( ) .
offset-x bepaalt de horizontale afstand en offset-y bepaalt de verticale afstand. Merk op dat negatieve waarden de schaduw links ( offset-x ) en boven ( offset-y ) het object plaatsen.
De laatste twee parameters zijn optioneel. U kunt de vervagingsstraal van de schaduw opgeven als een lengte. Standaard is deze ingesteld op 0. U kunt geen negatieve vervagingsradius hebben.
De kleur van de schaduw wordt opgegeven als . Als u geen kleur hebt opgegeven, volgt deze de waarde van de kleureigenschap .
Je weet misschien al dat box-shadow het werk redelijk goed doet. Dus, denk je misschien, waarom hebben we slagschaduw nodig ? Er zijn talloze gevallen waarin de functie slagschaduw( ) een redder in nood is. Laten we er een paar bekijken:
In tegenstelling tot een doosschaduw kunt u een slagschaduw toevoegen aan niet-rechthoekige vormen. We hebben bijvoorbeeld een transparante SVG of PNG met een niet-rechthoekige vorm, bijvoorbeeld een ster. Hier kan het toevoegen van een schaduw die overeenkomt met het object zelf worden voltooid met box-schaduw of slagschaduw . Overweeg beide scenario's:
HTML
CSS
.star-img img { display: inline-block; height: 15em; width: 25em; } .box-shadow { color: red; box-shadow: 0.60em 0.60em 0.2em; } .drop-shadow { filter: drop-shadow(0.60em 0.60em 0.2em); }
Uitgang :
Bij het vergelijken van beide effecten is het duidelijk dat een box-schaduw een rechthoekige schaduw geeft; het maakt ook niet uit of de afbeelding transparant is of al een achtergrond heeft. Aan de andere kant, drop-shadow kunt u een schaduw te creëren die voldoet aan de vorm van het beeld zelf.
De beperkende factoren zijn dat de functie slagschaduw( ) alle parameters van het type accepteert, behalve het inzetsleutelwoord en de spreidingsparameter .
Er zijn verschillende gevallen waarin u componenten moet bouwen door bepaalde elementen te overlappen. Als je box-shadow gebruikt , krijg je te maken met het probleem om op de juiste manier een schaduw te werpen. Zo werkt het bij het groeperen van een afbeelding en een tekstcomponent:
HTML
Live in the moment
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.
Basis CSS
body { padding: 5em 1em; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } h2 { font-size: 2rem; } p { font-size: 0.8rem; } .parent-container { display: flex; flex-direction: column; height: 17rem; width: 50em; } .image-container img { width: 15em; position: absolute; z-index: 1; top: 2em; left: 1.5em; } .text-container { color: rgb(255, 236, 236); background-color: rgb(141 0 35); width: 30rem; padding: 3rem; align-self: flex-end; position: relative; }
Breng nu de doosschaduw en slagschaduw aan om het verschil te zien.
.drop-shadow { filter: drop-shadow(0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.5)); } .box, .box img { box-shadow: 0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.3); }
Uitgang:
Zoals u kunt zien, de box-shadow wordt aangebracht op elk element afzonderlijk, terwijl de slagschaduw groepen hen beiden en past de schaduw.
U kunt de eigenschap clip-path gebruiken om een bepaald gebied te knippen dat bepaalt welke delen van een afbeelding of element moeten worden weergegeven. Met het slagschaduwfilter kunnen we een slagschaduw maken op het uitgeknipte element door het toe te passen op het bovenliggende element van dat element:
HTML
CSS
.parent-container { filter: drop-shadow(0rem 0rem 1.5rem maroon); } .clipped-element { width: 50em; height: 50em; margin: 0 auto; background-image: url(smiling-girl.jpg); clip-path: circle(50%); background-size: cover; background-repeat: no-repeat; }
Uitgang:
We hebben 50% van de afbeelding bijgesneden met een cirkelvormig pad. Daarom wordt het slagschaduwfilter alleen op het zichtbare deel van de afbeelding toegepast. Is het niet geweldig?
Zoals we hierboven hebben besproken, ondersteunt slagschaduw de spreidingsparameter niet . Dit betekent dat het niet mogelijk zou zijn om een omtrekeffect te maken met de functie slagschaduw( ) omdat het overal wordt afgebroken. Het geeft ook verschillende schaduweffecten weer van de doosschaduw en tekstschaduw (met dezelfde parameters). Je hebt misschien het gevoel dat de verschillen tussen de box-schaduw en de slagschaduw terug te voeren zijn op het CSS Box-model . De een volgt het, de ander niet. Hier is een voorbeeld:
HTML
Every MUO article will bring you one step closer.
Every MUO article will bring you one step closer.
Every MUO article will bring you one step closer.
Basis CSS
body { padding: 5em 1em; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .parent-container { width: 72rem; } p { font-size: 3em; font-style: bold; }
Schaduweffecten toepassen
.drop-shadow { filter: drop-shadow(0.5em 0.5em 0.1em #555); } .box-shadow { box-shadow: 0.5em 0.5em 0.1em #555; } .text-shadow { text-shadow: 0.5em 0.5em 0.1em #555; }
Uitgang:
Je kunt zien dat de box-shadow geeft een zwaardere, donkere schaduw dan de text-shadow en slagschaduw . Er is ook een klein verschil in de positionering van de schaduw tussen de tekstschaduw en slagschaduw . Desalniettemin kunt u, afhankelijk van uw wensen, de voorkeur geven aan verschillende schaduweffecten.
De functie slagschaduw( ) wordt ondersteund in alle moderne browsers, behalve oudere browsers zoals Internet Explorer. Hoewel het niet iets is dat de UX ernstig zou belemmeren, kun je een functiequery toevoegen met een box-shadow fallback.
De populariteit van box-shadow is vrij duidelijk vanwege de veelheid aan gebruiksscenario's. De functie slagschaduw ( ) wordt echter sterk onderbenut. We hopen dat je met verschillende schaduweffecten gaat experimenteren en slagschaduw in je toekomstige projecten wilt toepassen .
Pseudo-klassen voegen een geheel nieuwe reeks functionaliteit toe aan CSS en uw persoonlijke webontwikkelingsrepertoire. Leer er meer over om een bekwamere en efficiëntere webontwikkelaar te worden.
Hoewel u een grafische rekenmachine op uw computer kunt gebruiken, kan de Python-programmeertaalinterpreter ook dienst doen als bureaurekenmachine. Het is zo'n populaire hardloopgrap in de Python-gemeenschap dat het wordt genoemd in de officiële tutorial. Hier leest u hoe u Python als rekenmachine kunt gebruiken.
Als programmeur moet je uitdagingen aangaan om te overleven en wonderen te bouwen op het gebied van ontwikkeling of programmeren. Als u dus een geavanceerde programmeertaal wilt leren om uw carrièrevaardigheden te verbeteren, is Java een van de beste vooruitzichten die er zijn.
Het leren van een nieuwe programmeertaal zoals Python wordt moeiteloos als je een uitgebreid stappenplan hebt waarin wordt beschreven welke concepten je als beginner moet leren en hoe je verder kunt komen om de volgende mijlpaal te bereiken. Zelfs gevorderde programmeurs zouden hun basis regelmatig moeten opfrissen om een solide basis voor zichzelf op te bouwen.
Tegenwoordig is het gebruikelijk om een website of app te bouwen die de gebruikersinterface aanpast, afhankelijk van de browser of het apparaat. Er zijn twee benaderingen om dit doel te bereiken. De eerste omvat het maken van verschillende versies van uw website of app voor verschillende apparaten. Maar het is inefficiënt en kan leiden tot onvoorspelbare fouten.
Werken met getallen is een integraal onderdeel van programmeren. Elke programmeertaal biedt ondersteuning om getallen op veel verschillende manieren te manipuleren. In dit artikel leert u hoe u het totale aantal cijfers in een geheel getal kunt vinden met behulp van iteratieve, op logs gebaseerde en op tekenreeksen gebaseerde benaderingen.
SQL versus NoSQL: wat is de beste database voor uw volgende project?
Het insluiten van services van derden in uw WordPress-berichten is een opwindende manier om de interesse van een bezoeker te wekken. Ingesloten inhoud biedt ook visuele aanwijzingen die het scannen gemakkelijker maken. WordPress heeft het toevoegen van dit soort inhoud eenvoudig gemaakt.
Node.js is een JavaScript-runtimeomgeving waarmee u JavaScript buiten webbrowsers kunt uitvoeren, waardoor het een populaire keuze is voor het ontwikkelen van allerlei soorten toepassingen. Een deel van zijn populariteit is te danken aan de overvloed aan NPM-pakketten die er zijn om de ontwikkelaarservaring te vergemakkelijken.
Solidity is de programmeertaal die wordt gebruikt door slimme contracten op de Ethereum-blockchain. Het is een statisch getypeerde, objectgeoriënteerde programmeertaal.
GitHub-badges kunnen de leesbaarheid van een repository vergroten door gebruikers een snelle manier te bieden om de repository-statistieken vast te leggen. Badges kunnen worden ingesloten in uw README.md om het belang en de noodzaak van uw project aan andere ontwikkelaars duidelijk te maken. Als gevolg hiervan krijgen lezers een heel snel idee van de repository door de bijgevoegde badges te controleren.
Internationale feestdagen zijn een leuke manier om erkenning te geven aan sociale zaken, historische dagen en respectieve carrières. International Programmers' Day viert de rol die programmeurs spelen om het dagelijks leven te verbeteren. De beschaafde wereld waarin we leven is een product van het harde werk van programmeurs.
Of het nu gaat om een databasequery of resultaten van wiskundige bewerkingen, de Python-tekenreeksindelingsmethode biedt een meer dynamische en aantrekkelijke manier om resultaten aan een gebruiker te presenteren.
Eerder dit jaar bracht Microsoft de preview-versie van Visual Studio 2022 uit in de wilde programmeerwereld. Dit is goed nieuws! Het is een extreem populaire IDE, maar aan een opknapbeurt of misschien zelfs een revisie toe, gezien het tempo van de veranderingen in het DevOps-ecosysteem waarin het gedijt.
Softwarestatistieken zijn metingen die worden gebruikt om verschillende aspecten van uw software te kwantificeren. Deze aspecten kunnen variëren van de kosten, kwaliteit en efficiëntie van het ontwikkelteam.
Als je een Python-ontwikkelaar bent, kun je enorm profiteren van de reeks beschikbare frameworks. Terwijl sommige kaders het meest geschikt zijn voor grote ecosystemen, zijn andere gespecialiseerd in het dienen van specifieke ontwikkelingsdoelen. Lees verder om de basisfuncties, het gebruik en de verschillen tussen twee Python-frameworks te leren: Flask en CherryPy.
Veel programmeurs houden ervan om lastige wiskundige problemen op te lossen met behulp van code. Het helpt de geest te scherpen en het probleemoplossend vermogen te verbeteren. In dit artikel leer je hoe je de kleinste en grootste n-cijferige perfecte vierkanten en kubussen kunt vinden met Python, C++ en JavaScript. Elk voorbeeld bevat ook voorbeelduitvoer voor verschillende waarden.
Het if-statement is de drijvende kracht achter logisch programmeren. Als gevolg hiervan is een beter begrip van Pythons een belangrijke toevoeging aan je Python-programmeervaardigheden.
Technologie is zonder twijfel de industrie van de toekomst. Als je een van de miljoenen jonge volwassenen bent die op het punt staan om in de eerste fase van je carrière te duiken, vraag je je misschien af wat je moet doen als je niet van coderen houdt.
U kunt een real-life project in Python niet met succes voltooien zonder een virtuele omgeving. Tools zoals virtualenvwrapper en virtualenv zijn gebruikelijk voor het maken en beheren van virtuele omgevingen voor webontwikkeling, terwijl anaconda veel wordt gebruikt door datawetenschappers.
Als u van plan bent een geweldige webpagina-indeling te maken, moet u weten over marges, randen, opvulling en inhoud. Elk element in webdesign, of het nu een afbeelding of tekst is, gebruikt een kader met deze eigenschappen. Je kunt eenvoudig complexe lay-outs bouwen door te spelen met het doosmodel. In dit artikel zullen we het CSS Box-model ontleden en laten zien hoe u deze eigenschappen kunt gebruiken met praktische voorbeelden.
Hoewel u een grafische rekenmachine op uw computer kunt gebruiken, kan de Python-programmeertaalinterpreter ook dienst doen als bureaurekenmachine. Het is zo'n populaire hardloopgrap in de Python-gemeenschap dat het wordt genoemd in de officiële tutorial. Hier leest u hoe u Python als rekenmachine kunt gebruiken.
Als programmeur moet je uitdagingen aangaan om te overleven en wonderen te bouwen op het gebied van ontwikkeling of programmeren. Als u dus een geavanceerde programmeertaal wilt leren om uw carrièrevaardigheden te verbeteren, is Java een van de beste vooruitzichten die er zijn.
Het leren van een nieuwe programmeertaal zoals Python wordt moeiteloos als je een uitgebreid stappenplan hebt waarin wordt beschreven welke concepten je als beginner moet leren en hoe je verder kunt komen om de volgende mijlpaal te bereiken. Zelfs gevorderde programmeurs zouden hun basis regelmatig moeten opfrissen om een solide basis voor zichzelf op te bouwen.
Tegenwoordig is het gebruikelijk om een website of app te bouwen die de gebruikersinterface aanpast, afhankelijk van de browser of het apparaat. Er zijn twee benaderingen om dit doel te bereiken. De eerste omvat het maken van verschillende versies van uw website of app voor verschillende apparaten. Maar het is inefficiënt en kan leiden tot onvoorspelbare fouten.
Werken met getallen is een integraal onderdeel van programmeren. Elke programmeertaal biedt ondersteuning om getallen op veel verschillende manieren te manipuleren. In dit artikel leert u hoe u het totale aantal cijfers in een geheel getal kunt vinden met behulp van iteratieve, op logs gebaseerde en op tekenreeksen gebaseerde benaderingen.
Containers zijn zeer nuttig voor softwareontwikkeling, implementatie en beheer in een virtuele omgeving. Docker is handig in het containerisatieproces, maar het is niet het enige platform dat er is. Als u op zoek bent naar alternatieven voor Docker, hoeft u niet verder te zoeken. Deze lijst toont enkele veelzijdige en efficiënte Docker-alternatieven die u in uw volgende project kunt gebruiken.
SQL versus NoSQL: wat is de beste database voor uw volgende project?
Het insluiten van services van derden in uw WordPress-berichten is een opwindende manier om de interesse van een bezoeker te wekken. Ingesloten inhoud biedt ook visuele aanwijzingen die het scannen gemakkelijker maken. WordPress heeft het toevoegen van dit soort inhoud eenvoudig gemaakt.
Node.js is een JavaScript-runtimeomgeving waarmee u JavaScript buiten webbrowsers kunt uitvoeren, waardoor het een populaire keuze is voor het ontwikkelen van allerlei soorten toepassingen. Een deel van zijn populariteit is te danken aan de overvloed aan NPM-pakketten die er zijn om de ontwikkelaarservaring te vergemakkelijken.
Solidity is de programmeertaal die wordt gebruikt door slimme contracten op de Ethereum-blockchain. Het is een statisch getypeerde, objectgeoriënteerde programmeertaal.
