css – ProgramaciónExtrema.com https://programacionextrema.com Tutoriales de programación! Sat, 05 Jan 2019 19:50:09 +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 la fuente de la letra (texto) HTML con CSS https://programacionextrema.com/2019/01/05/cambiar-la-fuente-de-la-letra-texto-html-con-css/ https://programacionextrema.com/2019/01/05/cambiar-la-fuente-de-la-letra-texto-html-con-css/#respond Sat, 05 Jan 2019 19:38:17 +0000 https://programacionextrema.com/?p=1402 Las fuentes de letras que se utilice en un sitio web desarrollado con HTML y CSS pueden determinar que tan atractiva se ve, aunque algunos desestimen completamente su uso y se queden con los tipos que vienen por defecto. En este tutorial te vamos a explicar cómo cambiar de fuente (font) con CSS, para que… Read More

La entrada Cambiar la fuente de la letra (texto) HTML con CSS aparece primero en ProgramaciónExtrema.com.

]]> Las fuentes de letras que se utilice en un sitio web desarrollado con HTML y CSS pueden determinar que tan atractiva se ve, aunque algunos desestimen completamente su uso y se queden con los tipos que vienen por defecto.

En este tutorial te vamos a explicar cómo cambiar de fuente (font) con CSS, para que puedas desarrollar un sitio web moderno e impactante en una primera instancia. Podremos comprobar que unas pocas lineas de código CSS se podrá modificar el tipo de letra de todo el cuerpo HTML.

Ejemplo de cambio de fuente en un texto HTML con CSS

Para comprender mejor cómo realizar un cambio de fuente o tipografía, a continuación te proporcionaremos un breve ejemplos de código. El mismo está completo y se encuentra en HTML y CSS.

<html>
  <head>
    <title>Cambiar la fuente de la letra al HTML con CSS</title>
    <style>
      .texto {
        font-family: Verdana;
      }
    </style>
  </head>
  <body>
    <div class="texto">Texto de prueba</div>
  </body>
</html>

En el ejemplo anterior se puede apreciar que con el atributo CSS font-family se modifica la tipografía del texto que está dentro de una etiqueta div de clase texto.

La propiedad font-family acepta varias fuentes, las cuales vienen incorporadas por defecto. A continuación te dejamos algunas fuentes adicionales que se pueden utilizar libremente en cualquier sitio web.

Family Genérico Font family Descripción
Serif Times New Roman
Georgia 		Las fuentes Serif tienen pequeñas líneas en los extremos de algunos caracteres.
Sans-serif Arial
Verdana 		«Sans» significa sin – estas fuentes no tienen líneas en los extremos de los caracteres
Monospace Courier New
Lucida Console 		Todos los caracteres monoespacios tienen el mismo ancho.

Utilizar fuentes (fonts) de Google

Google ofrece gratuitamente y libremente una gran variedad del fuentes para que puedas utilizar en tus proyectos. Las misma fuentes se pueden ver en https://fonts.google.com. Para utilizar alguna de sus fuentes solamente es necesario importarla dentro del HTML. A continuación te dejaremos un breve ejemplo de cómo hacerlo, reutilizando el código anterior.

<html>
  <head>
    <title>Cambiar la fuente de la letra al HTML con CSS usando las fuentes de Google</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      .texto {
        font-family: 'Tangerine', serif;
      }
    </style> 
  </head>
  <body>
    <div class="texto">Texto de prueba</div>
  </body>
</html>

Eso es lo básico que hay que saber para poder modificar o cambiar las fuentes de los texto en HTML con CSS. En caso de que tengan una duda pueden dejar un comentario al final del tutorial.

La entrada Cambiar la fuente de la letra (texto) HTML con CSS aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2019/01/05/cambiar-la-fuente-de-la-letra-texto-html-con-css/feed/ 0 Superponer etiquetas y tags HTML con CSS (uno dentro de otro) https://programacionextrema.com/2018/10/13/superponer-etiquetas-y-tags-html-con-css/ https://programacionextrema.com/2018/10/13/superponer-etiquetas-y-tags-html-con-css/#respond Sat, 13 Oct 2018 21:31:24 +0000 https://programacionextrema.com/?p=1370 En la presente ocasión vamos a ver cómo superponer etiquetas y tags HTML con CSS. Esto mismo puede servir para manipular cualquier elemento HTML, por ejemplo botones, enlaces, todos los input y tags div entre otros. Para que puedas comprender correctamente todos los pasos necesarios para realizar dicha función, te vamos a proporcionar el código… Read More

La entrada Superponer etiquetas y tags HTML con CSS (uno dentro de otro) aparece primero en ProgramaciónExtrema.com.

]]> En la presente ocasión vamos a ver cómo superponer etiquetas y tags HTML con CSS. Esto mismo puede servir para manipular cualquier elemento HTML, por ejemplo botones, enlaces, todos los input y tags div entre otros. Para que puedas comprender correctamente todos los pasos necesarios para realizar dicha función, te vamos a proporcionar el código completo.

Esto puede ser necesario en muchas ocasiones, por ejemplo cuando se requiere mostrar un texto o un botón por encima de una imagen o cualquier otro elemento del doc.

Código para superponer etiquetas y tags HTML con CSS usando posiciones relativa y absoluta

Para comprender mejor el código a continuación vamos a definir dos etiquetas div HTML, una dentro de otra, para que la segunda se puede posicionar por encima de la primera, en cualquier ubicación. Para esto la primera va a tener que tener el atributo position como relative mientras que la segunda va a tener que tener ese mismo atributo pero con el valor absolute, luego con el bottom y el right se va a poder posicionar en cualquier ubicación.

<html>
  <head>
    <title>Superponer etiquetas y tags HTML con CSS</title>
    <style type="text/css">
      .tag1{
        width: 300px;
        height: 300px;
        position: relative;
        background: red;
      }
      .tag2{
        width: 100px;
        height: 50px;
        position: absolute;
        bottom: 5px;
        right: 5px;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="tag1">
      <div class="tag2"></div>
    </div>
  </body>
</html>

Con el código anterior la segunda etiqueta se va a mostrar en la parte inferior izquierda de la primera, en caso de querer ubicarla sobre el margen superior simplemente hay que utilizar el atributo top en lugar del bottom, como se utilizó en el ejemplo anterior.

Así es como se verá el código anterior en tu navegador.

Superponer etiquetas y tags HTML con CSS

Si te interesa superponer el segundo tag sobre una imagen, simplemente se puede realizar agregando la etiqueta img de la imagen en el primer tag.

Eso es todo lo que hay que tener en cuenta para poder realizar la función de superponer etiquetas HTML con CSS. En caso de que tengan alguna duda pueden dejar su comentario al final del post.

La entrada Superponer etiquetas y tags HTML con CSS (uno dentro de otro) aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2018/10/13/superponer-etiquetas-y-tags-html-con-css/feed/ 0 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 Eliminar y agregar clases con jQuery https://programacionextrema.com/2015/11/21/eliminar-y-agregar-clases-con-jquery/ https://programacionextrema.com/2015/11/21/eliminar-y-agregar-clases-con-jquery/#respond Sat, 21 Nov 2015 17:12:22 +0000 http://programacionextrema.com/?p=680 En este tutorial aprenderemos a eliminar y agregar clases con jQuery utilizando las funciones addClass y removeClass. Esto nos puede beneficiar en muchas ocasiones, como por ejemplo cuando queremos manipular muchas propiedades CSS de una etiqueta. ¿Cómo eliminar y agregar clases con jQuery? Para realizar esto debemos incluir la librería de jQuery, en nuestro caso… Read More

La entrada Eliminar y agregar clases con jQuery aparece primero en ProgramaciónExtrema.com.

]]> En este tutorial aprenderemos a eliminar y agregar clases con jQuery utilizando las funciones addClass y removeClass. Esto nos puede beneficiar en muchas ocasiones, como por ejemplo cuando queremos manipular muchas propiedades CSS de una etiqueta.

¿Cómo eliminar y agregar clases con jQuery?

Para realizar esto debemos incluir la librería de jQuery, en nuestro caso vamos a utilizar las que nos ofrece google de manera online. Luego vamos a definir dos clases en CSS las cuales representan a dos cuadrados de distintos colores y tamaños que vamos utilizar con las funciones addClass y removeClass de jQuery como se muestra en el siguiente ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>Eliminar y agregar clases con jQuery</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-rojo-chico{
	    width:200px;
	    height: 200px;
	    background: red;
	  }
	  .cuadrado-verde-grande{
	    width:400px;
	    height: 400px;
	    background: green;
	  }
	</style>
  </head>
  <body>
	<div id="cuadrado" class="cuadrado-rojo-chico"></div>
	<button type="button" onclick="cambiarRojoChico()">Rojo chico</button>
	<button type="button" onclick="cambiarVerdeGrande()">Verde grande</button>
	<script>
          function cambiarVerdeGrande(){
	    // Elimino la clase de color rojo y tamaño chico
	    $('#cuadrado').removeClass('cuadrado-rojo-chico');
		
	    //Agrego lla nueva clase de color verde y tamaño grande
	    $('#cuadrado').addClass('cuadrado-verde-grande');
	  }
	  
          function cambiarRojoChico(){
	    // Hago lo contrario que en el caso anterior
	    $('#cuadrado').removeClass('cuadrado-verde-grande');
	    $('#cuadrado').addClass('cuadrado-rojo-chico');
	  }
	</script>
  </body>
</html>

Simplemente al presionar los botones vamos a ver el resultado de eliminar y agregar una clase en jQuery, cambiando así el color y tamaño del cuadrado.

Bueno gente, hemos llegado al final de este tutorial en el cual se explica cómo eliminar y agregar clases con jQuery. Ante cualquier problema no duden en dejar un comentario.

La entrada Eliminar y agregar clases con jQuery aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/21/eliminar-y-agregar-clases-con-jquery/feed/ 0 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