Paso 4
- En Firebug, expanda la etiqueta para mostrar la etiqueta .</li>
<li>Haga clic en el valor de la etiqueta <title> (que es "Bienvenido: Mercury Tours") y péguelo en el campo Destino del Editor.</li>
</ul>
</td>
</tr>
<tr> <td><strong>Paso 5</strong>
<ul>
<li>Para crear el tercer comando, haga clic en la tercera línea en blanco en el Editor y escriba "escribir" en el cuadro de texto Comando.</li>
<li>En Firebug, haga clic en el botón "Inspeccionar".</li>
</ul>
</td>
</tr>
<tr> <td>Haga clic en el cuadro de texto Nombre de usuario. Tenga en cuenta que Firebug le muestra automáticamente el código HTML para ese elemento.</td>
</tr>
<tr> <td><strong>Paso 6</strong>
<p>Observe que el cuadro de texto Nombre de usuario no tiene una ID, pero tiene un atributo NAME. Por lo tanto, usaremos su NOMBRE como localizador. Copie el valor de NOMBRE y péguelo en el campo Destino en Selenium IDE.</p>
<p>Aún en el cuadro de texto Destino, prefijo "userName" con "name =", lo que indica que Selenium IDE debe apuntar a un elemento cuyo atributo NAME es "userName".</p>
<p>Escriba "invalidUN" en el cuadro de texto Valor de Selenium IDE. Su secuencia de comandos de prueba ahora debería verse como la imagen a continuación. Hemos terminado con el tercer comando. Nota: En lugar de UN inválido, puede ingresar cualquier otra cadena de texto. Pero Selenium IDE distingue entre mayúsculas y minúsculas y usted escribe valores / atributos exactamente como en la aplicación.</p>
</td>
</tr>
<tr> <td><strong>Paso 7</strong>
<ul>
<li>Para crear el cuarto comando, ingrese "tipo" en el cuadro de texto Comando.</li>
<li>Nuevamente, use el botón "Inspeccionar" de Firebug para obtener el localizador del cuadro de texto "Contraseña".</li>
</ul>
<ul>
<li>
<p>Pegue el atributo NAME ("contraseña") en el campo Destino y anteponga "name ="</p>
</li>
<li>
<p>Escriba "invalidPW" en el campo Valor en Selenium IDE. Su secuencia de comandos de prueba ahora debería verse como la imagen a continuación.</p>
</li>
</ul>
</td>
</tr>
<tr> <td><strong>Paso 8</strong>
<ul>
<li>Para el quinto comando, escriba "clickAndWait" en el cuadro de texto Comando en Selenium IDE.</li>
<li>Utilice el botón "Inspeccionar" de Firebug para obtener el localizador del botón "Iniciar sesión".</li>
</ul>
<ul>
<li>Pegue el valor del atributo NAME ("inicio de sesión") en el cuadro de texto Destino y anteponga "name =".</li>
<li>Su secuencia de comandos de prueba ahora debería verse como la imagen a continuación.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<p><strong>Paso 9:</strong> Guarde el caso de prueba de la misma manera que lo hicimos en la sección anterior.</p>
<a id="menu-6"></a>
<h2>Uso del botón Buscar</h2>
<p><strong>El botón Buscar en Selenium IDE se usa para verificar si lo que pusimos en el cuadro de texto Destino es de hecho el elemento de interfaz de usuario correcto.</strong></p>
<p>Usemos el caso de prueba Invalid_login que creamos en las secciones anteriores. Haga clic en cualquier comando con una entrada de Destino, digamos, el tercer comando.</p>
<p>Haga clic en el botón Buscar. Observe que el cuadro de texto Nombre de usuario dentro de la página Mercury Tours se resalta por un segundo.</p>
<p>Esto indica que Selenium IDE pudo detectar y acceder correctamente al elemento esperado. Si el botón Buscar resaltó un elemento diferente o ningún elemento en absoluto, entonces debe haber algo mal en su secuencia de comandos.</p>
<a id="menu-7"></a>
<h2>Ejecutar comando</h2>
<p><strong>Esto le permite ejecutar cualquier comando sin ejecutar todo el caso de prueba</strong> . Simplemente haga clic en la línea que desea ejecutar y luego haga clic en "Acciones> Ejecutar este comando" en la barra de menú o simplemente presione "X" en su teclado.</p>
<p><strong>Paso 1.</strong> Asegúrese de que su navegador esté en la página de inicio de Mercury Tours. Haga clic en el comando que desea ejecutar. En este ejemplo, haga clic en la línea "type | userName | invalidUN".</p>
<p><strong>Paso 2.</strong> Presione "X" en su teclado.</p>
<p><strong>Paso 3.</strong> Observe que el cuadro de texto para el nombre de usuario se completa con el texto "invalidUN"</p>
<p><strong>La ejecución de comandos de esta manera depende en gran medida de la página que Firefox está mostrando actualmente</strong> . Esto significa que si prueba el ejemplo anterior con la página de inicio de Google mostrada en lugar de la de Mercury Tours, su paso fallará porque no hay un cuadro de texto con un atributo "userName" dentro de la página de inicio de Google.</p>
<a id="menu-8"></a>
<h2>Punto de partida</h2>
<p><strong>Un punto de inicio es un indicador que le dice a Selenium IDE qué líneas comenzará la ejecución</strong> . <strong>Su tecla de método abreviado es "S".</strong></p>
<p>En el ejemplo anterior, la reproducción comenzará en la tercera línea (escriba | contraseña | invalidPW). <strong>Solo puede tener un punto de inicio en un único script de prueba.</strong></p>
<p>El punto de inicio es similar a Ejecutar comando en el sentido de que dependen de la página que se muestra actualmente. El punto de inicio fallará si está en la página incorrecta.</p>
<a id="menu-9"></a>
<h2>Puntos de interrupción</h2>
<p>Los puntos de interrupción son indicadores que le dicen a Selenium IDE dónde pausar automáticamente la prueba. <strong>La tecla de método abreviado es "B".</strong></p>
<p>El resaltado amarillo significa que el paso actual está pendiente. Esto prueba que Selenium IDE ha detenido la ejecución en ese paso. <strong>Puede tener varios puntos de interrupción en un caso de prueba.</strong></p>
<a id="menu-10"></a>
<h2>Paso</h2>
<p>Le permite ejecutar comandos sucesivos uno a la vez después de pausar el caso de prueba. Usemos el escenario de la sección anterior "Puntos de interrupción".</p>
<table>
<tbody>
<tr> <td width="50%"> </td> <td>
<p><strong>Antes de hacer clic en "Paso".</strong></p>
<p>El caso de prueba se detiene en la línea "clickAndWait | login".</p>
</td>
</tr>
<tr> <td width="50%"> </td> <td>
<p><strong>Después de hacer clic en "Paso".</strong></p>
<p>La línea "clickAndWait | login" se ejecuta y se detiene en el siguiente comando (verifyTitle | Sign-on: Mercury Tours).</p>
<p>Observe que la siguiente línea está en pausa aunque no haya ningún punto de interrupción allí. Este es el propósito principal de la función Paso: ejecuta los comandos siguientes uno a la vez para darle más tiempo para inspeccionar el resultado después de cada paso.</p>
</td>
</tr>
</tbody>
</table>
<a id="menu-11"></a>
<h2>Aspectos importantes a tener en cuenta al utilizar otros formatos en la vista de código fuente</h2>
<p><strong>Selenium IDE funciona bien solo con HTML; otros formatos todavía están en modo experimental</strong> . <strong>NO</strong> es <strong>recomendable</strong> crear o editar pruebas usando otros formatos en la vista de código fuente porque todavía se necesita mucho trabajo para que sea estable. A continuación se muestran los errores conocidos a partir de la versión 1.9.1.</p>
<ul>
<li>No podrá realizar la reproducción ni volver a la vista de tabla a menos que vuelva a HTML.</li>
<li>La única forma de agregar comandos de forma segura en el código fuente es registrándolos.</li>
<li>Cuando modifica el código fuente manualmente, todo se perderá cuando cambie a otro formato.</li>
<li>Aunque puede guardar su caso de prueba mientras está en la Vista de código fuente, Selenium IDE no podrá abrirlo.</li>
</ul>
<p><strong>La forma recomendada de convertir las pruebas de Selenese es utilizar la opción "Exportar caso de prueba como ..." en el menú Archivo, y no a través de la Vista de origen.</strong></p>
<a id="menu-12"></a>
<h2>Resumen</h2>
<ul>
<li>Los scripts de prueba se pueden crear registrando o escribiendo los comandos y parámetros manualmente.</li>
<li>Al crear scripts manualmente, se usa Firebug para obtener el localizador.</li>
<li>El botón Buscar se utiliza para comprobar que el comando puede acceder al elemento correcto.</li>
<li>La Vista de tabla muestra una secuencia de comandos de prueba en forma tabular, mientras que la Vista de origen lo muestra en formato HTML.</li>
<li>Cambiar la vista de código fuente a un formato que no sea HTML es todavía experimental.</li>
<li>No utilice la vista de código fuente para crear pruebas en otros formatos. En su lugar, utilice las funciones de exportación.</li>
<li>Los parámetros no son necesarios todo el tiempo. Depende del comando.</li>
<li>Hay tres tipos de comandos:</li>
<ul>
<li>Acciones: interactúa directamente con los elementos de la página.</li>
<li>Accesores: "lee" la propiedad de un elemento y la almacena en una variable.</li>
<li>Afirmaciones: compara un valor real con uno esperado.</li>
</ul>
<li>Las afirmaciones tienen tres tipos:</li>
<ul>
<li>Afirmar: si falla, los pasos posteriores ya no se ejecutan</li>
<li>Verificar: si falla, los pasos siguientes aún se ejecutan.</li>
<li>WaitFor: pasa si la condición especificada se cumple dentro del período de tiempo de espera; de lo contrario, fallará</li>
</ul>
<li>Los comandos más comunes son:</li>
<ul>
<li>abierto</li>
<li>click / clickAndWait</li>
<li>type / typeKeys</li>
<li>verifyTitle / assertTitle</li>
<li>verifyTextPresent</li>
<li>verifyElementPresent</li>
<li>verifyTable</li>
<li>waitForPageToLoad</li>
<li>waitForElementPresent</li>
</ul>
</ul>
</div>
</article>
<div id="container-5533149ee6411a5f99b370c693e87966"></div> </div>
</div>
</div>
</div>
</div>
<aside class="col-lg-4 sidebar sidebar--right">
<div class="widget widget-popular-posts">
<h2 class="widget-title">Entradas Populares</h2>
<ul class="post-list-small">
<li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__img-holder">
<div class="thumb-container thumb-100"><a href="/8004330-84-site-walkthrough-of-chris-mcgarry-com" title="# 84: Tutorial del sitio de chris-mcgarry.com - Trucos CSS" rel="bookmark"><img src="https://cdn.css-code.org/2114513/84_site_walkthrough_of_chris-mcgarrycom_css-tricks.png.webp" loading="lazy" alt="# 84: Tutorial del sitio de chris-mcgarry.com - Trucos CSS" title="# 84: Tutorial del sitio de chris-mcgarry.com - Trucos CSS" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
</div>
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8004330-84-site-walkthrough-of-chris-mcgarry-com" title="# 84: Tutorial del sitio de chris-mcgarry.com - Trucos CSS" rel="bookmark"># 84: Tutorial del sitio de chris-mcgarry.com - Trucos CSS 2025</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__img-holder">
<div class="thumb-container thumb-100"><a href="/8004331-83-thoughts-on-seo" title="# 83: Pensamientos sobre SEO - Trucos CSS" rel="bookmark"><img src="https://cdn.css-code.org/1852156/83_thoughts_on_seo_css-tricks.png.webp" loading="lazy" alt="# 83: Pensamientos sobre SEO - Trucos CSS" title="# 83: Pensamientos sobre SEO - Trucos CSS" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
</div>
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8004331-83-thoughts-on-seo" title="# 83: Pensamientos sobre SEO - Trucos CSS" rel="bookmark"># 83: Pensamientos sobre SEO - Trucos CSS 2025</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__img-holder">
<div class="thumb-container thumb-100"><a href="/8004332-87-moving-up-with-mamp" title="# 87: Avanzando con MAMP - Trucos CSS" rel="bookmark"><img src="https://cdn.css-code.org/2606993/87_moving_up_with_mamp_css-tricks.png.webp" loading="lazy" alt="# 87: Avanzando con MAMP - Trucos CSS" title="# 87: Avanzando con MAMP - Trucos CSS" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
</div>
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8004332-87-moving-up-with-mamp" title="# 87: Avanzando con MAMP - Trucos CSS" rel="bookmark"># 87: Avanzando con MAMP - Trucos CSS 2025</a></h3>
</div>
</div>
</li>
</ul>
</div>
<div class="widget widget-popular-posts">
<h2 class="widget-title">Los mejores comentarios de la mes</h2>
<ul class="post-list-small">
<li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8222490-what-is-software-testing-definition-basics-and-types" title="¿Qué son las pruebas de software? Definición, conceptos básicos y amp; Tipos" rel="bookmark">¿Qué son las pruebas de software? Definición, conceptos básicos y amp; Tipos</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8222491-what-is-compatibility-testing-forward-and-backward-testing-example" title="¿Qué son las pruebas de compatibilidad? Adelante & Prueba hacia atrás (ejemplo)" rel="bookmark">¿Qué son las pruebas de compatibilidad? Adelante & Prueba hacia atrás (ejemplo)</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8222492-what-is-security-testing-types-with-example" title="¿Qué son las pruebas de seguridad? Tipos con ejemplo" rel="bookmark">¿Qué son las pruebas de seguridad? Tipos con ejemplo</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8222493-what-is-quality-assuranceqa-process-methods-examples" title="¿Qué es la garantía de calidad (QA)? Proceso, métodos, ejemplos" rel="bookmark">¿Qué es la garantía de calidad (QA)? Proceso, métodos, ejemplos</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8222495-performance-testing-tutorial-what-is-types-metrics-and-example" title="Tutorial de pruebas de rendimiento: qué es, tipos, métricas y amp; Ejemplo" rel="bookmark">Tutorial de pruebas de rendimiento: qué es, tipos, métricas y amp; Ejemplo</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8222496-test-strategy-vs-test-plan-whats-the-difference" title="Estrategia de prueba vs plan de prueba: ¿Cuál es la diferencia?" rel="bookmark">Estrategia de prueba vs plan de prueba: ¿Cuál es la diferencia?</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8222497-top-25-database-testing-interview-questions-and-answers" title="Las 25 preguntas principales de la entrevista sobre pruebas de bases de datos y amp; Respuestas" rel="bookmark">Las 25 preguntas principales de la entrevista sobre pruebas de bases de datos y amp; Respuestas</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8222501-test-data-generation-what-is-how-to-example-tools" title="Generación de datos de prueba: qué es, cómo, ejemplo, herramientas" rel="bookmark">Generación de datos de prueba: qué es, cómo, ejemplo, herramientas</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8222504-what-is-negative-testing-test-cases-with-example" title="¿Qué son las pruebas negativas? Casos de prueba con ejemplo" rel="bookmark">¿Qué son las pruebas negativas? Casos de prueba con ejemplo</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8222505-web-application-testing-8-step-guide-to-website-testing" title="Pruebas de aplicaciones web: guía de 8 pasos para probar sitios web" rel="bookmark">Pruebas de aplicaciones web: guía de 8 pasos para probar sitios web</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8222506-automation-testing-tutorial-what-is-automated-testing" title="Tutorial de pruebas de automatización: ¿Qué son las pruebas automatizadas?" rel="bookmark">Tutorial de pruebas de automatización: ¿Qué son las pruebas automatizadas?</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8222508-dbms-keys-candidate-super-primary-foreign-example" title="Claves DBMS: Candidato, Super, Primario, Extranjero (Ejemplo)" rel="bookmark">Claves DBMS: Candidato, Super, Primario, Extranjero (Ejemplo)</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8222509-difference-between-fact-table-and-dimension-table" title="Diferencia entre la tabla de hechos y la tabla de dimensiones" rel="bookmark">Diferencia entre la tabla de hechos y la tabla de dimensiones</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8222510-test-coverage-in-software-testing" title="Cobertura de prueba en pruebas de software" rel="bookmark">Cobertura de prueba en pruebas de software</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8222511-what-is-regression-testing-definition-test-cases-example" title="¿Qué es la prueba de regresión? Definición, casos de prueba (ejemplo)" rel="bookmark">¿Qué es la prueba de regresión? Definición, casos de prueba (ejemplo)</a></h3>
</div>
</div>
</li>
</ul>
</div>
<div id="container-5533149ee6411a5f99b370c693e87966"></div> <div class="widget widget-popular-posts">
<h2 class="widget-title">Artículos Más Populares</h2>
<ul class="post-list-small">
<li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__img-holder">
<div class="thumb-container thumb-100"><a href="/8226221-aws-certification-guide-cost-courses-salary-exam-details" title="Guía de certificación de AWS: costo, cursos, salario, detalles del examen" rel="bookmark"><img src="https://cdn.css-code.org/3614004/aws_certification_guide_cost-_courses-_salary-_exam_details.png.webp" loading="lazy" alt="Guía de certificación de AWS: costo, cursos, salario, detalles del examen" title="Guía de certificación de AWS: costo, cursos, salario, detalles del examen" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
</div>
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8226221-aws-certification-guide-cost-courses-salary-exam-details" title="Guía de certificación de AWS: costo, cursos, salario, detalles del examen" rel="bookmark">Guía de certificación de AWS: costo, cursos, salario, detalles del examen 2025</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__img-holder">
<div class="thumb-container thumb-100"><a href="/8226222-vba-tutorial-pdf-excel-programming-course-free-download" title="PDF Tutorial de VBA: Curso de programación de Excel (descarga GRATUITA)" rel="bookmark"><img src="https://cdn.css-code.org/6908775/vba_tutorial_pdf_excel_programming_course_free_download.png.webp" loading="lazy" alt="PDF Tutorial de VBA: Curso de programación de Excel (descarga GRATUITA)" title="PDF Tutorial de VBA: Curso de programación de Excel (descarga GRATUITA)" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
</div>
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8226222-vba-tutorial-pdf-excel-programming-course-free-download" title="PDF Tutorial de VBA: Curso de programación de Excel (descarga GRATUITA)" rel="bookmark">PDF Tutorial de VBA: Curso de programación de Excel (descarga GRATUITA) 2025</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__img-holder">
<div class="thumb-container thumb-100"><a href="/8226223-what-is-big-data-introduction-types-characteristics-example" title="¿Qué es BIG DATA? Introducción, tipos, características, ejemplo" rel="bookmark"><img src="https://cdn.css-code.org/8581893/what_is_big_data_introduction-_types-_characteristics-_example.jpg.webp" loading="lazy" alt="¿Qué es BIG DATA? Introducción, tipos, características, ejemplo" title="¿Qué es BIG DATA? Introducción, tipos, características, ejemplo" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
</div>
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8226223-what-is-big-data-introduction-types-characteristics-example" title="¿Qué es BIG DATA? Introducción, tipos, características, ejemplo" rel="bookmark">¿Qué es BIG DATA? Introducción, tipos, características, ejemplo 2025</a></h3>
</div>
</div>
</li>
</ul>
</div>
</aside> </div>
</div>
<footer class="footer footer--dark">
<div class="container">
<div class="footer__widgets">
<div class="row">
<div class="col-lg-4">
<div class="widget">
<h2 class="widget-title">Entradas Populares</h2>
<ul class="post-list-small">
<li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8004181-142-hiding-things-with-css" title="# 142: Ocultar cosas con CSS - Trucos CSS" rel="bookmark"># 142: Ocultar cosas con CSS - Trucos CSS</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8004182-141-getting-the-images-and-numbers-for-responsive-images" title="# 141: Obtención de imágenes y números para imágenes receptivas - Trucos CSS" rel="bookmark"># 141: Obtención de imágenes y números para imágenes receptivas - Trucos CSS</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8004183-135-three-ways-to-animate-svg" title="# 135: Tres formas de animar SVG - Trucos CSS" rel="bookmark"># 135: Tres formas de animar SVG - Trucos CSS</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8004184-140-exploring-css-layout-techniques-while-trying-to-get-a-subtitle-to-wrap" title="# 140: Explorando técnicas de diseño CSS mientras intenta obtener un subtítulo para envolver - Trucos CSS" rel="bookmark"># 140: Explorando técnicas de diseño CSS mientras intenta obtener un subtítulo para envolver - Trucos CSS</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8004185-133-figuring-out-responsive-images" title="# 133: Descubriendo imágenes receptivas - Trucos CSS" rel="bookmark"># 133: Descubriendo imágenes receptivas - Trucos CSS</a></h3>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="widget">
<h2 class="widget-title">La Elección Del Editor</h2>
<ul class="post-list-small">
<li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003083-user-select" title="Selección de usuario - Trucos CSS" rel="bookmark">Selección de usuario - Trucos CSS</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003084-will-change" title="Cambiará - Trucos CSS" rel="bookmark">Cambiará - Trucos CSS</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003085-unicode-bidi" title="Unicode-bidi - Trucos CSS" rel="bookmark">Unicode-bidi - Trucos CSS</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003086-vertical-align" title="Alineación vertical - Trucos CSS" rel="bookmark">Alineación vertical - Trucos CSS</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003087-widows" title="Viudas - Trucos CSS" rel="bookmark">Viudas - Trucos CSS</a></h3>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="widget">
<h2 class="widget-title">Artículos Más Populares</h2>
<ul class="post-list-small">
<li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003582-smiley-slider" title="Smiley Slider - Trucos CSS" rel="bookmark">Smiley Slider - Trucos CSS</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003583-simple-and-nice-blockquote-styling" title="Estilo Blockquote simple y agradable - Trucos CSS" rel="bookmark">Estilo Blockquote simple y agradable - Trucos CSS</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003584-standard-css-image-replacement" title="Reemplazo de imagen CSS estándar - Trucos CSS" rel="bookmark">Reemplazo de imagen CSS estándar - Trucos CSS</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003585-solarized-theme-for-codemirror-and-prettify" title="Tema solarizado para CodeMirror y Prettify - Trucos CSS" rel="bookmark">Tema solarizado para CodeMirror y Prettify - Trucos CSS</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003586-spinny-leaf-menu" title="Menú Spinny Leaf - Trucos CSS" rel="bookmark">Menú Spinny Leaf - Trucos CSS</a></h3>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<p>© Copyright css-code.org, 2025 Mayo |
<a href="https://css-code.org/about-site" title="Acerca del sitio">Acerca del sitio</a> |
<a href="https://css-code.org/contacts" title="Contactos">Contactos</a> |
<a href="https://css-code.org/privacy-policy" title="Política de privacidad">Política de privacidad</a>.
</p>
</div>
</div>
</footer>
<link href="https://css-code.org/template/css/style.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" /> </body>
</html>
|
