css – ProgramaciónExtrema.com https://programacionextrema.com Tutoriales de programación! Sat, 10 Mar 2018 19:48:30 +0000 es hourly 1 https://wordpress.org/?v=5.6.15 https://programacionextrema.com/wp-content/uploads/2015/10/cropped-icon-programacion-extrema-32x32.png css – ProgramaciónExtrema.com https://programacionextrema.com 32 32 Cambiar el color de una etiqueta con jQuery https://programacionextrema.com/2018/03/10/cambiar-el-color-de-una-etiqueta-con-jquery/ https://programacionextrema.com/2018/03/10/cambiar-el-color-de-una-etiqueta-con-jquery/#comments Sat, 10 Mar 2018 19:48:30 +0000 http://programacionextrema.com/?p=1301 En esta oportunidad les voy a traer otro sencillo tutorial para que puedan aprender a cambiar el color de una etiqueta con jQuery y Java Script de forma dinámica, esta funcionalidad puede ser muy útil en diversos casos como por ejemplo cuando se quiere crear un botón que cambie de color cuando se presiona o… Read More

La entrada Cambiar el color de una etiqueta con jQuery aparece primero en ProgramaciónExtrema.com.

]]> En esta oportunidad les voy a traer otro sencillo tutorial para que puedan aprender a cambiar el color de una etiqueta con jQuery y Java Script de forma dinámica, esta funcionalidad puede ser muy útil en diversos casos como por ejemplo cuando se quiere crear un botón que cambie de color cuando se presiona o se ponga el cursor sobre él, ente otros posibles.

Cómo cambiar el color de una etiqueta o tag HTML con jQuery y Java Script

Antes de mostrar como realizar esta sencilla función es muy importante recordarles que deben importar la librería de jQuery, en el siguiente código la vamos a incluir directamente desde la nube pero ustedes lo pueden hacer descargando el archivo en sus computadoras.

Luego de que tengan configurado la librería de jQuery vamos a empezar a programar, como primer paso vamos a crear una etiqueta con la clase box, la cual va a tener un tamaño de 100×100 px, esto es muy importante ya que si la etiqueta no tiene un tamaño predefinido o no contiene nada (como puede ser un texto) no se va a mostrar el color de fondo.

Luego con jQuery y Java Script simplemente vamos a obtener la etiqueta para cambiar su color de fondo a rojo, modificando la propiedad CSS backgrand con la función CSS que proporciona jQuery.

<html>
  <head>
    <title>Cambiar el color de una etiqueta con jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
      .box {
        height: 100px;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
    </div>
    <script>
      $(function(){
        $('.box').css('background', 'red');
      })
    </script>
  </body>
</html>

Al ejecutar el código anterior en su navegador vas a poder ver un cuadrado de color rojo, en caso de que quieras poner otro color simplemente debes cambiar el valor de la propiedad por otro.

Eso es todo por hoy, espero que les sea de gran utilidad este aporte, ante cualquier inconveniente no duden en dejar un mensaje.

La entrada Cambiar el color de una etiqueta con jQuery aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2018/03/10/cambiar-el-color-de-una-etiqueta-con-jquery/feed/ 1 Cómo recortar y centrar una imagen con CSS y HTML https://programacionextrema.com/2017/06/07/como-recortar-y-centrar-una-imagen-con-css-y-html/ https://programacionextrema.com/2017/06/07/como-recortar-y-centrar-una-imagen-con-css-y-html/#comments Wed, 07 Jun 2017 19:07:43 +0000 http://programacionextrema.com/?p=1268 En esta ocasión vamos a resolver un problema que se puede presentar en cualquier desarrollo web, ya sea algo complejo o simple, el cual trata de recortar y centrar una imagen para que siempre tenga un tamaño fijo. Este inconveniente se suele presentar cuando la aplicación que se quiere crear debe mostrar imágenes de un… Read More

La entrada Cómo recortar y centrar una imagen con CSS y HTML aparece primero en ProgramaciónExtrema.com.

]]> En esta ocasión vamos a resolver un problema que se puede presentar en cualquier desarrollo web, ya sea algo complejo o simple, el cual trata de recortar y centrar una imagen para que siempre tenga un tamaño fijo. Este inconveniente se suele presentar cuando la aplicación que se quiere crear debe mostrar imágenes de un mismo tamaño sin que se desformen, pero originalmente son rectangulares. Para solucionar el problema en este sencillo tutorial vamos a publicar un breve código CSS, el cual se va a encargar de centrar y recortar la imagen.

Es muy importante aclarar que para realizar esta tarea no es necesario utilizar el lenguaje de programación Java Script o jQuery.

Cómo recortar y centrar una imagen con CSS, para fijar su tamaño

Para empezar a resolver esta tarea primero vamos a necesitar una etiqueta div que funciones como el contenedor de tamaño fijo de la imagen que queremos mostrar recortada y centrada.

<div class="container">
    <img class="crop" src="http://lorempixel.com/600/100" />
</div>

Si no incluimos ningún CSS la imagen anterior se va a visualizar del tamaño 600×100 píxeles, en cambio con el siguiente código vamos a poder recortarla y centrarla para que su tamaño final sea de unos 200px, el cual puede variar de acuerdo a la necesidad del momento, modificando los valores.

.container {
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin: 10px;
    position: relative;
}
.container > .crop {
    position:absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}

Es muy importante que la imagen tenga posición absoluta y su contenedor relativa para que se pueda centrar correctamente sin depender del tamaño original. Para poder probar ese ejemplo simplemente se debe copiar el código en un archivo HTML y luego visualizarlo en el navegador.

Bueno gente, llegamos al final de este breve tutorial, en caso de que tengan alguna duda o inconveniente no duden en dejar un comentario al final de la página.

La entrada Cómo recortar y centrar una imagen con CSS y HTML aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2017/06/07/como-recortar-y-centrar-una-imagen-con-css-y-html/feed/ 2 Slider en Bootstrap https://programacionextrema.com/2015/11/28/slider-en-bootstrap/ https://programacionextrema.com/2015/11/28/slider-en-bootstrap/#comments Sat, 28 Nov 2015 19:59:34 +0000 http://programacionextrema.com/?p=806 En este sencillo tutorial aprenderemos a crear nuestro propio slider en Bootstrap. Una de las ventajas de utilizar Bootstrap es que nos permite hacer una página totalmente responsive para que se pueda ajustar correctamente en dispositivos móviles y tablets. ¿Cómo crear un slider en Bootstrap? Un slider o carousel en Bootstrap se puede crear de… Read More

La entrada Slider en Bootstrap aparece primero en ProgramaciónExtrema.com.

]]> En este sencillo tutorial aprenderemos a crear nuestro propio slider en Bootstrap. Una de las ventajas de utilizar Bootstrap es que nos permite hacer una página totalmente responsive para que se pueda ajustar correctamente en dispositivos móviles y tablets.

¿Cómo crear un slider en Bootstrap?

Un slider o carousel en Bootstrap se puede crear de varias formas, una de ellas es solamente mediante código HTML como se muestra en el siguiente ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>Slider en Bootstrap</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
      <!-- Carousel indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="images/slide1.png" alt="First Slide">
          <div class="carousel-caption">
            <h3>Título de la primera diapositiva</h3>
            <p>Contenido de la diapositiva</p>
          </div>
        </div>
        <div class="item">
          <img src="images/slide2.png" alt="Second Slide">
          <div class="carousel-caption">
            <h3>Título de la segunda diapositiva</h3>
            <p>Contenido de la diapositiva</p>
          </div>
        </div>
        <div class="item">
          <img src="images/slide3.png" alt="Third Slide">
          <div class="carousel-caption">
            <h3>Título de la tercera diapositiva</h3>
            <p>Contenido de la diapositiva</p>
          </div>
        </div>
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>
  </body>
</html>

Antes de probar el ejemplo anterior es importante remplazar la imágenes por las nuestras. El resultado de visitar la página anterior seria el siguiente.

Slider en Bootstrap

Slider en Bootstrap

Explicación de atributos:

data-ride=»carousel»: Con este atributo se indica que el carousel debe comenzar la animación automáticamente después de cargar la página.

data-interval=»3000″: Se indica el tiempo que tarda entre cada transición. Esto solamente funciona si se indica la propiedad data-ride. En este caso la transición es de 3 segundos.

Bueno gente, hemos llegado al final de este tutorial en el cual se explica cómo crear un slider en Bootstrap. Espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

La entrada Slider en Bootstrap aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/28/slider-en-bootstrap/feed/ 9 Cómo evitar que un texto salga de un div en HTML https://programacionextrema.com/2015/11/27/como-evitar-que-un-texto-salga-de-un-div-en-html/ https://programacionextrema.com/2015/11/27/como-evitar-que-un-texto-salga-de-un-div-en-html/#comments Fri, 27 Nov 2015 19:59:48 +0000 http://programacionextrema.com/?p=796 Al desarrollar un sitio web en HTML y CSS nos podemos encontrar con muchos problemas, uno muy recurrente ocurre cuando tenemos un texto muy largo dentro de un div con un tamaño fijo, al ser tan largo puede pasar que sobrepase la etiqueta que lo contiene. En este tutorial veremos cómo evitar que un texto… Read More

La entrada Cómo evitar que un texto salga de un div en HTML aparece primero en ProgramaciónExtrema.com.

]]> Al desarrollar un sitio web en HTML y CSS nos podemos encontrar con muchos problemas, uno muy recurrente ocurre cuando tenemos un texto muy largo dentro de un div con un tamaño fijo, al ser tan largo puede pasar que sobrepase la etiqueta que lo contiene. En este tutorial veremos cómo evitar que un texto salga de un div en HTML.

¿Cómo evitar que un texto salga de un div en HTML?

Para evitar esto vamos a utilizar la propiedad CSS3 llamada word-wrap, en el siguiente ejemplo tenemos un div de un tamaño fijo con una palabra grande:

<!DOCTYPE html>
<html>
  <head>
    <title>Cómo evitar que un texto salga de un div en HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
	  #contenedor{
	    width: 50px;
	    background: red;
	  }
	</style>
  </head>
  <body>
    <div id="contenedor">
	PalabraMuyLarga 
    </div>
  </body>
</html>

Si no utilizamos la propiedad word-wrap el resultado sería el siguiente.

Div sin CSS3 word-wrap

Div sin CSS3 word-wrap

Ahora con tan solo agregar la propiedad word-wrap con el valor break-word la palabra se va a partir, permitiendo así que no salga del contenedor div:

<!DOCTYPE html>
<html>
  <head>
    <title>Cómo evitar que un texto salga de un div en HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
      #contenedor{
        width: 50px;
        background: red;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <div id="contenedor">
      PalabraMuyLarga 
    </div>
  </body>
</html>

En este caso el resultado sería:

Div con CSS3 word-wrap

Div con CSS3 word-wrap

Bueno gente, hemos llegado al final de este tutorial en el cual se explica cómo evitar que un texto salga de un div en HTML. Espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

La entrada Cómo evitar que un texto salga de un div en HTML aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/27/como-evitar-que-un-texto-salga-de-un-div-en-html/feed/ 3 Transiciones en CSS https://programacionextrema.com/2015/11/19/transiciones-en-css/ https://programacionextrema.com/2015/11/19/transiciones-en-css/#respond Thu, 19 Nov 2015 22:45:18 +0000 http://programacionextrema.com/?p=667 Las transiciones en CSS son fundamentales para crear páginas con un diseño atractivo y moderno, es por eso que en este tutorial aprenderemos a crear nuestras propias transiciones. ¿Cómo crear transiciones en CSS? Para crear transiciones en CSS vamos a utilizar la propiedad transition, con la cual cambiaremos el color y tamaño de un cuadrado… Read More

La entrada Transiciones en CSS aparece primero en ProgramaciónExtrema.com.

]]> Las transiciones en CSS son fundamentales para crear páginas con un diseño atractivo y moderno, es por eso que en este tutorial aprenderemos a crear nuestras propias transiciones.

¿Cómo crear transiciones en CSS?

Para crear transiciones en CSS vamos a utilizar la propiedad transition, con la cual cambiaremos el color y tamaño de un cuadrado al pasar el mouse sobre el mismo:

<html>
  <head>
    <title>Transiciones en CSS</title>
    <style>
      #cuadrado {
        transition: all 0.5s ease;
        background: red;
        width: 200px;
        height: 200px;
      }
      #cuadrado:hover {
        background: green;
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div id="cuadrado"></div>
  </body>
</html>

De esta forma con la propiedad transition estamos indicando que queremos aplicar la transición a todas las propiedades, con una duración de medio segundo. Ahora si solamente queremos aplicar la transición a una propiedad podemos hacer lo siguiente:

transition: width 0.5s ease; /* Solamente se aplica a la propiedad width*/

Si queremos que las transiciones funcionen en distintos navegadores debemos usar distintas variantes de la propiedad transition como se muestra en el siguiente ejemplo:

-webkit-transition: background-color 500ms ease-out 1s;
-moz-transition: background-color 500ms ease-out 1s;
-o-transition: background-color 500ms ease-out 1s;
transition: background-color 500ms ease-out 1s;

Bueno gente, hemos llegado al final de este tutorial en el cual se explica cómo crear transiciones en CSS, espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

La entrada Transiciones en CSS aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/19/transiciones-en-css/feed/ 0 Imagen circular con CSS https://programacionextrema.com/2015/11/16/imagen-circular-con-css/ https://programacionextrema.com/2015/11/16/imagen-circular-con-css/#respond Mon, 16 Nov 2015 19:01:01 +0000 http://programacionextrema.com/?p=622 Anteriormente hemos visto cómo crear bordes redondeados en CSS, hoy aprenderemos a crear una imagen circular con CSS. Para realizar esta tarea vamos a utilizar la propiedad border-radius. ¿Cómo crear una imagen circular con CSS? Para realizar esto vamos a necesitar una imagen de prueba, en nuestro caso vamos a utilizar la imagen de CSS… Read More

La entrada Imagen circular con CSS aparece primero en ProgramaciónExtrema.com.

]]> Anteriormente hemos visto cómo crear bordes redondeados en CSS, hoy aprenderemos a crear una imagen circular con CSS. Para realizar esta tarea vamos a utilizar la propiedad border-radius.

¿Cómo crear una imagen circular con CSS?

Para realizar esto vamos a necesitar una imagen de prueba, en nuestro caso vamos a utilizar la imagen de CSS de nuestro tutorial y le vamos aplicar la propiedad border-radius con 100px:

<!DOCTYPE html>
<html>
  <head>
    <title>Imagen circular con CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style> 
      .circulo{
        width: 200px;
        height: 200px; 
        border-radius: 100px;
      }
    </style>
  </head>
  <body>
    <img src="http://programacionextrema.com/wp-content/uploads/2015/11/css.jpg" class="circulo">
  </body>
</html>

Para que las imágenes no se desformen es recomendable que sean cuadradas y no rectangulares. Como en nuestro caso la imagen es rectangular le establecimos 200px de ancho y alto con CSS.
El resultado de visualizar la página anterior sería el siguiente:

Imagen circular con CSS

Imagen circular con CSS

Bueno gente hemos llegado al final de este breve tutorial en el cual se explica cómo crear una imagen circular con CSS, espero que les sea de gran utilidad y ante cualquier inconveniente no duden en dejar un comentario.

La entrada Imagen circular con CSS aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/16/imagen-circular-con-css/feed/ 0 Rotar una etiqueta en CSS https://programacionextrema.com/2015/11/14/rotar-una-etiqueta-en-css/ https://programacionextrema.com/2015/11/14/rotar-una-etiqueta-en-css/#respond Sat, 14 Nov 2015 23:43:09 +0000 http://programacionextrema.com/?p=606 Anteriormente hemos visto cómo utilizar la propiedad float en CSS, hoy aprenderemos a rotar una etiqueta en CSS, para esto vamos a utilizar la propiedad transform compatible con distintos navegadores. ¿Cómo rotar una etiqueta en CSS? Para entender como realizar esta tarea vamos a crear un cuadrado de color rojo al cual le aplicaremos una… Read More

La entrada Rotar una etiqueta en CSS aparece primero en ProgramaciónExtrema.com.

]]> Anteriormente hemos visto cómo utilizar la propiedad float en CSS, hoy aprenderemos a rotar una etiqueta en CSS, para esto vamos a utilizar la propiedad transform compatible con distintos navegadores.

¿Cómo rotar una etiqueta en CSS?

Para entender como realizar esta tarea vamos a crear un cuadrado de color rojo al cual le aplicaremos una rotación de 120 grados:

<!DOCTYPE html>
<html>
  <head>
    <title>Rotar una etiqueta en CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
      #cuadrado{
        width:200px;
        height: 200px;
        background: red;
      }
      .rotacion{
        -ms-transform: rotate(120deg); /* IE 9 */
        -webkit-transform: rotate(120deg); /* Chrome, Safari, Opera */
        transform: rotate(120deg);
      }
    </style>
  </head>
  <body>
    <div id="cuadrado" class="rotacion"></div>
  </body>
</html>

En la clase rotación agregamos distintas variantes de la propiedad transform para que funcione en varios navegadores. Si visualizamos la página anterior en nuestro navegador vamos a ver el cuadrado rojo con una rotación de 120 grados:

Rotacion en CSS

Rotacion en CSS

Ahora si queremos que la rotación sea constante tenemos que utilizar Java Script con la función setInterval de la siguiente forma:

<!DOCTYPE html>
<html>
  <head>
    <title>Rotar una etiqueta en CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
      #cuadrado{
        width:200px;
        height: 200px;
        background: red;
      }
      .rotacion{
        -ms-transform: rotate(120deg); /* IE 9 */
        -webkit-transform: rotate(120deg); /* Chrome, Safari, Opera */
        transform: rotate(120deg);
      }
    </style>
  </head>
  <body>
    <div id="cuadrado" class="rotacion"></div>
    <script>
      var grados =120;
      $(document).ready(function() {
        
        setInterval(function(){
          grados = (grados % 360) + 1;
          $("#cuadrado").css("transform", 'rotate(' + grados + 'deg)');
        },50);
        
      });
    </script>
  </body>
</html>

De esta forma cada 50 milisegundos rotará un grado nuestro cuadrado. Si no entendemos como funciona la función setInterval los invito a pasar por el tutorial http://programacionextrema.com/2015/11/13/funciones-setinterval-y-settimeout-en-java-script.

Bueno gente, hemos llegado al final de este tutorial para rotar una etiqueta en CSS. Ante cualquier problema no duden en dejar un comentario.

La entrada Rotar una etiqueta en CSS aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/14/rotar-una-etiqueta-en-css/feed/ 0 Float en CSS https://programacionextrema.com/2015/11/12/float-en-css/ https://programacionextrema.com/2015/11/12/float-en-css/#respond Thu, 12 Nov 2015 20:09:42 +0000 http://programacionextrema.com/?p=567 La propiedad float en CSS sirve para posicionar una etiqueta a la izquierda o derecha de su posición original. En este tutorial aprenderemos a utilizar esta propiedad junto a sus posibles valores left y right. ¿Cómo utilizar la propiedad float en CSS? Antes de comenzar es importante saber que al indicar esta propiedad con algún… Read More

La entrada Float en CSS aparece primero en ProgramaciónExtrema.com.

]]> La propiedad float en CSS sirve para posicionar una etiqueta a la izquierda o derecha de su posición original. En este tutorial aprenderemos a utilizar esta propiedad junto a sus posibles valores left y right.

¿Cómo utilizar la propiedad float en CSS?

Antes de comenzar es importante saber que al indicar esta propiedad con algún valor (left o right) el resto de los elementos de la página se adaptarán para mostrarse a su izquierda o derecha.
En el siguiente ejemplo podemos ver tres cuadrados de distintos colores movidos a la izquierda en la misma linea:

<!DOCTYPE html>
<html>
  <head>
    <title>Float en CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
      .cuadrado{
        width: 200px;
        height: 200px;
        margin: 2px;
        /* Ubicar a la izquierda */
        float: left;
      }
      .rojo{
        background: red;
      }
      .azul{
        background: blue;
      }
      .verde{
        background: green;
      }
    </style>
  </head>
  <body>
    <div class="cuadrado rojo">
    </div>
    <div class="cuadrado azul">
    </div>
    <div class="cuadrado verde">
    </div>
  </body>
</html>

Si visualizamos la página anterior los cuadrados se mostrarían de la siguiente forma:

Cuadrados con la propiedad float en left

Cuadrados con la propiedad float en left

Ahora si queremos ordenarlos hacia la derecha solamente debemos cambiar el valor de la propiedad float por right y nuestros cuadrados quedarían al revés sobre el margen de la derecha.

Es muy común que necesitemos ubicar etiquetas con float que no afecten la posición de otras, esto lo podemos hacer con otra propiedad llamada clear. Los valores para esta propiedad pueden ser:

* both: Limpia el float de la izquierda y derecha.
* right: Limpia el float de la derecha.
* left: Limpia el float de la izquierda.

Para entender mejor esta propiedad agregaremos un clear después del cuadrado azul en el código anterior, quedando de la siguiente manera:

<!DOCTYPE html>
<html>
  <head>
    <title>Float en CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
      .cuadrado{
        width: 200px;
        height:200px;
        margin: 2px;
		/* Ubicar a la izquierda */
        float: left;
      }
      .rojo{
        background: red;
      }
      .azul{
        background: blue;
      }
      .verde{
        background: green;
      } 
      .clear{
        clear:left;
      }
    </style>
  </head>
  <body>
    <div class="cuadrado rojo izquierda">
    </div>
    <div class="cuadrado azul">
    </div>
    <div class="clear">
    </div>
    <div class="cuadrado verde">
    </div>
  </body>
</html>

El resultado de esta página sería:

Float left con clear en CSS

Float left con clear en CSS

Bueno gente, hemos llegado al final de este tutorial para aprender a utilizar la propiedad float en CSS. Ante cualquier problema no duden en dejar un comentario.

La entrada Float en CSS aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/12/float-en-css/feed/ 0 Agregar estilos CSS con jQuery https://programacionextrema.com/2015/11/12/agregar-estilos-css-con-jquery/ https://programacionextrema.com/2015/11/12/agregar-estilos-css-con-jquery/#respond Thu, 12 Nov 2015 00:01:39 +0000 http://programacionextrema.com/?p=564 Si nos encontramos desarrollando un sitio web bien dinámico es muy común tener que agregar estilos CSS con jQuery o Java Script sin librerías. Es por eso que en este tutorial aprenderemos a realizar dicha tarea un con un ejemplo muy sencillo. ¿Cómo agregar estilos CSS con jQuery? Antes de comenzar tenemos que incluir la… Read More

La entrada Agregar estilos CSS con jQuery aparece primero en ProgramaciónExtrema.com.

]]> Si nos encontramos desarrollando un sitio web bien dinámico es muy común tener que agregar estilos CSS con jQuery o Java Script sin librerías. Es por eso que en este tutorial aprenderemos a realizar dicha tarea un con un ejemplo muy sencillo.

¿Cómo agregar estilos CSS con jQuery?

Antes de comenzar tenemos que incluir la librería de jQuery en nuestro archivo de HTML. En nuestro caso vamos a cambiar el estilo de un cuadrado al oprimir distintos botones. La función principal de jQuery que utilizaremos para esta tarea es css() como podemos ver en el siguiente ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>Superponer divs en HTML usando CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<style>
	  #cuadrado{
	    background: red;
		width: 200px;
		height: 200px;
	  }
	</style>
  </head>
  <body>
    <div id="cuadrado">
	
	</div>
	<button onclick="cambiarColor();">Cambiar color</button>
	<button onclick="redondearBordes();">Redondear bordes</button>
	<button onclick="bordesNegros();">Bordes negros</button>
	<button onclick="agregarTransparencia();">Agregar transparencia</button>
  </body>
  <script>
	function cambiarColor(){
	  $('#cuadrado').css('background', 'blue');
	}
	function redondearBordes(){
	  $('#cuadrado').css('border-radius', '25px');
	}
	function bordesNegros(){
	  $('#cuadrado').css('border', '2px solid black');
	}
	function agregarTransparencia(){
	  $('#cuadrado').css('opacity', '0.4');
	}
  </script>
</html>

Al visitar la página que hemos creado y oprimir los distintos botones se van a ejecutar las funciones de Java Script que cambiarán la estética del cuadrado.

Bueno gente, hemos llegado al final de este breve tutorial para agregar estilos CSS con jQuery, espero que les sea de gran utilidad y como digo siempre ante cualquier problema pueden dejar un comentario.

La entrada Agregar estilos CSS con jQuery aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/12/agregar-estilos-css-con-jquery/feed/ 0 Superponer divs en HTML usando CSS https://programacionextrema.com/2015/11/11/superponer-divs-en-html-usando-css/ https://programacionextrema.com/2015/11/11/superponer-divs-en-html-usando-css/#respond Wed, 11 Nov 2015 22:13:49 +0000 http://programacionextrema.com/?p=560 En este tutorial aprenderemos a superponer divs en HTML usando CSS con posiciones absolutas. Las posiciones absolutas son indicadas con la propiedad position que ofrece CSS. ¿Cómo superponer divs en HTML usando CSS? Para entender de forma fácil como hacer esta tarea vamos a realizar un ejemplo donde tenemos dos cuadrados de distintos colores superpuestos… Read More

La entrada Superponer divs en HTML usando CSS aparece primero en ProgramaciónExtrema.com.

]]> En este tutorial aprenderemos a superponer divs en HTML usando CSS con posiciones absolutas. Las posiciones absolutas son indicadas con la propiedad position que ofrece CSS.

¿Cómo superponer divs en HTML usando CSS?

Para entender de forma fácil como hacer esta tarea vamos a realizar un ejemplo donde tenemos dos cuadrados de distintos colores superpuestos utilizando la propiedad position con el valor absolute. Una vez que usamos esta propiedad debemos indicar la posición de nuestro div con las propiedades top, right, bottom y left, además es importante saber que las etiquetas posicionadas de forma absoluta no toman como referencia su elemento contenedor div, sino la ventana del navegador.

<!DOCTYPE html>
<html>
  <head>
    <title>Superponer divs en HTML usando CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<style>
	  #cuadrado1{
	    background:red;
		width: 200px;
		height: 200px;
		position: absolute;
	  }
	  #cuadrado2{
	    background:blue;
		width: 200px;
		height: 200px;
		position:absolute;
		left: 15px;
		top:15px;
	  } 
	</style>
  </head>
  <body>
    <div id="cuadrado1">
	
    </div>
    <div id="cuadrado2">
	
    </div>
  </body>
</html>

Al visitar la página anterior el resultado sería el siguiente:

DIVS superpuestos con CSS

DIVS superpuestos con CSS

Es importante mencionar que esta misma técnica utilizada para superponer divs se puede utilizar con cualquier otra etiqueta, incluso con imágenes.

Bueno gente, hemos llegado al final de este sencillo tutorial para superponer divs en HTML usando CSS, espero que les sea de gran utilidad. Ante cualquier problema no duden en dejar un comentario.

La entrada Superponer divs en HTML usando CSS aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/11/superponer-divs-en-html-usando-css/feed/ 0