Establecer un imagen con bordes redondeados	img {\n  border–radius: 8px;\n}\n\nimg {\n  border–radius: 50%;\n}
Crear un thumbnail de una imagen	img {\n  border: 1px solid #ddd;\n  border–radius: 4px;\n  padding: 5px;\n  width: 150px;\n  height: auto;\n}\n\n<img src="paris.jpg" alt="Paris">
Como crear una imagen RESPONSIVE	<!DOCTYPE html>\n<html>\n<head>\n<style>\nimg {\n  max–width: 100%;\n  height: auto;\n}\n</style>\n</head>\n<body>\n\n<h2>Responsive Image</h2>\n\n<p>Responsive images will automatically adjust to fit the size of the screen.</p>\n<p>Resize the browser window to see the effect:</p>\n\n<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">\n\n</body>\n</html>
Centrar una imagen	<!DOCTYPE html>\n<html>\n<head>\n<style>\nimg {\n  display: block;\n  margin–left: auto;\n  margin–right: auto;\n}\n</style>\n</head>\n<body>\n\n<h2>Center an Image</h2>\n\n<p>To center an image, set left and right margin to auto, and make it into a block element.</p>\n\n<img src="paris.jpg" alt="Paris" style="width:50%">\n\n</body>\n</html>
Como hacer una imagen transparente	img {\n  opacity: 0.5;\n}
Posición del texto en una imagen (posición relativa y absoluta)	<!DOCTYPE html>\n<html>\n<head>\n<style>\n.container {\n  position: relative;\n}\n\n.topleft {\n  position: absolute;\n  top: 8px;\n  left: 16px;\n  font–size: 18px;\n}\n\nimg { \n  width: 100%;\n  height: auto;\n  opacity: 0.3;\n}\n</style>\n</head>\n<body>\n\n<h2>Image Text</h2>\n\n<p>Add some text to an image in the top left corner:</p>\n\n<div class="container">\n  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">\n  <div class="topleft">Top Left</div>\n</div>\n\n</body>\n</html>	<div class="container">\n  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">\n  <div class="topleft">Top Left</div>\n</div>

Descubre

Crear Tarjetas

Acerca de Nosotros