Pure CSS es un marco de CSS. Es una colección de herramientas gratuitas y de código abierto para crear sitios web y aplicaciones web adaptables. Pure CSS es desarrollado por Yahoo y se usa para crear sitios web más rápidos, hermosos y receptivos. Se puede utilizar como una alternativa a Bootstrap.
Pure CSS proporciona la clase pure-img que hace que la imagen responda. Esta clase se puede aplicar al elemento <img> para que se escale con la ventana gráfica. Esto es útil cuando se crean sitios web receptivos.
Sintaxis:
<img class="pure-img" src="image_source" />
Ejemplo: En este ejemplo, estamos usando . clase pure-img para crear una página de imagen receptiva.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>PureCSS</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://unpkg.com/purecss@2.0.5/build/pure-min.css" integrity= "sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd" crossorigin="anonymous"> </head> <body> <center> <div style="width: 500px;background-color: yellow;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h2>Responsive Image</h2> <img class="pure-img" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210909155642/logoleft.png" /> </div> </center> </body> </html>
Producción:
Producción
Imagen de esquinas redondeadas: la propiedad border-radius de CSS se utiliza para crear una imagen de esquinas redondeadas.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>PureCSS</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://unpkg.com/purecss@2.0.5/build/pure-min.css" integrity= "sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd" crossorigin="anonymous"> </head> <body> <center> <div style="width: 500px; background-color: yellow;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h2>Responsive Image</h2> <img class="pure-img" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210909155642/logoleft.png" style="border-radius: 50px;" /> </div> </center> </body> </html>
Producción:
Producción
Imagen circular: la propiedad border-radius como 50% se usa para crear la imagen de forma circular.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>PureCSS</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://unpkg.com/purecss@2.0.5/build/pure-min.css" integrity= "sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd" crossorigin="anonymous"> </head> <body> <center> <div style="width: 500px; background-color: yellow;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h2>Responsive Image</h2> <img class="pure-img" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210909155642/logoleft.png" style="border-radius: 50%;" /> </div> </center> </body> </html>
Producción:
Producción
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA