Borde de fuente CSS
El borde de la fuente CSS es una técnica utilizada para crear un contorno en forma de borde alrededor de caracteres de texto HTML. Esta técnica se utiliza para realzar la visibilidad o agregar un efecto decorativo al texto. Esto se puede lograr usando la propiedad de trazo de texto, que permite personalizar la apariencia del texto agregando un borde a su alrededor.
Cómo aplicar el borde de fuente en CSS
Existen dos métodos para aplicar bordes de fuente a elementos de texto en HTML:
Tabla de contenidos
Estudiemos estas propiedades CSS en detalle y comprendamos cómo se usan para colocar bordes de texto en HTML.
Usando la propiedad de sombra de texto
El Propiedad de sombra de texto en CSS agrega un efecto de sombra al texto, proporcionando profundidad y énfasis. Toma parámetros para desplazamientos horizontales y verticales, radio de desenfoque y color, lo que permite a los diseñadores crear varios efectos de sombra de texto para mejorar el atractivo visual.
Sintaxis:
text-shadow: h-shadow v-shadow blur-radius color;
Valores de propiedad :
La propiedad text-shadow acepta muchos valores, algunos de ellos se mencionan en la siguiente tabla.
| El valor de la propiedad | Descripción |
|---|---|
h-shadow> | Establece la sombra horizontal alrededor del texto. |
v-shadow> | Establece la sombra vertical alrededor del texto. |
blur-radius> | Establece el radio de desenfoque alrededor de la sombra del texto. |
color> | Establece el color de la sombra del texto. |
none> | No establece nada alrededor del texto (sin sombra). |
initial> | Establece la sombra del texto en su valor inicial predeterminado. |
inherit> | Hereda los valores de propiedad de su elemento padre. |
Valor de retorno:
Devuelve un borde/sombra de fuente alrededor del texto.
Ejemplos de bordes de fuentes
Ejemplo 1: Este ejemplo utiliza la propiedad text-shadow para crear sombra en el texto.
HTML Título de propiedad de sombra de texto CSS> <style>h1 { sombra de texto: 0 0 3px #FF0000, 0 0 5px #0000FF; } estilo> cabeza> <body> <h1>techcodeview.comh1>cuerpo>html> </pre> </code> <p dir='ltr'> <b> <strong>Producción: </strong> </b> <span> </span> </p> <img src='//techcodeview.com/img/picked/01/css-font-border.webp' alt='CSS de sombra de texto'> <p dir='ltr'> <b> <strong>Ejemplo 2: </strong> </b> <span>Este ejemplo utiliza la propiedad text-shadow para crear texto con bordes. </span> </p>HTML <code> <pre> <!DOCTYPE html> <html> <head> <title>Título de propiedad de sombra de texto CSS> <!-- Style to use text-shadow property --> <style>.GFG {color: blanco; tamaño de fuente: 50px; sombra de texto: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; } estilo> cabeza> <body> <p>techcodeview.comp>cuerpo>html> </pre> </code> <p dir='ltr'> <b> <strong>Producción: </strong> </b> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-2.webp' alt='texto con borde CSS'> <h2 id='using-textstroke-property'> <b> <strong>Usando la propiedad de trazo de texto </strong> </b> </h2> <p dir='ltr'> <span>El </span> <span>Propiedad de trazo de texto </span> <span>se utiliza para agregar trazo al texto. Esta propiedad se puede utilizar para cambiar el ancho y el color del texto. Esta propiedad se admite mediante el uso del prefijo -webkit-. </span> </p> <p dir='ltr'> <b> <strong>Sintaxis: </strong> </b> </p> <pre>-webkit-text-stroke: width color; </pre> <h3> <b> <strong>Ejemplo </strong> </b> </h3> <p dir='ltr'> <span>Este ejemplo utiliza la propiedad de trazo de texto para crear texto con borde. </span> </p>HTML <code> <pre> <!DOCTYPE html> <html> <head> <title>Título de propiedad de trazo de texto CSS> <!-- Style to use text-stroke property --> <style>.GFG {color: blanco; tamaño de fuente: 50px; -webkit-texto-trazo-ancho: 1px; -webkit-text-trazo-color: negro; } estilo> cabeza> <body> <p>techcodeview.comp>cuerpo>html> </pre> </code> <p dir='ltr'> <b> <strong>Producción: </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>Borde </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 es la base de las páginas web y se utiliza para el desarrollo de páginas web al diseñar sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo esto </span> <span>Tutorial CSS </span> <span>y </span> <span>Ejemplos 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>
Compartir </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Borde de fuente CSS&url=https://www.techcodeview.com/es/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/es/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/es/css-font-border&title=Borde de fuente 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">
Te Puede Gustar </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/es/difference-between-rj11" 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/differences/90/difference-between-rj11.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Diferencia entre RJ11 y RJ12" 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="/es/difference-between-rj11">Diferencia entre RJ11 y RJ12 </a>
</h4>
</div> <div class="group">
<a href="/es/network-operating-system" 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/operating-system/08/network-operating-system.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="sistema operativo de red" 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="/es/network-operating-system">sistema operativo de red </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>
Artículos Más Populares </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="/es/what-is-10-1-million">
<img src="https://techcodeview.com/img/maths/45/what-is-10-1-million.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Cuánto es 10 de 1 millón?" 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="/es/what-is-10-1-million" class="hover:text-tech-500 transition-colors line-clamp-3">¿Cuánto es 10 de 1 millón? </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="/es/what-is-eop-your-guide-educational-opportunity-programs-1311278">
<img src="https://techcodeview.com/img/blog/27/what-is-eop-your-guide-educational-opportunity-programs.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Qué es la EOP? Su guía para programas de oportunidades educativas" 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="/es/what-is-eop-your-guide-educational-opportunity-programs-1311278" class="hover:text-tech-500 transition-colors line-clamp-3">¿Qué es la EOP? Su guía para programas de oportunidades educativas </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="/es/how-clear-terminal-history-linux">
<img src="https://techcodeview.com/img/geeks-premier-league-2023/58/how-clear-terminal-history-linux.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cómo borrar el historial de la terminal en Linux" 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="/es/how-clear-terminal-history-linux" class="hover:text-tech-500 transition-colors line-clamp-3">Cómo borrar el historial de la terminal en Linux </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="/es/torch-nn-pytorch">
<img src="https://techcodeview.com/img/pytorch-tutorial/00/torch-nn-pytorch.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="antorcha.nn en PyTorch" 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="/es/torch-nn-pytorch" class="hover:text-tech-500 transition-colors line-clamp-3">antorcha.nn en PyTorch </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="/es/learn-reactjs-tutorial">
<img src="https://techcodeview.com/img/reactjs-tutorial/35/learn-reactjs-tutorial.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Aprenda el tutorial de ReactJS" 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="/es/learn-reactjs-tutorial" class="hover:text-tech-500 transition-colors line-clamp-3">Aprenda el tutorial de ReactJS </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="/es/difference-between-network">
<img src="https://techcodeview.com/img/differences/38/difference-between-network.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Diferencia entre Red e Internet" 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="/es/difference-between-network" class="hover:text-tech-500 transition-colors line-clamp-3">Diferencia entre Red e Internet </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="/es/can-you-retake-ap-exams-1311348">
<img src="https://techcodeview.com/img/blog/33/can-you-retake-ap-exams.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Puedes volver a tomar los exámenes AP? Guía experto" 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="/es/can-you-retake-ap-exams-1311348" class="hover:text-tech-500 transition-colors line-clamp-3">¿Puedes volver a tomar los exámenes AP? Guía experto </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="/es/numpy-meshgrid-function">
<img src="https://techcodeview.com/img/python-numpy/52/numpy-meshgrid-function.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Función Numpy Meshgrid" 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="/es/numpy-meshgrid-function" class="hover:text-tech-500 transition-colors line-clamp-3">Función Numpy Meshgrid </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="/es/acceleration-time-graphs">
<img src="https://techcodeview.com/img/physics-class-11/92/acceleration-time-graphs.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Gráficos de tiempo de aceleración" 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="/es/acceleration-time-graphs" class="hover:text-tech-500 transition-colors line-clamp-3">Gráficos de tiempo de aceleración </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="/es/dealing-with-cyberbullying-schools-242118">
<img src="https://techcodeview.com/img/advice-teachers/73/dealing-with-cyberbullying-schools.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cómo afrontar el ciberacoso en las escuelas" 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="/es/dealing-with-cyberbullying-schools-242118" class="hover:text-tech-500 transition-colors line-clamp-3">Cómo afrontar el ciberacoso en las escuelas </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">Categoría </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/es/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="/es/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ón De Java
</a> <a href="/es/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áticas
</a> <a href="/es/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">
Colecciones Java
</a> <a href="/es/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">
Diferencias
</a> <a href="/es/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">Artículos De 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/physical-quantities/84/density-water.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Densidad del agua" 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="/es/physical-quantities/">Cantidades Fisicas </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/density-water">Densidad del agua </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/companies-list/48/coca-cola-company.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Coca Cola Company" 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="/es/companies-list/">Lista De Empresas </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/coca-cola-company">Coca Cola Company </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/ds-tutorial/14/circular-queue.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cola circular" 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="/es/ds-tutorial/">Tutorial Ds </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/circular-queue">Cola circular </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/autocad-tutorial/35/autocad-2019-free-download.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="AutoCAD 2019 Descarga gratis" 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="/es/autocad-tutorial/">Tutorial De Autocad </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/autocad-2019-free-download">AutoCAD 2019 Descarga gratis </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/digital-electronics/55/gray-code.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Código gris" 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="/es/digital-electronics/">Electrónica Digital </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/gray-code">Código gris </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-2023/22/rpm-command-linux.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comando RPM en 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="/es/geeks-premier-league-2023-cat/">Liga Premier De Frikis 2023 </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/rpm-command-linux">Comando RPM en Linux </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 Todos Los Derechos Reservados |
<a href="//www.techcodeview.com/ja/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Descargo De Responsabilidad </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Acerca De Nosotros </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privacidad </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>