imagen Cambiar moldea con CSS

En este artículo, vamos a aprender cómo alterar o formas de la imagen cambiar con CSS y mostrarlos en nuestra página web ?

Las imágenes son parte integral de una página web. Deben explicar un montón de palabras de una manera breve y es igualmente importante que se ven muy bien en términos de diseño y el flujo con el texto. Con CSS podemos tomar el cuidado del diseño.

En este artículo, vamos a aprender cómo cambiar la forma de una imagen y mostrarlos con el texto en un formato agradable ?

Por class una imagen es una dimensión rectángulo. Es el comportamiento default del navegador. Aquí está una imagen simple código default que parece simple por for.

<img class="image" src="image.jpg">

Ahora con el fin de cambiar su forma tenemos que aplicar CSS en él y los resultados serán alucinante. Vamos a transformar esta forma default en círculo.

Código CSS-

.image {
width: 100px;
height: 100px;
border-radius: 50%;
}

En este código, estamos convirtiendo la imagen en un círculo. En primer lugar seleccionamos la imagen utilizando el selector .Imagen y luego aplicamos propiedades en ella.

La anchura y propiedades de altura en este elemento, muestra el elemento en la página web en esta dimensión especificada. default, aplicamos la propiedad la frontera de radio a 50% que va a cambiar esta forma en el círculo.

Aquí es una demo,

DEMO

HTML con CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Center Image</title>
<style>
.image {
width: 200px;
height: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Default</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample74.jpg" alt="" width="200" height="200">
<h1>With border-radius applied</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample74.jpg" alt="" class="image">
</body>
</html>

salida

Change image shapes with CSS - 4


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *