CSS šrifto kraštinė

CSS šrifto kraštinė

CSS šrifto siena yra technika, naudojama kuriant a į kraštą panašus kontūras aplink HTML teksto simbolius. Ši technika naudojama norint pagerinti matomumą arba suteikti tekstui dekoratyvumo. Tai galima pasiekti naudojant teksto brūkšnio savybę, kuri leidžia tinkinti teksto išvaizdą, aplink jį pridedant kraštinę.

Kaip taikyti šrifto kraštinę CSS

Yra du būdai, kaip taikyti šrifto kraštines teksto elementams HTML:

Turinys

Išsamiai išnagrinėkime šias CSS ypatybes ir supraskime, kaip jos naudojamos teksto kraštinėms įterpti HTML.

Naudojant teksto šešėlio ypatybę

The Teksto šešėlio ypatybė CSS suteikia tekstui šešėlio efektą, suteikdamas gylio ir pabrėžimo. Tam reikalingi horizontalių ir vertikalių poslinkių, suliejimo spindulio ir spalvų parametrai, todėl dizaineriai gali sukurti įvairius teksto šešėlių efektus, kad pagerintų vizualinį patrauklumą.

Sintaksė:

text-shadow: h-shadow v-shadow blur-radius color; 

Turto vertės :

text-shadow ypatybė priima daug reikšmių, kai kurios iš jų nurodytos toliau esančioje lentelėje.

Turto vertė apibūdinimas
h-shadow> Nustato horizontalų šešėlį aplink tekstą.
v-shadow> Nustato vertikalų šešėlį aplink tekstą.
blur-radius> Nustato suliejimo spindulį aplink teksto šešėlį.
color> Nustato teksto šešėlio spalvą.
none> Nieko nenustato aplink tekstą (be šešėlio).
initial> Nustato teksto šešėlį į numatytąją pradinę reikšmę.
inherit> Paveldi nuosavybės vertes iš pirminio elemento.

Grąžinimo vertė:

Tai grąžina šrifto kraštinę / šešėlį aplink tekstą.

Šrifto kraštinių pavyzdžiai

1 pavyzdys: Šiame pavyzdyje teksto šešėliui sukurti naudojama teksto šešėlio savybė.

html
       CSS teksto šešėlio nuosavybės pavadinimas> <style>h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } style> head> <body>  <h1>techcodeview.comh1> body> html>>> </tag>  <p dir='ltr'>  <b>  <strong>Išvestis: </strong>  </b>  <span>  </span> </p>  <img src='//techcodeview.com/img/picked/01/css-font-border.webp' alt='teksto šešėlis CSS'> <p dir='ltr'>  <b>  <strong>2 pavyzdys: </strong>  </b>  <span>Šiame pavyzdyje naudojama teksto šešėlio savybė, kad būtų sukurtas tekstas su apvadu. </span> </p>html <tag data-text-1=' <!DOCTYPE html>  <html>  <head>  <title>CSS teksto šešėlio nuosavybės pavadinimas> <!-- Style to use text-shadow property -->  <style>.GFG { spalva: balta; šrifto dydis: 50 pikselių; teksto šešėlis: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; } style> head> <body>  <p>techcodeview.comp> body> html>>> </tag>  <p dir='ltr'>  <b>  <strong>Išvestis: </strong>  </b>  </p>  <img src='//techcodeview.com/img/picked/01/css-font-border-2.webp' alt='CSS parašytas tekstas'> <h2 id='using-textstroke-property'>  <b>  <strong>Naudojant teksto potėpio ypatybę </strong>  </b>  </h2> <p dir='ltr'> <span>The </span>  <span>Teksto potėpio ypatybė </span>  <span>naudojamas potėpiui į tekstą pridėti. Ši savybė gali būti naudojama norint pakeisti teksto plotį ir spalvą. Ši savybė palaikoma naudojant -webkit- priešdėlį. </span> </p>  <p dir='ltr'>  <b>  <strong>Sintaksė: </strong>  </b>  </p>  <tag data-text-3='-webkit-text-stroke: width color; </pre>  </code> <h3>  <b>  <strong>Pavyzdys </strong>  </b>  </h3> <p dir='ltr'> <span>Šiame pavyzdyje teksto apvado kūrimui naudojama teksto brūkšnio savybė. </span> </p>html <tag data-text-1=' <!DOCTYPE html>  <html>  <head>  <title>CSS teksto potėpio ypatybės pavadinimas> <!-- Style to use text-stroke property -->  <style>.GFG { spalva: balta; šrifto dydis: 50 pikselių; -Webkit-text-stroke-width: 1px; -Webkit-text-stroke-color: juoda; } style> head> <body>  <p>techcodeview.comp> body> html>>> </tag>  <p dir='ltr'>  <b>  <strong>Išvestis: </strong>  </b>  <span>  </span> </p>  <img src='//techcodeview.com/img/picked/01/css-font-border-3.webp' alt=''> <p dir='ltr'>  <b>  <strong>Palaikoma naršyklė: </strong>  </b>  </p>  <ul> <li value='1'>  <span>Google Chrome </span>  <span>1 </span> </li> <li value='2'>  <span>Kraštas </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 yra tinklalapių pagrindas. Jis naudojamas kuriant tinklalapius, formuojant svetaines ir žiniatinklio programas. CSS galite išmokti nuo pat pradžių vadovaudamiesi šiuo nurodymu. </span>  <span>CSS pamoka </span>  <span>ir </span>  <span>CSS pavyzdžiai </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>
                                Bendrinti                              </h4>
                             
                              <div class="flex flex-wrap justify-center gap-3">
                                 <!-- Twitter -->
                                 <a href="https://twitter.com/intent/tweet?text=CSS šrifto kraštinė&url=https://www.techcodeview.com/lt/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/lt/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/lt/css-font-border&title=CSS šrifto kraštinė" 
                                   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">
                        Jums Gali Patikti                     </h3>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                         <div class="group">
                              <a href="/lt/walmarts-live-better-u-1311076" 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/82/walmarts-live-better-u.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="„Walmart's Live Better U“: apžvalgos ir reikalavimai" 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="/lt/walmarts-live-better-u-1311076">„Walmart's Live Better U“: apžvalgos ir reikalavimai </a>
                              </h4>
                         </div> <div class="group">
                              <a href="/lt/how-download-tally-erp-9-software" 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/tally-tutorial/74/how-download-tally-erp-9-software.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kaip atsisiųsti programinę įrangą Tally ERP 9" 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="/lt/how-download-tally-erp-9-software">Kaip atsisiųsti programinę įrangą Tally ERP 9 </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 Straipsniai             </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="/lt/what-is-main-c">
						 <img src="https://techcodeview.com/img/c-tutorial/79/what-is-main-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kas yra pagrindinis 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="/lt/what-is-main-c" class="hover:text-tech-500 transition-colors line-clamp-3">Kas yra pagrindinis 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="/lt/how-add-line-html">
						 <img src="https://techcodeview.com/img/html-tutorial/25/how-add-line-html.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kaip pridėti eilutę į HTML" 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="/lt/how-add-line-html" class="hover:text-tech-500 transition-colors line-clamp-3">Kaip pridėti eilutę į HTML </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="/lt/java-io-inputstream-class-in-java">
						 <img src="https://techcodeview.com/img/misc/23/java-io-inputstream-class-in-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Java.io.InputStream klasė Java" 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="/lt/java-io-inputstream-class-in-java" class="hover:text-tech-500 transition-colors line-clamp-3">Java.io.InputStream klasė Java </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="/lt/race-vs-ethnicity-vs-131920">
						 <img src="https://techcodeview.com/img/blog/85/race-vs-ethnicity-vs.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Rasė prieš etninę kilmę prieš tautybę: viskas, ką reikia žinoti" 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="/lt/race-vs-ethnicity-vs-131920" class="hover:text-tech-500 transition-colors line-clamp-3">Rasė prieš etninę kilmę prieš tautybę: viskas, ką reikia žinoti </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="/lt/c-preprocessors">
						 <img src="https://techcodeview.com/img/misc/86/c-preprocessors.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="C Pirminiai procesoriai" 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="/lt/c-preprocessors" class="hover:text-tech-500 transition-colors line-clamp-3">C Pirminiai procesoriai </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="/lt/ncaa-act-scores-what-you-need-qualify-131938">
						 <img src="https://techcodeview.com/img/blog/63/ncaa-act-scores-what-you-need-qualify.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="NCAA ACT balai: ko reikia norint gauti" 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="/lt/ncaa-act-scores-what-you-need-qualify-131938" class="hover:text-tech-500 transition-colors line-clamp-3">NCAA ACT balai: ko reikia norint gauti </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="/lt/life-cycle-thread">
						 <img src="https://techcodeview.com/img/java-multithreading/43/life-cycle-thread.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Gijos gyvavimo ciklas (gijos būsenos)" 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="/lt/life-cycle-thread" class="hover:text-tech-500 transition-colors line-clamp-3">Gijos gyvavimo ciklas (gijos būsenos) </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="/lt/inter-process-communication">
						 <img src="https://techcodeview.com/img/process-synchronization/04/inter-process-communication.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Tarpprocesinis ryšys (IPC)" 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="/lt/inter-process-communication" class="hover:text-tech-500 transition-colors line-clamp-3">Tarpprocesinis ryšys (IPC) </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="/lt/java-modulo">
						 <img src="https://techcodeview.com/img/java-tutorial/68/java-modulo.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Java modulis" 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="/lt/java-modulo" class="hover:text-tech-500 transition-colors line-clamp-3">Java modulis </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="/lt/time-required-to-meet-in-equilateral-triangle">
						 <img src="https://techcodeview.com/img/mathematical/02/time-required-to-meet-in-equilateral-triangle.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Laikas, reikalingas lygiakraščio trikampio susitikimui" 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="/lt/time-required-to-meet-in-equilateral-triangle" class="hover:text-tech-500 transition-colors line-clamp-3">Laikas, reikalingas lygiakraščio trikampio susitikimui </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">Kategorija </h2>
		 </div>
		 <div class="flex flex-wrap gap-2">
             <a href="/lt/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">
                Dienoraštis
             </a> <a href="/lt/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 Konvertavimas
             </a> <a href="/lt/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">
                Matematika
             </a> <a href="/lt/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 Kolekcijos
             </a> <a href="/lt/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">
                Skirtumai
             </a> <a href="/lt/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 Eilutė
             </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">Įdomios Straipsniai </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/machine-learning/38/applications-machine-learning.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Mašininio mokymosi programos" 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="/lt/machine-learning/">Mašininis Mokymasis </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/lt/applications-machine-learning">Mašininio mokymosi programos </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-misc/75/how-read-file-line-line-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kaip skaityti failą eilutė po eilutės 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="/lt/java-misc/">Java Įvairūs </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/lt/how-read-file-line-line-java">Kaip skaityti failą eilutė po eilutės 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/git-tutorial/81/git-checkout.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Git Checkout" 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="/lt/git-tutorial/">Git Pamoka </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/lt/git-checkout">Git Checkout </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/81/how-many-seconds-are-there-day.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kiek sekundžių yra per dieną? Savaitė? Metai?" 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="/lt/blog/">Dienoraštis </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/lt/how-many-seconds-are-there-day-13122">Kiek sekundžių yra per dieną? Savaitė? Metai? </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/59/78-cool-last-names-your-fiction-characters.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="78 šaunios pavardės jūsų grožinės literatūros veikėjams" 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="/lt/blog/">Dienoraštis </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/lt/78-cool-last-names-your-fiction-characters-13178">78 šaunios pavardės jūsų grožinės literatūros veikėjams </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/photoshop-tutorial/10/photoshop-shortcut-keys.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Photoshop spartieji klavišai" 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="/lt/photoshop-tutorial/">Photoshop Pamoka </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/lt/photoshop-shortcut-keys">Photoshop spartieji klavišai </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 Visos Teisės Saugomos | 
                 <a href="//www.techcodeview.com/">techcodeview.com </a> | 
                 <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atsisakymas </a> | 
                 <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Apie Mus </a> | 
                 <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatumo Politika </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>