Chenar cu font CSS
Chenarul fontului CSS este o tehnică folosită pentru a crea o contur asemănător unei margini în jurul caracterelor text HTML. Această tehnică este folosită pentru a spori vizibilitatea sau pentru a adăuga un efect decorativ textului. Acest lucru poate fi realizat folosind proprietatea text-stroke, care permite personalizarea aspectului textului prin adăugarea unui chenar în jurul acestuia.
Cum să aplicați chenarul fontului în CSS
Există două metode de a aplica chenarele fontului elementelor de text în HTML:
Cuprins
Să studiem aceste proprietăți CSS în detaliu și să înțelegem cum sunt folosite pentru a pune chenarele textului în HTML.
Folosind proprietatea text-shadow
The Proprietate text-umbră în CSS adaugă un efect de umbră textului, oferind profunzime și accent. Este nevoie de parametri pentru decalajele orizontale și verticale, raza de estompare și culoare, permițând designerilor să creeze diferite efecte de umbră de text pentru un aspect vizual îmbunătățit.
Sintaxă:
text-shadow: h-shadow v-shadow blur-radius color;
Valorile proprietăților :
Proprietatea text-shadow acceptă o mulțime de valori, unele dintre ele sunt menționate în tabelul de mai jos.
| Valoarea proprietății | Descriere |
|---|---|
h-shadow> | Setează umbra orizontală în jurul textului. |
v-shadow> | Setează umbra verticală în jurul textului. |
blur-radius> | Setează raza de estompare în jurul umbrei textului. |
color> | Setează culoarea umbrei textului. |
none> | Nu stabilește nimic în jurul textului (fără umbră). |
initial> | Setează umbra textului la valoarea inițială implicită. |
inherit> | Moștenește valorile proprietății din elementul părinte. |
Valoare returnată:
Returnează un chenar/umbră de font în jurul textului.
Exemple de chenar de font
Exemplul 1: Acest exemplu folosește proprietatea text-shadow pentru a crea umbră textului.
html Titlul proprietății text-umbră CSS> <style>h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } stil> cap> <body> <h1>techcodeview.comh1> body> html>> </pre> </code> <p dir='ltr'> <b> <strong>Ieșire: </strong> </b> <span> </span> </p> <img src='//techcodeview.com/img/picked/01/css-font-border.webp' alt='text umbră CSS'> <p dir='ltr'> <b> <strong>Exemplul 2: </strong> </b> <span>Acest exemplu folosește proprietatea text-shadow pentru a crea text mărginit. </span> </p>html <code> <pre> <!DOCTYPE html> <html> <head> <title>Titlul proprietății text-umbră CSS> <!-- Style to use text-shadow property --> <style>.GFG { culoare: alb; dimensiunea fontului: 50px; text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; } stil> cap> <body> <p>techcodeview.comp> body> html>> </pre> </code> <p dir='ltr'> <b> <strong>Ieșire: </strong> </b> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-2.webp' alt='text marginit CSS'> <h2 id='using-textstroke-property'> <b> <strong>Folosind proprietatea text-stroke </strong> </b> </h2> <p dir='ltr'> <span>The </span> <span>Proprietate Text-Stroke </span> <span>este folosit pentru a adăuga un contur în text. Această proprietate poate fi folosită pentru a modifica lățimea și culoarea textului. Această proprietate este acceptată prin utilizarea prefixului -webkit-. </span> </p> <p dir='ltr'> <b> <strong>Sintaxă: </strong> </b> </p> <pre>-webkit-text-stroke: width color; </pre> <h3> <b> <strong>Exemplu </strong> </b> </h3> <p dir='ltr'> <span>Acest exemplu folosește proprietatea text-stroke pentru a crea text mărginit. </span> </p>html <code> <pre> <!DOCTYPE html> <html> <head> <title>Titlul proprietății CSS text-stroke> <!-- Style to use text-stroke property --> <style>.GFG { culoare: alb; dimensiunea fontului: 50px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-culoare: negru; } stil> cap> <body> <p>techcodeview.comp> body> html>> </pre> </code> <p dir='ltr'> <b> <strong>Ieșire: </strong> </b> <span> </span> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-3.webp' alt=''> <p dir='ltr'> <b> <strong>Browser acceptat: </strong> </b> </p> <ul> <li value='1'> <span>Google Chrome </span> <span>1 </span> </li> <li value='2'> <span>Margine </span> <span> </span> <span>12 </span> </li> <li value='3'> <span>Firefox </span> <span>1 </span> </li> <li value='4'> <span>Operă </span> <span>3.5 </span> </li> <li value='5'> <span>Safari </span> <span>1 </span> </li> </ul> <p dir='ltr'> <span>CSS este baza paginilor web, este folosit pentru dezvoltarea paginilor web prin modelarea site-urilor web și a aplicațiilor web. Puteți învăța CSS de la zero urmând acest lucru </span> <span>Tutorial CSS </span> <span>și </span> <span>Exemple 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>
Distribuie </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Chenar cu font CSS&url=https://www.techcodeview.com/ro/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/ro/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/ro/css-font-border&title=Chenar cu font 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">
S-Ar Putea Să Vă Placă </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/ro/act-vs-sat-11-key-differences-help-you-pick-right-test-1311422" 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/57/act-vs-sat-11-key-differences-help-you-pick-right-test.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="ACT vs SAT: 11 diferențe cheie pentru a vă ajuta să alegeți testul potrivit" 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="/ro/act-vs-sat-11-key-differences-help-you-pick-right-test-1311422">ACT vs SAT: 11 diferențe cheie pentru a vă ajuta să alegeți testul potrivit </a>
</h4>
</div> <div class="group">
<a href="/ro/ribbon-tabs-excel" 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/ms-excel-tutorial/93/ribbon-tabs-excel.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Panglică și file în Excel" 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="/ro/ribbon-tabs-excel">Panglică și file în Excel </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 Articole </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="/ro/agile-model">
<img src="https://techcodeview.com/img/software-engineering/79/agile-model.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Model Agil" 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="/ro/agile-model" class="hover:text-tech-500 transition-colors line-clamp-3">Model Agil </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="/ro/what-are-good-sat-scores-1311074">
<img src="https://techcodeview.com/img/blog/73/what-are-good-sat-scores.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Care sunt scorurile SAT bune pentru colegii? 101 Școli + Sfaturi" 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="/ro/what-are-good-sat-scores-1311074" class="hover:text-tech-500 transition-colors line-clamp-3">Care sunt scorurile SAT bune pentru colegii? 101 Școli + Sfaturi </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="/ro/introduction-array-implementation-queue">
<img src="https://techcodeview.com/img/goldman-sachs/50/introduction-array-implementation-queue.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Introducerea și implementarea matricei de coadă" 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="/ro/introduction-array-implementation-queue" class="hover:text-tech-500 transition-colors line-clamp-3">Introducerea și implementarea matricei de coadă </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="/ro/happy-number">
<img src="https://techcodeview.com/img/misc/37/happy-number.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Număr fericit" 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="/ro/happy-number" class="hover:text-tech-500 transition-colors line-clamp-3">Număr fericit </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="/ro/counting-sort-data-structures">
<img src="https://techcodeview.com/img/counting-sort/51/counting-sort-data-structures.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Counting Sort – Structuri de date și tutoriale de algoritmi" 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="/ro/counting-sort-data-structures" class="hover:text-tech-500 transition-colors line-clamp-3">Counting Sort – Structuri de date și tutoriale de algoritmi </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="/ro/what-are-ap-classes-why-should-you-take-them-1311092">
<img src="https://techcodeview.com/img/blog/47/what-are-ap-classes-why-should-you-take-them.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ce sunt clasele AP? De ce ar trebui să le iei?" 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="/ro/what-are-ap-classes-why-should-you-take-them-1311092" class="hover:text-tech-500 transition-colors line-clamp-3">Ce sunt clasele AP? De ce ar trebui să le iei? </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="/ro/largest-number-in-bst-which-is-less-than-or-equal-to-k">
<img src="https://techcodeview.com/img/tree/91/largest-number-in-bst-which-is-less-than-or-equal-to-k.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cel mai mare număr din BST, care este mai mic sau egal cu k" 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="/ro/largest-number-in-bst-which-is-less-than-or-equal-to-k" class="hover:text-tech-500 transition-colors line-clamp-3">Cel mai mare număr din BST, care este mai mic sau egal cu k </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="/ro/whats-better-you-131540">
<img src="https://techcodeview.com/img/blog/55/whats-better-you.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ce este mai bine pentru tine: IB sau AP? Ghid de experti ai colegiului" 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="/ro/whats-better-you-131540" class="hover:text-tech-500 transition-colors line-clamp-3">Ce este mai bine pentru tine: IB sau AP? Ghid de experti ai colegiului </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="/ro/uml-class-diagram">
<img src="https://techcodeview.com/img/uml-tutorial/95/uml-class-diagram.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Diagrama de clasă UML" 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="/ro/uml-class-diagram" class="hover:text-tech-500 transition-colors line-clamp-3">Diagrama de clasă UML </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="/ro/float-c">
<img src="https://techcodeview.com/img/c-tutorial/67/float-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Plutește în 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="/ro/float-c" class="hover:text-tech-500 transition-colors line-clamp-3">Plutește în C </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="/ro/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">
Blog
</a> <a href="/ro/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">
Conversie Java
</a> <a href="/ro/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">
Matematica
</a> <a href="/ro/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">
Colecții Java
</a> <a href="/ro/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">
Diferențele
</a> <a href="/ro/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">
Șir 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">Articole Interesante </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/chemical-bonding/17/hybridization.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Hibridizare" 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="/ro/chemical-bonding/">Legături Chimice </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/hybridization">Hibridizare </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/operating-system/08/network-operating-system.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Sistem de operare în rețea" 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="/ro/operating-system/">Sistem De Operare </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/network-operating-system">Sistem de operare în rețea </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/98/what-is-thrash.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ce este Thrash?" 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="/ro/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/what-is-thrash">Ce este Thrash? </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/maths-class-12/21/vector-projection-formula.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Proiecție vectorială – Formulă, Derivare și Exemple" 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="/ro/maths-class-12-cat/">Matematică-Clasa-12 </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/vector-projection-formula">Proiecție vectorială – Formulă, Derivare și Exemple </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/misc/97/sql-null-functions.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="SQL | Funcții NULL" 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="/ro/misc/">Diverse </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/sql-null-functions">SQL | Funcții NULL </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/get-informed/29/explained-what-is-among-us.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Explicat: Ce este printre noi?" 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="/ro/get-informed/">Informați-Vă </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/explained-what-is-among-us-24276">Explicat: Ce este printre noi? </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 Toate Drepturile Rezervate |
<a href="//www.techcodeview.com/sk/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Declinare A Răspunderii </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Despre Noi </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica De Confidențialitate </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>