ahoj nudil sem se a chtěl bych si udělat lištu tady přikládám lištu co sem si vypujčil a trochu ji upravil aby měla jen nezbytnej kod pro správný zobrazení nechci ji čorovat ale chtěl bych vytvořit vlastní ale nevim jak je to horni lišta z deviant art dalo pracy vytřídit kod jen na nezbytnej ale zvlad sem to je popsaná ale zajimalo by mě spíš jak docílit tohoto výsledku od nuly dík hlavně ty rohy sou řešený docela zajímavě zkuste měnit barvy rohy sou řešeny tečka 1px zvenčí zevnitř a půl křížek zvenčí zevnitř
zde dávám kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs-cz" lang="cs-cz" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="styly.css" />
</head>
<body>
<div id="h-box">
<i class="dl f">
<i></i><b></b>
</i>
<i class="dp f">
<i></i><b></b>
</i>
<div class="fix">
<div class="text">
test
</div>
</div>
</div>
</body>
</html>
body {
margin:0;
padding:0;
background-color:#2F2F2F;
font-family:Times New Roman,Times,serif;
}
/* HORNI BOX */
/* vzdalenost okraju boxu,barva písma-velikost-velikost řádky-"BOXU" */
#h-box {
position:relative;
margin-top:-2px;
margin-left:15px;
margin-right:15px;
color:#FFFFFF;
font-size:15px;
line-height:20px;
}
/* rámeček a barva uvnitř boxu */
.fix {
border-style:solid;
border-width:1px;
background-color:#4C4C4C;
}
/* barva border rámečku */
#h-box i.f i, #h-box .fix {
border-color:#000000;
}
/* rohy */
i.f {
background-image:none !important;
border:1px none;
height:3px;
overflow:hidden;
position:absolute;
width:3px;
}
/* rohy */
i.f i {
border:1px solid;
height:5px;
position:absolute;
width:5px;
}
/* zaobléní čtvereček zvenčí */
i.f b {
height:1px;
width:1px;
position:absolute;
}
/* rohy */
i.dl {
border-style:none none solid solid;
bottom:0;
left:0;
}
/* rohy */
i.dp {
border-style:none solid solid none;
bottom:0;
right:0;
}
/* zaobléní čtvereček zevnitř vlevo */
i.dl i, i.dl b {
bottom:0;
left:0;
}
/* zaobléní čtvereček zevnitř vpravo */
i.dp i, i.dp b {
bottom:0;
right:0;
}
/* barva zaoblení levý a pravý roh --poznamka:barva stranky zvenčí */
#h-box i.f b {
background-color:#2F2F2F;
}
/* barva zaoblení levý a pravý roh --poznamka:barva stranky zvenčí */
#h-box i.f, #h-box i.f b {
border-color:#2F2F2F;
}
/* centrování textu */
.text{text-align:center;}
/* HORNI BOX */
Téma: Css kulatý rohy help (Přečteno 2133 krát)
