Frontera del tipus de lletra CSS
La vora del tipus de lletra CSS és una tècnica utilitzada per crear un contorn semblant a una vora al voltant dels caràcters de text HTML. Aquesta tècnica s'utilitza per millorar la visibilitat o afegir un efecte decoratiu al text. Això es pot aconseguir mitjançant la propietat text-stroke, que permet personalitzar l'aparença del text afegint una vora al seu voltant.
Com aplicar la vora del tipus de lletra en CSS
Hi ha dos mètodes per aplicar vores de font als elements de text en HTML:
Taula de contingut
Estudiem aquestes propietats CSS en detall i entenem com s'utilitzen per posar vores de text en HTML.
Utilitzant la propietat text-shadow
El Propietat Text-Shadow en CSS afegeix un efecte d'ombra al text, proporcionant profunditat i èmfasi. Pren paràmetres per a desplaçaments horitzontals i verticals, radi de desenfocament i color, cosa que permet als dissenyadors crear diversos efectes d'ombra de text per millorar l'atractiu visual.
Sintaxi:
text-shadow: h-shadow v-shadow blur-radius color;
Valors de propietat :
La propietat text-shadow accepta molts valors, alguns d'ells s'esmenten a la taula següent.
| Valor de la propietat | Descripció |
|---|---|
h-shadow> | Estableix l'ombra horitzontal al voltant del text. |
v-shadow> | Estableix l'ombra vertical al voltant del text. |
blur-radius> | Estableix el radi de desenfocament al voltant de l'ombra del text. |
color> | Estableix el color de l'ombra del text. |
none> | No estableix res al voltant del text (sense ombra). |
initial> | Estableix l'ombra del text al seu valor inicial predeterminat. |
inherit> | Hereta els valors de la propietat del seu element pare. |
Valor de retorn:
Retorna una vora/ombra de tipus de lletra al voltant del text.
Exemples de vora de lletra
Exemple 1: Aquest exemple utilitza la propietat text-shadow per crear ombra al text.
html CSS text-shadow property title> <style>h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } estil> cap> <body> <h1>techcodeview.comh1> cos> html>> </pre> </code> <p dir='ltr'> <b> <strong>Sortida: </strong> </b> <span> </span> </p> <img src='//techcodeview.com/img/picked/01/css-font-border.webp' alt='CSS d'ombra de text'> <p dir='ltr'> <b> <strong>Exemple 2: </strong> </b> <span>Aquest exemple utilitza la propietat text-shadow per crear text amb vores. </span> </p>html <code> <pre> <!DOCTYPE html> <html> <head> <title>CSS text-shadow property title> <!-- Style to use text-shadow property --> <style>.GFG { color: blanc; mida de la lletra: 50px; text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; } estil> cap> <body> <p>techcodeview.comp> cos> html>> </pre> </code> <p dir='ltr'> <b> <strong>Sortida: </strong> </b> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-2.webp' alt='text amb vores CSS'> <h2 id='using-textstroke-property'> <b> <strong>Utilitzant la propietat de traç de text </strong> </b> </h2> <p dir='ltr'> <span>El </span> <span>Propietat de traç de text </span> <span>s'utilitza per afegir un traç al text. Aquesta propietat es pot utilitzar per canviar l'amplada i el color del text. Aquesta propietat és compatible amb l'ús del prefix -webkit-. </span> </p> <p dir='ltr'> <b> <strong>Sintaxi: </strong> </b> </p> <pre>-webkit-text-stroke: width color; </pre> <h3> <b> <strong>Exemple </strong> </b> </h3> <p dir='ltr'> <span>Aquest exemple utilitza la propietat text-stroke per crear text amb vores. </span> </p>html <code> <pre> <!DOCTYPE html> <html> <head> <title>Títol de propietat de traç de text CSS> <!-- Style to use text-stroke property --> <style>.GFG { color: blanc; mida de la lletra: 50px; -webkit-text-stroke-width: 1px; -webkit-text-traç-color: negre; } estil> cap> <body> <p>techcodeview.comp> cos> html>> </pre> </code> <p dir='ltr'> <b> <strong>Sortida: </strong> </b> <span> </span> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-3.webp' alt=''> <p dir='ltr'> <b> <strong>Navegador compatible: </strong> </b> </p> <ul> <li value='1'> <span>Google Chrome </span> <span>1 </span> </li> <li value='2'> <span>Edge </span> <span> </span> <span>12 </span> </li> <li value='3'> <span>Firefox </span> <span>1 </span> </li> <li value='4'> <span>Òpera </span> <span>3.5 </span> </li> <li value='5'> <span>Safari </span> <span>1 </span> </li> </ul> <p dir='ltr'> <span>CSS és la base de les pàgines web, s'utilitza per al desenvolupament de pàgines web dissenyant llocs web i aplicacions web. Podeu aprendre CSS des de principis seguint això </span> <span>Tutorial CSS </span> <span>i </span> <span>Exemples de CSS </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>
Comparteix </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Frontera del tipus de lletra CSS&url=https://www.techcodeview.com/ca/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/ca/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/ca/css-font-border&title=Frontera del tipus de lletra CSS"
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">
Potser T'Agradarà </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/ca/luhn-algorithm" 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/cryptography/51/luhn-algorithm.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="algorisme de Luhn" 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="/ca/luhn-algorithm">algorisme de Luhn </a>
</h4>
</div> <div class="group">
<a href="/ca/b-tree-visualization" 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/ds-tutorial/04/b-tree-visualization.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="B Visualització de l'arbre" 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="/ca/b-tree-visualization">B Visualització de l'arbre </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>
Articles Més Populars </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="/ca/why-does-my-knee-feel-like-it-wants-pop-131948">
<img src="https://techcodeview.com/img/blog/02/why-does-my-knee-feel-like-it-wants-pop.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Per què el meu genoll té la sensació que vol explotar?" 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="/ca/why-does-my-knee-feel-like-it-wants-pop-131948" class="hover:text-tech-500 transition-colors line-clamp-3">Per què el meu genoll té la sensació que vol explotar? </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="/ca/what-is-conditional-admission-131986">
<img src="https://techcodeview.com/img/blog/64/what-is-conditional-admission.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Què és l'admissió condicional? Què significa per a tu?" 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="/ca/what-is-conditional-admission-131986" class="hover:text-tech-500 transition-colors line-clamp-3">Què és l'admissió condicional? Què significa per a tu? </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="/ca/analog-communication">
<img src="https://techcodeview.com/img/analog-communication/04/analog-communication.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comunicació analògica" 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="/ca/analog-communication" class="hover:text-tech-500 transition-colors line-clamp-3">Comunicació analògica </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="/ca/80-interesting-questions-ask-people-any-situation-1311524">
<img src="https://techcodeview.com/img/blog/09/80-interesting-questions-ask-people-any-situation.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="80 preguntes interessants per fer a la gent en qualsevol situació" 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="/ca/80-interesting-questions-ask-people-any-situation-1311524" class="hover:text-tech-500 transition-colors line-clamp-3">80 preguntes interessants per fer a la gent en qualsevol situació </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="/ca/java-pushbackreader-class">
<img src="https://techcodeview.com/img/java/12/java-pushbackreader-class.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Classe Java PushbackReader" 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="/ca/java-pushbackreader-class" class="hover:text-tech-500 transition-colors line-clamp-3">Classe Java PushbackReader </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="/ca/virtual-lan">
<img src="https://techcodeview.com/img/it-problems-solutions/85/virtual-lan.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="LAN virtual (VLAN)" 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="/ca/virtual-lan" class="hover:text-tech-500 transition-colors line-clamp-3">LAN virtual (VLAN) </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="/ca/unsigned-int-c">
<img src="https://techcodeview.com/img/c-tutorial/76/unsigned-int-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="int sense signar en C" 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="/ca/unsigned-int-c" class="hover:text-tech-500 transition-colors line-clamp-3">int sense signar en C </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="/ca/basic-input-output-c">
<img src="https://techcodeview.com/img/cbse-class-11/00/basic-input-output-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Entrada/sortida bàsica en C++" 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="/ca/basic-input-output-c" class="hover:text-tech-500 transition-colors line-clamp-3">Entrada/sortida bàsica en C++ </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="/ca/what-is-knowledge-representation">
<img src="https://techcodeview.com/img/artificial-intelligence/38/what-is-knowledge-representation.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Què és la representació del coneixement?" 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="/ca/what-is-knowledge-representation" class="hover:text-tech-500 transition-colors line-clamp-3">Què és la representació del coneixement? </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="/ca/longest-increasing-subsequence">
<img src="https://techcodeview.com/img/amazon/61/longest-increasing-subsequence.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Subseqüència creixent més llarga (LIS)" 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="/ca/longest-increasing-subsequence" class="hover:text-tech-500 transition-colors line-clamp-3">Subseqüència creixent més llarga (LIS) </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">Categoria </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/ca/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">
Bloc
</a> <a href="/ca/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">
Conversió De Java
</a> <a href="/ca/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">
Matemàtiques
</a> <a href="/ca/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">
Col·leccions Java
</a> <a href="/ca/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">
Diferències
</a> <a href="/ca/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">
Cadena De Java
</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">Articles D'Interès </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-synchronization/30/deadlock-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Bloqueig a 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="/ca/java-synchronization/">Sincronització De Java </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/deadlock-java">Bloqueig a 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/it-problems-solutions/77/what-is-mac-address.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Què és l'adreça MAC?" 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="/ca/it-problems-solutions/">Problemes Informàtics I Solucions </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/what-is-mac-address">Què és l'adreça MAC? </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/java-basics/03/java-data-types.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Tipus de dades 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="/ca/java-basics/">Conceptes Bàsics De Java </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/java-data-types">Tipus de dades 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/blog/88/50-best-engineering-scholarships.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Les 50 millors beques d'enginyeria" 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="/ca/blog/">Bloc </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/50-best-engineering-scholarships-1311204">Les 50 millors beques d'enginyeria </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/blog/85/how-many-ap-classes-do-you-need.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Quantes classes AP necessiteu per a les escoles de la Ivy League?" 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="/ca/blog/">Bloc </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/how-many-ap-classes-do-you-need-1311138">Quantes classes AP necessiteu per a les escoles de la Ivy League? </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/mobile-phone-review/07/redmi-note-9-pro-review.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Redmi Note 9 Pro Revisió" 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="/ca/mobile-phone-review/">Revisió Del Telèfon Mòbil </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/redmi-note-9-pro-review">Redmi Note 9 Pro Revisió </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 Tots Els Drets Reservats |
<a href="//www.techcodeview.com/es/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Exempció De Responsabilitat </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Sobre Nosaltres </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privadesa </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>