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/list-makeup-items" 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/list/50/list-makeup-items.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Lista de artículos de maquillaje" 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/list-makeup-items">Lista de artículos de maquillaje </a>
</h4>
</div> <div class="group">
<a href="/es/bash-scripting-difference-between-zsh" 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/bash-script/82/bash-scripting-difference-between-zsh.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Secuencias de comandos Bash: diferencia entre Zsh y Bash" 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/bash-scripting-difference-between-zsh">Secuencias de comandos Bash: diferencia entre Zsh y Bash </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/find-if-given-matrix-is-toeplitz-or-not">
<img src="https://techcodeview.com/img/matrix/53/find-if-given-matrix-is-toeplitz-or-not.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Encuentre si la matriz dada es Toeplitz o no" 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/find-if-given-matrix-is-toeplitz-or-not" class="hover:text-tech-500 transition-colors line-clamp-3">Encuentre si la matriz dada es Toeplitz o no </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/c-functions">
<img src="https://techcodeview.com/img/it-problems-solutions/11/c-functions.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Funciones 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="/es/c-functions" class="hover:text-tech-500 transition-colors line-clamp-3">Funciones 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="/es/gpa-chart-conversion-4-1311174">
<img src="https://techcodeview.com/img/blog/37/gpa-chart-conversion-4.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Tabla de GPA: Conversión a escala 4.0" 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/gpa-chart-conversion-4-1311174" class="hover:text-tech-500 transition-colors line-clamp-3">Tabla de GPA: Conversión a escala 4.0 </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/routh-hurwitz-criterion">
<img src="https://techcodeview.com/img/control-systems/91/routh-hurwitz-criterion.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Criterio de Routh-Hurwitz" 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/routh-hurwitz-criterion" class="hover:text-tech-500 transition-colors line-clamp-3">Criterio de Routh-Hurwitz </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/os-walk-python">
<img src="https://techcodeview.com/img/python-library/95/os-walk-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="os.walk() en Python" 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/os-walk-python" class="hover:text-tech-500 transition-colors line-clamp-3">os.walk() en Python </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/when-i-click-my-mouse">
<img src="https://techcodeview.com/img/computer/27/when-i-click-my-mouse.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cuando hago clic con el mouse, a veces hace doble clic" 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/when-i-click-my-mouse" class="hover:text-tech-500 transition-colors line-clamp-3">Cuando hago clic con el mouse, a veces hace doble clic </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/m4u-free-alternatives">
<img src="https://techcodeview.com/img/alternatives/16/m4u-free-alternatives.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Alternativas gratuitas a M4u" 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/m4u-free-alternatives" class="hover:text-tech-500 transition-colors line-clamp-3">Alternativas gratuitas a M4u </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/linux-text-editors">
<img src="https://techcodeview.com/img/linux-tutorial/55/linux-text-editors.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Editores de texto de 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/linux-text-editors" class="hover:text-tech-500 transition-colors line-clamp-3">Editores de texto de 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/c-dereference-pointer">
<img src="https://techcodeview.com/img/c-tutorial/45/c-dereference-pointer.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Puntero de desreferencia 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="/es/c-dereference-pointer" class="hover:text-tech-500 transition-colors line-clamp-3">Puntero de desreferencia 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="/es/microservices-tutorial">
<img src="https://techcodeview.com/img/microservices-tutorial/32/microservices-tutorial.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Tutorial de microservicios" 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/microservices-tutorial" class="hover:text-tech-500 transition-colors line-clamp-3">Tutorial de microservicios </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/english-grammar/65/active-passive-voice-exercises.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ejercicios de voz activa y pasiva" 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/english-grammar/">Gramática Inglesa </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/active-passive-voice-exercises">Ejercicios de voz activa y pasiva </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/64/java-stringbufferinputstream-class.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Clase Java StringBufferInputStream" 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/java/">Java </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/java-stringbufferinputstream-class">Clase Java StringBufferInputStream </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/maven-tutorial/57/maven-tutorial.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Tutorial experto" 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/maven-tutorial/">Tutorial Experto </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/maven-tutorial">Tutorial experto </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/dbms-tutorial/25/dbms-tutorial.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Tutorial de SGBD" 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/dbms-tutorial/">Tutorial De Sgbd </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/dbms-tutorial">Tutorial de SGBD </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/95/how-start-club-high-school.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cómo iniciar un club en la escuela secundaria: guía de 8 pasos" 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/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/how-start-club-high-school-131868">Cómo iniciar un club en la escuela secundaria: guía de 8 pasos </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/02/git-origin-master.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Maestro de origen de Git" 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/git-tutorial/">Tutorial De Git </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/git-origin-master">Maestro de origen de Git </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/">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>