Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.
Example of Various Rounded Corners(Run Example)
<!doctype html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div
{
width:100px;
height:50px;
margin-top:10px; /* leave a gap between each div */
padding:10px; /* put padding around the text inside the div */
}
#equal
{
border:red thin solid;
border-radius:25px;
}
#top
{
border:green thin solid;
border-top-left-radius:25px;
border-top-right-radius:25px;
}
#right
{
border:blue thin solid;
border-top-right-radius:25px;
border-bottom-right-radius:25px;
}
#diagonal
{
border:black thin solid;
border-top-right-radius:25px;
border-bottom-left-radius:25px;
}
</style>
</head>
<body>
<div id = "equal">
Equal
</div>
<div id = "top">
Top
</div>
<div id = "right">
Right
</div>
<div id = "diagonal">
Diagonal
</div>
</body>
</html>
List various HTMLelements that you might usefully apply rounded corners to.
By making the rounded corners large enough, we can make a circle. Write code to place an image inside a circle, as shown in this link.
Make three circles of diameter 100px, 200px and 300px, as shown in this link. Make sure to use CSS id and class, so that you do not repeat any CSS code.
The total size of the width of an element includes its width, padding and margin. Adjusting the margin, while keeping the overall size of the width the same, can be used to increase an image's size when the mouse hovers over it. Write code to increase the size of an image by adjusting the margin, as shown in this link.
By adjusting the padding rather than the margin, we can adjust the size of the image inside a 'div'. This gives the effect of the image being zoomed. Write code to zoom an image when the mouse hovers over it, as shown in this link.
Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.