bordes redondeados – ProgramaciónExtrema.com https://programacionextrema.com Tutoriales de programación! Wed, 25 Nov 2015 01:38:26 +0000 es hourly 1 https://wordpress.org/?v=5.6.16 https://programacionextrema.com/wp-content/uploads/2015/10/cropped-icon-programacion-extrema-32x32.png bordes redondeados – ProgramaciónExtrema.com https://programacionextrema.com 32 32 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 Bordes redondeados en CSS https://programacionextrema.com/2015/11/10/bordes-redondeados-en-css/ https://programacionextrema.com/2015/11/10/bordes-redondeados-en-css/#respond Tue, 10 Nov 2015 23:36:15 +0000 http://programacionextrema.com/?p=541 CSS o Hoja de estilo en cascada sirve para definir la presentación de un documento estructurado escrito en HTML. En este tutorial aprenderemos a realizar bordes redondeados en CSS, esto se puede aplicar en cualquier etiqueta o incluso en imágenes. ¿Cómo hacer bordes redondeados en CSS? Para hacer esto en CSS solamente tenemos que utilizar… Read More

La entrada Bordes redondeados en CSS aparece primero en ProgramaciónExtrema.com.

]]> CSS o Hoja de estilo en cascada sirve para definir la presentación de un documento estructurado escrito en HTML. En este tutorial aprenderemos a realizar bordes redondeados en CSS, esto se puede aplicar en cualquier etiqueta o incluso en imágenes.

¿Cómo hacer bordes redondeados en CSS?

Para hacer esto en CSS solamente tenemos que utilizar la propiedad border-radius con la cantidad de píxeles, según nuestra necesidad. El siguiente ejemplo muestra un cuadrado rojo con bordes de 20px:

<!DOCTYPE html>
<html>
  <head>
    <title>Bordes redondeados en CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<style>
	  #cuadrado{
	    background:red;
		width: 200px;
		height: 200px;
	  }
	  
	  .borde{
	    border-radius: 25px;
	  }
	</style>
  </head>
  <body>
    <div id="cuadrado" class="borde">
	
    </div>
  </body>
</html>

El resultado del código anterior sería:

Cuadrado con bordes redondeados

Cuadrado con bordes redondeados

Esta propiedad nos permite realizar círculos, para esto solo tenemos que poner 100px en el border-radius de la clase borde y nuestro círculo se visualizaría de la siguiente forma:

Círculo en CSS

Círculo en CSS

Una herramienta que les puede ser de gran utilidad para crear bordes redondeados en CSS es http://border-radius.com.
Bueno gente hemos llegado al final de este breve tutorial, espero que les sea de gran utilidad. Ante cualquier problema no duden en dejar un comentario.

La entrada Bordes redondeados en CSS aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/10/bordes-redondeados-en-css/feed/ 0