HTML CSS Exercise: Create Stitched looks with css3

Last update on March 04 2024 06:50:49 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"><!-- Declaring character encoding for the document -->
<title>Create a Stiched Look with CSS3</title><!-- Title of the HTML document -->
<style>/* Begins CSS styling */
    .stitched {
width: 200px; /* Setting the width of the stitched element */
padding: 20px; /* Adding padding inside the stitched element */
margin: 10px; /* Setting margin around the stitched element */
background: #0d90df; /* Setting background color of the stitched element */
color: #fff; /* Setting text color of the stitched element */
font-size: 21px; /* Setting font size of the text inside the stitched element */
font-weight: bold; /* Setting font weight of the text inside the stitched element */
line-height: 1.3em; /* Setting line height for the text inside the stitched element */
border: 2px dashed #fff; /* Adding a dashed border around the stitched element */
border-radius: 10px; /* Setting border radius for rounded corners of the stitched element */
box-shadow: 0 0 0 4px #0d90df, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /* Adding box shadow to create a shadow effect */
text-shadow: -1px -1px #aa3030; /* Adding text shadow to the text inside the stitched element */
font-weight: normal; /* Resetting font weight to normal */
}
</style>

</head>
<body>
<div class="stitched"></div><!-- Creating a div element with the class "stitched" -->
</body>
</html>

Explanation:

This HTML document creates a stitched look using CSS.
The stitched element is styled using various CSS properties.
It has a fixed width and padding to provide spacing inside.
Margin is added to create space around the element.
Background color is set to a shade of blue.
Text color is set to white for better contrast.
Font size and weight are adjusted for better appearance.
Line height is set to ensure proper spacing between lines of text.
A dashed border with white color is applied around the element.
Border radius is used to round the corners of the element.
Box shadow is added to create a shadow effect around the element.
Text shadow is applied to the text inside the element for a shadowed effect.
Overall, this code demonstrates how to create a visually appealing stitched look using CSS.

Live Demo:

See the Pen stitched-looks-answer by w3resource (@w3resource) on CodePen.

Supported browser


Yes	Yes	Yes	Yes	Yes