Fórum Ubuntu CZ/SK
Ubuntu pro osobní počítače => Software => Příkazový řádek a programování pro GNU/Linux => Téma založeno: CZ-OmA-124.OS 17 Května 2010, 22:02:49
-
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 */
-
A nestačilo by prostě něco ve smyslu:
... -moz-border-radius: 3px; -webkit-border-radius: 3px; ...? :)
-
A nestačilo by prostě něco ve smyslu:
... -moz-border-radius: 3px; -webkit-border-radius: 3px; ...? :)
jj stačilo ale chtěl bych se to naučit dělat pomocí vloženejch i b tagů ale nějak mě uniká princip jakym to je řešený proto bych prosil nějákej návod jak to vytvořit od nuly třeba tady je divný že když všude změnim ID za CLASS tak už se ta lišta nezobrazí kulatá maj nějákej začarovanej kod asi :d
-
Na takéto hračičky skôr skús SVG. Tie guľaté rohy nemusia fungovať všade, opera robila neplechu, ale to sa dalo, avšak IE...
http://www.w3schools.com/svg/default.asp
-
oblibuji tohle http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser (crossbrowser)
anebo pixyho http://wellstyled.com/files/jess-styledbox-preview/example1.html
-
#div {-webkit-border-radius:5px; -moz-border-radius:5px;}
-
kdyz uz tak, tak imo
div
{border-radius : 8px;
-webkit-border-radius : 8px;
-moz-border-radius : 8px;
-khtml-border-radius : 8px;}