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:
Live Demo:
See the Pen stitched-looks-answer by w3resource (@w3resource) on CodePen.
Supported browser
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4