Circle image caption.pptx

CIRCLE IMAGE CAPTION
• Ramu.m-20201CSE120
• Mohammad Aneesh-20201CSE0148
• Rohan.k.c-20201CSE0119

HOW TO CREATE ROUNDED IMAGES
STEP 1) ADD HTML:
EXAMPLE
<IMG SRC="IMG_AVATAR.PNG" ALT="AVATAR">
STEP 2) ADD CSS:
USE THE BORDER-RADIUS PROPERTY TO ADD ROUNDED
CORNERS TO AN IMAGE. 50% WILL MAKE THE IMAGE
CIRCULAR
EXAMPLE
IMG {
BORDER-RADIUS: 50%;
}

<!DOCTYPE HTML>
<HTML>
<HEAD>
<META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1">
<STYLE>
IMG {
BORDER-RADIUS: 50%;
}
</STYLE>
</HEAD>
<BODY>
<H2>ROUNDED IMAGES</H2>
<IMG SRC="IMG_AVATAR.PNG" ALT="AVATAR" STYLE="WIDTH:200PX">
</BODY>
</HTML>

HOW TO CREATE AVATAR IMAGES
STEP 1) ADD HTML:
EXAMPLE
<IMG SRC="AVATAR.PNG" ALT="AVATAR" CLASS="AVATAR">
STEP 2) ADD CSS:
SET A MATCHING WIDTH AND HEIGHT THAT LOOKS GOOD, AND USE THE BORDER-
RADIUS PROPERTY TO ADD ROUNDED CORNERS TO AN IMAGE. 50% WILL MAKE THE
IMAGE CIRCULAR:
EXAMPLE
.AVATAR {
VERTICAL-ALIGN: MIDDLE;
WIDTH: 50PX;
HEIGHT: 50PX;
BORDER-RADIUS: 50%;
}

<!DOCTYPE HTML>
<HTML>
<HEAD>
<META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1">
<STYLE>
.AVATAR {
VERTICAL-ALIGN: MIDDLE;
WIDTH: 50PX;
HEIGHT: 50PX;
BORDER-RADIUS: 50%;
}
</STYLE>
</HEAD>
<BODY>
<H2>AVATAR IMAGES</H2>
<IMG SRC="IMG_AVATAR.PNG" ALT="AVATAR" CLASS="AVATAR">
<IMG SRC="IMG_AVATAR2.PNG" ALT="AVATAR" CLASS="AVATAR">
</BODY>
</HTML>

CIRCLE DRAWING BY CSS
<!DOCTYPE HTML>
<HTML>
<HEAD>
<STYLE>
#CIRCLE {
WIDTH: 50PX;
HEIGHT: 50PX;
-WEBKIT-BORDER-RADIUS: 25PX;
-MOZ-BORDER-RADIUS: 25PX;
BORDER-RADIUS: 25PX;
BACKGROUND: BLUE;
}
</STYLE>
<HEAD>
<BODY>
<DIV ID="CIRCLE"></DIV>
</BODY>
</HTML>

IMAGE IN A CIRCLE
<!DOCTYPE HTML>
<HTML LANG="EN">
<HEAD>
<META CHARSET="UTF-8">
<META HTTP-EQUIV="X-UA-COMPATIBLE" CONTENT="IE=EDGE">
<META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1.0">
<TITLE>CIRCULAR IMAGE</TITLE>
<LINK REL="STYLESHEET" HREF="CIRCLE.CSS">
//CIRCLE.CSS
<STYLE>
DIV {
TEXT-ALIGN: CENTER;
}
IMG {
HEIGHT: 200PX;
WIDTH: 200PX;
BORDER-RADIUS: 50%;
}
</STYLE>//
</HEAD>
<BODY>
<DIV>
<IMG SRC="IRON.JPG" ALT="IRON">
</DIV>
</BODY>
</HTML>

Circle image caption.pptx

Recommended

Recommended

More Related Content

Similar to Circle image caption.pptx

Similar to Circle image caption.pptx (20)

Recently uploaded

Recently uploaded (20)

Circle image caption.pptx