mirror of
https://github.com/SpartanJ/eepp.git
synced 2026-05-28 17:16:29 +03:00
129 lines
5.6 KiB
HTML
129 lines
5.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
background-color: #f5f5f5;
|
|
font: 11px Verdana, Sans-Serif;
|
|
color: #333;
|
|
padding: 8px;
|
|
}
|
|
.row { clear: both; margin-bottom: 4px; }
|
|
.label {
|
|
float: left;
|
|
width: 130px;
|
|
font-size: 9px;
|
|
line-height: 1.2;
|
|
color: #555;
|
|
padding-top: 2px;
|
|
padding-right: 4px;
|
|
text-align: right;
|
|
}
|
|
.box {
|
|
float: left;
|
|
width: 48px;
|
|
height: 48px;
|
|
margin: 2px;
|
|
background-color: #e8f0f8;
|
|
font-size: 8px;
|
|
text-align: center;
|
|
padding: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.clearfix { clear: both; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ============ 1 BORDER ============ -->
|
|
<div class="row">
|
|
<div class="label">1 border</div>
|
|
<div class="box" style="border-top: 4px solid #e74c3c;">top</div>
|
|
<div class="box" style="border-right: 4px solid #27ae60;">right</div>
|
|
<div class="box" style="border-bottom: 4px solid #2980b9;">bottom</div>
|
|
<div class="box" style="border-left: 4px solid #8e44ad;">left</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="label">1 border 8px</div>
|
|
<div class="box" style="border-top: 8px solid #c0392b;">top</div>
|
|
<div class="box" style="border-right: 8px solid #1e8449;">right</div>
|
|
<div class="box" style="border-bottom: 8px solid #1f618d;">bottom</div>
|
|
<div class="box" style="border-left: 8px solid #6c3483;">left</div>
|
|
</div>
|
|
|
|
<!-- ============ 2 ADJACENT BORDERS ============ -->
|
|
<div class="row">
|
|
<div class="label">2 adj borders</div>
|
|
<div class="box" style="border-top: 4px solid #e74c3c; border-right: 4px solid #27ae60;">top+right</div>
|
|
<div class="box" style="border-right: 4px solid #27ae60; border-bottom: 4px solid #2980b9;">right+bot</div>
|
|
<div class="box" style="border-bottom: 4px solid #2980b9; border-left: 4px solid #8e44ad;">bot+left</div>
|
|
<div class="box" style="border-left: 4px solid #8e44ad; border-top: 4px solid #e74c3c;">left+top</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="label">2 adj 2px/8px</div>
|
|
<div class="box" style="border-top: 2px solid #e74c3c; border-right: 8px solid #27ae60;">t2/r8</div>
|
|
<div class="box" style="border-right: 8px solid #27ae60; border-bottom: 2px solid #2980b9;">r8/b2</div>
|
|
<div class="box" style="border-bottom: 2px solid #2980b9; border-left: 8px solid #8e44ad;">b2/l8</div>
|
|
<div class="box" style="border-left: 8px solid #8e44ad; border-top: 2px solid #e74c3c;">l8/t2</div>
|
|
</div>
|
|
|
|
<!-- ============ 2 OPPOSITE BORDERS ============ -->
|
|
<div class="row">
|
|
<div class="label">2 opp borders</div>
|
|
<div class="box" style="border-top: 4px solid #e74c3c; border-bottom: 4px solid #2980b9;">top+bot</div>
|
|
<div class="box" style="border-left: 4px solid #8e44ad; border-right: 4px solid #27ae60;">left+right</div>
|
|
<div class="box" style="border-top: 8px solid #c0392b; border-bottom: 2px solid #1f618d;">t8/b2</div>
|
|
<div class="box" style="border-left: 2px solid #6c3483; border-right: 8px solid #1e8449;">l2/r8</div>
|
|
</div>
|
|
|
|
<!-- ============ 3 BORDERS ============ -->
|
|
<div class="row">
|
|
<div class="label">3 borders</div>
|
|
<div class="box" style="border-top: 4px solid #e74c3c; border-right: 4px solid #27ae60; border-bottom: 4px solid #2980b9;">no left</div>
|
|
<div class="box" style="border-right: 4px solid #27ae60; border-bottom: 4px solid #2980b9; border-left: 4px solid #8e44ad;">no top</div>
|
|
<div class="box" style="border-bottom: 4px solid #2980b9; border-left: 4px solid #8e44ad; border-top: 4px solid #e74c3c;">no right</div>
|
|
<div class="box" style="border-left: 4px solid #8e44ad; border-top: 4px solid #e74c3c; border-right: 4px solid #27ae60;">no bottom</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="label">3 brdrs mixed</div>
|
|
<div class="box" style="border-top: 8px solid #c0392b; border-right: 2px solid #1e8449; border-bottom: 4px solid #1f618d;">t8/r2/b4</div>
|
|
<div class="box" style="border-right: 2px solid #27ae60; border-bottom: 8px solid #2980b9; border-left: 4px solid #6c3483;">r2/b8/l4</div>
|
|
<div class="box" style="border-bottom: 4px solid #2980b9; border-left: 8px solid #8e44ad; border-top: 2px solid #e74c3c;">b4/l8/t2</div>
|
|
<div class="box" style="border-left: 2px solid #8e44ad; border-top: 4px solid #e74c3c; border-right: 8px solid #27ae60;">l2/t4/r8</div>
|
|
</div>
|
|
|
|
<!-- ============ 4 BORDERS ============ -->
|
|
<div class="row">
|
|
<div class="label">4 borders</div>
|
|
<div class="box" style="border: 4px solid #555;">all 4px</div>
|
|
<div class="box" style="border: 1px solid #555;">all 1px</div>
|
|
<div class="box" style="border: 8px solid #555;">all 8px</div>
|
|
<div class="box" style="border-top: 2px solid #e74c3c; border-right: 4px solid #27ae60; border-bottom: 6px solid #2980b9; border-left: 8px solid #8e44ad;">mixed</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="label">4 brdrs colors</div>
|
|
<div class="box" style="border: 6px solid #e67e22;">orange</div>
|
|
<div class="box" style="border: 3px solid #1abc9c;">teal</div>
|
|
<div class="box" style="border: 10px solid #9b59b6;">purple</div>
|
|
<div class="box" style="border-top: 10px solid #f1c40f; border-right: 6px solid #e74c3c; border-bottom: 3px solid #2ecc71; border-left: 1px solid #3498db;">multi</div>
|
|
</div>
|
|
|
|
<!-- ============ 4 BORDERS + RADIUS ============ -->
|
|
<div class="row">
|
|
<div class="label">radius all same</div>
|
|
<div class="box" style="border: 4px solid #e74c3c; border-radius: 4px;">r4</div>
|
|
<div class="box" style="border: 4px solid #27ae60; border-radius: 8px;">r8</div>
|
|
<div class="box" style="border: 4px solid #2980b9; border-radius: 12px;">r12</div>
|
|
<div class="box" style="border: 4px solid #8e44ad; border-radius: 20px;">r20</div>
|
|
</div>
|
|
|
|
<div class="clearfix"></div>
|
|
</body>
|
|
</html>
|