CSS-lettertyperand
De CSS-lettertyperand is een techniek die wordt gebruikt om een randachtige omtrek rond HTML-teksttekens. Deze techniek wordt gebruikt om de zichtbaarheid te vergroten of een decoratief effect aan de tekst toe te voegen. Dit kan worden bereikt met behulp van de eigenschap text-stroke, waarmee u het uiterlijk van tekst kunt aanpassen door er een rand omheen toe te voegen.
Hoe lettertyperand in CSS toe te passen
Er zijn twee methoden om lettertyperanden toe te passen op tekstelementen in HTML:
Inhoudsopgave
Laten we deze CSS-eigenschappen in detail bestuderen en begrijpen hoe ze worden gebruikt om tekstranden in HTML te plaatsen.
Gebruik de eigenschap text-shadow
De Eigenschap tekstschaduw in CSS voegt een schaduweffect toe aan tekst, waardoor diepte en nadruk ontstaat. Er zijn parameters nodig voor horizontale en verticale verschuivingen, vervagingsradius en kleur, waardoor ontwerpers verschillende tekstschaduweffecten kunnen creëren voor een verbeterde visuele aantrekkingskracht.
Syntaxis:
text-shadow: h-shadow v-shadow blur-radius color;
Eigendomswaarden :
De eigenschap text-shadow accepteert veel waarden, waarvan sommige in de onderstaande tabel worden vermeld.
| Eigendoms-waarde | Beschrijving |
|---|---|
h-shadow> | Stelt de horizontale schaduw rond de tekst in. |
v-shadow> | Stelt de verticale schaduw rond de tekst in. |
blur-radius> | Stelt de vervagingsradius rond de tekstschaduw in. |
color> | Stelt de kleur van de tekstschaduw in. |
none> | Plaatst niets rond de tekst (geen schaduw). |
initial> | Stelt de tekstschaduw in op de standaard beginwaarde. |
inherit> | Erft de eigenschapswaarden van het bovenliggende element. |
Winstwaarde:
Het retourneert een lettertyperand/schaduw rond de tekst.
Voorbeelden van lettertyperanden
Voorbeeld 1: In dit voorbeeld wordt de eigenschap text-shadow gebruikt om schaduw op de tekst te creëren.
html Titel CSS-tekstschaduweigenschap> <style>h1 { tekstschaduw: 0 0 3px #FF0000, 0 0 5px #0000FF; } stijl> hoofd> <body> <h1>techcodeview.comh1> body> html> </pre> </code> <p dir='ltr'> <b> <strong>Uitgang: </strong> </b> <span> </span> </p> <img src='//techcodeview.com/img/picked/01/css-font-border.webp' alt='tekstschaduw CSS'> <p dir='ltr'> <b> <strong>Voorbeeld 2: </strong> </b> <span>In dit voorbeeld wordt de eigenschap text-shadow gebruikt om tekst met randen te maken. </span> </p>html <code> <pre> <!DOCTYPE html> <html> <head> <title>Titel CSS-tekstschaduweigenschap> <!-- Style to use text-shadow property --> <style>.GFG { kleur: wit; lettergrootte: 50px; tekstschaduw: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; } stijl> hoofd> <body> <p>techcodeview.comp> body> html> </pre> </code> <p dir='ltr'> <b> <strong>Uitgang: </strong> </b> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-2.webp' alt='omrande tekst CSS'> <h2 id='using-textstroke-property'> <b> <strong>De eigenschap Text-stroke gebruiken </strong> </b> </h2> <p dir='ltr'> <span>De </span> <span>Tekst-streek-eigenschap </span> <span>wordt gebruikt om lijn aan de tekst toe te voegen. Deze eigenschap kan worden gebruikt om de breedte en kleur van de tekst te wijzigen. Deze eigenschap wordt ondersteund door het voorvoegsel -webkit- te gebruiken. </span> </p> <p dir='ltr'> <b> <strong>Syntaxis: </strong> </b> </p> <pre>-webkit-text-stroke: width color; </pre> <h3> <b> <strong>Voorbeeld </strong> </b> </h3> <p dir='ltr'> <span>In dit voorbeeld wordt de eigenschap Text-stroke gebruikt om tekst met randen te maken. </span> </p>html <code> <pre> <!DOCTYPE html> <html> <head> <title>Titel CSS-tekstlijneigenschap> <!-- Style to use text-stroke property --> <style>.GFG { kleur: wit; lettergrootte: 50px; -webkit-tekststrookbreedte: 1px; -webkit-tekst-streekkleur: zwart; } stijl> hoofd> <body> <p>techcodeview.comp> body> html> </pre> </code> <p dir='ltr'> <b> <strong>Uitgang: </strong> </b> <span> </span> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-3.webp' alt=''> <p dir='ltr'> <b> <strong>Ondersteunde browser: </strong> </b> </p> <ul> <li value='1'> <span>Google Chrome </span> <span>1 </span> </li> <li value='2'> <span>Rand </span> <span> </span> <span>12 </span> </li> <li value='3'> <span>Firefox </span> <span>1 </span> </li> <li value='4'> <span>Opera </span> <span>3.5 </span> </li> <li value='5'> <span>Safari </span> <span>1 </span> </li> </ul> <p dir='ltr'> <span>CSS is de basis van webpagina's en wordt gebruikt voor de ontwikkeling van webpagina's door websites en webapps te stylen. U kunt CSS vanaf de basis leren door dit te volgen </span> <span>CSS-zelfstudie </span> <span>En </span> <span>CSS-voorbeelden </span> <span>. </span> </p> <br> <br>
</div>
<!-- Article Footer with Prominent Share Buttons -->
<div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
<i class="fa fa-share-alt text-tech-500"> </i>
Deel </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=CSS-lettertyperand&url=https://www.techcodeview.com/nl/css-font-border"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-twitter text-lg"> </i>
<span class="hidden sm:inline">Twitter </span>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/nl/css-font-border"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-facebook text-lg"> </i>
<span class="hidden sm:inline">Facebook </span>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/nl/css-font-border&title=CSS-lettertyperand"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
Dit Vind Je Misschien Leuk </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/nl/definition-what-is-community-service-131294" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/blog/35/definition-what-is-community-service.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Definitie: Wat is dienstverlening aan de gemeenschap?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/nl/definition-what-is-community-service-131294">Definitie: Wat is dienstverlening aan de gemeenschap? </a>
</h4>
</div> <div class="group">
<a href="/nl/what-is-full-form-cdr" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/category/51/what-is-full-form-cdr.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Wat is de volledige vorm van CDR" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/nl/what-is-full-form-cdr">Wat is de volledige vorm van CDR </a>
</h4>
</div>
</div>
</div>
</div>
<!-- SECONDARY COLUMN (SIDEBAR) -->
<!-- Aside Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Best Articles Widget -->
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
<span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
Top Artikelen </h2>
</div>
<!-- Owl Carousel Preserved Container -->
<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
<!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/difference-between-implosion">
<img src="https://techcodeview.com/img/picked/60/difference-between-implosion.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Verschil tussen implosie en explosie" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/difference-between-implosion" class="hover:text-tech-500 transition-colors line-clamp-3">Verschil tussen implosie en explosie </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/r-programming-language-introduction">
<img src="https://techcodeview.com/img/it-problems-solutions/52/r-programming-language-introduction.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="R Programmeertaal – Inleiding" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/r-programming-language-introduction" class="hover:text-tech-500 transition-colors line-clamp-3">R Programmeertaal – Inleiding </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/what-is-an-unsubsidized-loan-1311490">
<img src="https://techcodeview.com/img/blog/01/what-is-an-unsubsidized-loan.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Wat is een niet-gesubsidieerde lening? Definitie en uitleg" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/what-is-an-unsubsidized-loan-1311490" class="hover:text-tech-500 transition-colors line-clamp-3">Wat is een niet-gesubsidieerde lening? Definitie en uitleg </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/finite-state-machine">
<img src="https://techcodeview.com/img/compiler-tutorial/79/finite-state-machine.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Eindigetoestandsautomaat" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/finite-state-machine" class="hover:text-tech-500 transition-colors line-clamp-3">Eindigetoestandsautomaat </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/true-history-3-hole-punch-1311142">
<img src="https://techcodeview.com/img/blog/51/true-history-3-hole-punch.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="De ware geschiedenis van de 3-gaatspons en zijn uitvinder" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/true-history-3-hole-punch-1311142" class="hover:text-tech-500 transition-colors line-clamp-3">De ware geschiedenis van de 3-gaatspons en zijn uitvinder </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/printing-source-code-of-a-c-program-itself">
<img src="https://techcodeview.com/img/c-language/66/printing-source-code-of-a-c-program-itself.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Het afdrukken van de broncode van een C-programma zelf" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/printing-source-code-of-a-c-program-itself" class="hover:text-tech-500 transition-colors line-clamp-3">Het afdrukken van de broncode van een C-programma zelf </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/assertions">
<img src="https://techcodeview.com/img/selenium-tutorial/50/assertions.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Beweringen" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/assertions" class="hover:text-tech-500 transition-colors line-clamp-3">Beweringen </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/difference-between-insertion-sort">
<img src="https://techcodeview.com/img/technical-scripter-2020/11/difference-between-insertion-sort.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Verschil tussen invoegsortering en selectiesortering" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/difference-between-insertion-sort" class="hover:text-tech-500 transition-colors line-clamp-3">Verschil tussen invoegsortering en selectiesortering </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/types-linux-operating-system">
<img src="https://techcodeview.com/img/linux-tutorial/72/types-linux-operating-system.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Soorten Linux-besturingssystemen" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/types-linux-operating-system" class="hover:text-tech-500 transition-colors line-clamp-3">Soorten Linux-besturingssystemen </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/18-awesome-act-hacks-help-you-ace-test-1311534">
<img src="https://techcodeview.com/img/blog/66/18-awesome-act-hacks-help-you-ace-test.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="18 geweldige ACT-hacks om u te helpen de test te doorstaan" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/18-awesome-act-hacks-help-you-ace-test-1311534" class="hover:text-tech-500 transition-colors line-clamp-3">18 geweldige ACT-hacks om u te helpen de test te doorstaan </a>
</h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
<!-- Categories -->
<div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Categorie </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/nl/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Bloggen
</a> <a href="/nl/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Java-Conversie
</a> <a href="/nl/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Wiskunde
</a> <a href="/nl/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Java-Collecties
</a> <a href="/nl/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Verschillen
</a> <a href="/nl/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Java-Reeks
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Interessante Artikelen </h2>
</div>
<div id="owl-carousel-4" class="owl-carousel owl-theme">
<!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/java-tutorial/27/3n-1-problem-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="3N+1-probleem op Java" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/nl/java-tutorial/">Java-Zelfstudie </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/3n-1-problem-java">3N+1-probleem op Java </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/neural-network/79/introduction-convolution-neural-network.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Inleiding tot Convolutie Neuraal Netwerk" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/nl/neural-network/">Neuraal Netwerk </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/introduction-convolution-neural-network">Inleiding tot Convolutie Neuraal Netwerk </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/mensuration-3d/00/how-many-faces-edges.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Hoeveel vlakken, randen en hoekpunten heeft een kubus?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/nl/mensuration-3d/">3D-Meting </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/how-many-faces-edges">Hoeveel vlakken, randen en hoekpunten heeft een kubus? </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/c-loops-control-statements/96/switch-statement-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Schakelverklaring in C" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/nl/c-loops-control-statements/">C-Lussen En Controleverklaringen </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/switch-statement-c">Schakelverklaring in C </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/geeks-premier-league-2022/98/how-create-shell-script-linux.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Hoe maak je een Shell-script in Linux?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/nl/geeks-premier-league-2022-cat/">Geeks-Premier-League-2022 </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/how-create-shell-script-linux">Hoe maak je een Shell-script in Linux? </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/picked/58/types-computer-ports.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Soorten computerpoorten" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/nl/picked/">Geplukt </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/types-computer-ports">Soorten computerpoorten </a> </h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
</div>
</div>
</div>
<!-- /Aside Column --> </div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<span class="footer-links">
Copyright ©2026 Alle Rechten Voorbehouden |
<a href="//www.techcodeview.com/es/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vrijwaring </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Wie Zijn Wij? </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privacybeleid </a>
</span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover { background-color: #0284c7; }
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>