Pure CSS Images
Pure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap.
Pure CSS provides class pure-img that makes the image responsive. This class can be applied to the <img> element to make it scale with the viewport. This is handy when building responsive websites.
Syntax:
<img class="pure-img" src="image_source" />
Example: In this example, we are using .pure-img class for creating a responsive image page.
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= 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= </div> </center></body> </html> |
Output:
Output
Rounded Corners Image: The border-radius property of CSS is used to create a rounded corner image.
Example:
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= 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= style="border-radius: 50px;" /> </div> </center></body> </html> |
Output:
Output
Circle Image: The border-radius property as 50% is used to create the circle shape image.
Example:
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= 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= style="border-radius: 50%;" /> </div> </center></body> </html> |
Output:
Output
Please Login to comment...