Fieldset Style Sketching
How do I make an fieldset style sketching?
What is a fieldset style sketching? How do you make a fieldset style sketching? This script and codes were developed by Jeremy Paris on 08 September 2022, Thursday.
Fieldset Style Sketching Previews
Fieldset Style Sketching - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fieldset Style Sketching</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <fieldset class="base"> <legend>Default Fieldset Styles</legend> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab iusto est, minima officiis atque sint, qui, doloremque perferendis veritatis dolores eaque commodi? Voluptatibus deserunt commodi quod recusandae accusamus, ut temporibus.
</fieldset>
<fieldset class="one"> <legend>Label Tab</legend> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab iusto est, minima officiis atque sint, qui, doloremque perferendis veritatis dolores eaque commodi? Voluptatibus deserunt commodi quod recusandae accusamus, ut temporibus.
</fieldset>
<fieldset class="two"> <legend>Horizontal Bar</legend> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab iusto est, minima officiis atque sint, qui, doloremque perferendis veritatis dolores eaque commodi? Voluptatibus deserunt commodi quod recusandae accusamus, ut temporibus.
</fieldset>
<fieldset class="three"> <legend>Vertical</legend> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab iusto est, minima officiis atque sint, qui, doloremque perferendis veritatis dolores eaque commodi? Voluptatibus deserunt commodi quod recusandae accusamus, ut temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab iusto est, minima officiis atque sint, qui, doloremque perferendis veritatis dolores eaque commodi? Voluptatibus deserunt commodi quod recusandae accusamus, ut temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab iusto est, minima officiis atque sint, qui, doloremque perferendis veritatis dolores eaque commodi? Voluptatibus deserunt commodi quod recusandae accusamus, ut temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab iusto est, minima officiis atque sint, qui, doloremque perferendis veritatis dolores eaque commodi? Voluptatibus deserunt commodi quod recusandae accusamus, ut temporibus.
</fieldset>
<fieldset class="four"> <legend>Bookends</legend> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab iusto est, minima officiis atque sint, qui, doloremque perferendis veritatis dolores eaque commodi? Voluptatibus deserunt commodi quod recusandae accusamus, ut temporibus.
</fieldset>
</body>
</html>
Fieldset Style Sketching - Script Codes CSS Codes
body { padding: 3em; min-width: 25em; background: white;
}
fieldset { border: 1px solid black; margin-bottom: 3em; background: white;
}
legend { padding: 0.25em 0.5em;
}
.one { background: linear-gradient(to bottom, red, red 0.25em, white 0.25em, white); padding-top: 1em; margin-top: 1.5em; position: relative;
}
.one legend { font-size: 0.75em; font-weight: bold; text-transform: uppercase; padding-left: 1em; padding-right: 1em; background: red; color: white; border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; border-top-left-radius: 0.33em; border-top-right-radius: 0.33em; position: absolute; bottom: 100%; left: 0.75em;
}
.two { position: relative; padding-top: 2em; box-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.5);
}
.two legend { position: absolute; top: 0; left: 0; background: blue; color: white; width: 100%; font-size: 0.9em; padding-left: 0.75em; letter-spacing: 0.05em;
}
/* NOTE: vertical text will not show whitespace - so single words only :( */
/* TODO: look for solution for previous note */
.three { position: relative; padding: 1em 3em; overflow: hidden; background: linear-gradient(to left, green, green 1em, white 1em, white); box-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.5);
}
.three legend { font-size: 1em; position: absolute; top: 0; left: 0; font-family: 'Courier New', Courier, monospace; word-break: break-all; line-height: 1em; background: green; color: white; width: 1.5em; height: 100%; padding: 1em 0.25em 1em; text-align: center; text-transform: uppercase;
}
.four { padding-top: 1em; border: 0.25em solid purple;
}
.four legend { padding: 0.25em 1.67em; font-size: 0.85em; background: #dfbfdf; border-left: 0.33em solid purple; border-right: 0.33em solid purple; text-transform: uppercase; line-height: 1em;
}
| Developer | Jeremy Paris |
| Username | digsite_ |
| Uploaded | September 08, 2022 |
| Rating | 3.5 |
| Size | 3,073 Kb |
| Views | 64,768 |
Do you need developer help for Fieldset Style Sketching?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Jeremy Paris (digsite_) Script Codes
| Name | Size |
| Fun with Dropcap.JS | 4,712 Kb |
| Sample Profile Page | 4,816 Kb |
| Animated D6 | 3,026 Kb |
| Diamond Loader | 2,595 Kb |
| Pinstripes | 1,816 Kb |
| Decepticon Logo | 3,561 Kb |
| Animated Redacted Text | 3,601 Kb |
| Vacation Roulette | 3,986 Kb |
| Beating Pixel Heart | 3,940 Kb |
| Faux Particles | 214,971 Kb |
Create amazing Facebook ads with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Email Marketing Mock | Kristenzirkler | 8,224 Kb |
| No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
| Header | Er40 | 1,542 Kb |
| A Pen by Alexandru Pora | Axpro | 1,615 Kb |
| Clock Face Idea | Chrisburnell | 3,196 Kb |
| Portfolio Layout Flex | Lahvjal | 3,489 Kb |
| CSS3 Button Examples | Volusion | 3,377 Kb |
| SVG email test v2.0 | M_J_Robbins | 2,090 Kb |
| Experiment | Toddmoy | 2,849 Kb |
| Out of the blue | Giaco | 2,537 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!