|
Keret (border) formázása css-vel
2012.11.13. 17:02
Ebben a leírásban megtudhatjátok, hogyan kell lekerekített sarkot stb. készíteni css kóddal egyszerűen. (: Igyekeztem egyszerűen leírni mindent, a saját border készítményemmel is. (: Akkor nézzük.
Ehhez két dologra lesz szükségünk. A HTML kódra, amelybe a szöveget helyezzük, és egy CSS kódra, amiben megírjuk a keret stílusát.
Elsőnek itt van a html kód:
<html>
<div id="elso">
Ide jön a szöveged!</div>
<p>
</html>
Innen pedig már itt van az összeállított kód, amit csak át kell írnod olyanra, amilyenre szeretnéd. Ehhez itt vannak a magyarázatok:
Ha a kereted színét akarod megváltoztatni, akkor ezt tedd:
Ha síma egyszínűre megy az egész, akkor csak ennyi a kódod:
border-color: #ffffff;
Ezt írhatod hexába, de betűvel is, pl. black.
Ha mondjuk négy színt akarsz használni, akkor így add meg:
border-color: red blue green black;
Ha a keret stílusát akarod, akkor ezt kell tenned:
border-style: solid dotted groove double;
Na, de mi mit állít be? Egyszerű. Figyeld azt, ami egymás alatt van:
A kódba egyébként így van az egész:
border-color: red blue green black;
border-style: solid dotted groove double;
Akkor egyértelmű, hogy a red-hez (piros), a solid (egyszerű) van hozzárendelve, a blue-hoz (kék) a dotted (pontozott), ami itt most nem látszik, a green-hez (zöld) a groove ("barázda") míg a black-hez (fekete) a double (duplázás).
Lekerekítéshez:
Mivel a böngészők css kódnál sokszor nem "kompatibilisek" egymással ezért ehhez három féle rész van:
Internet Explolerhez és Opera böngészőhpz használjuk a következő kódrészt:
box-shadow: 0px; 0 px; 0px;
Mozilla Firefoxhoz ezt használjuk:
-moz-box-shadow: 0px; 0px; 0px;
Webkit böngészőkhöz ezt:
-webkit-box-shadow: 0px; 0px; 0px;
Nem nehéz megjegyezni.
Egyértelműen ott, ahova most én "0px"-et írtam, oda írod a Te saját értéked, amilyenre szeretnéd formázni, azután bemásolod mindet az összesbe.
De ehhez van egy egyszerűbb módszer is, hogy könyebben ki lehessen alakítani azt a formát, amit szeretnél! :D
Menj fel erre az oldalra: www.border-radius.com. Új lapon nyílik meg, tehát nyugodtan kattints rá. Ezután pedig írj be értékeket, és formázd olyanra, amilyenre akarod. (: Szerintem így sokkal könyebb, nem kell annyit szórakozni a számokkal, hogy összejöjjön. Ha kész vagy, akkor a mezőben megtalálod az ehhez tartozó kódrészletet is, amit kicserélsz arra, amit az alapban megadtam.
Nos, és akkor itt a CSS kód része is. (: Ezt nyugodtan formázhatjátok kedvetekre is, saját írás a border-rahiusokon kívül. (: Amiben most a kódot látod, a benne lévő kód olyanná teszik a bordered.
<style type="text/css">
#elso{
font-family: georgia; /*betűtípus*/
font-style: italic; /*betűstílus pl.: dőlt*/
color: #CD5C5C; /*betű színe*/
text-align: center; /*szöveg elhelyezése pl.: középre*/
border-width: 10px; /*keret szélessége*/
background: #FFE4C4; /*kereten belüli mező színe*/
border-height: 50px; /*keret magassága*/
border-color: #FF6347; /*keret színe*/
border-style: solid ; /*keret stílusa, pl.: dotted=pontozott*/
-webkit-border-radius: 150px; /*webkit böngésző*/
-webkit-border-bottom-right-radius: 15px; /*webkit böngésző*/
-moz-border-radius: 150px; /*mozilla firefox*/
-moz-border-radius-bottomright: 15px; /*mozilla firefox*/
border-radius: 150px; /*Internet exploler és Opera*/
border-bottom-right-radius: 15px; /*Internet exploler és Opera*/
}
/*border / keret stílust készítette: Frankieee*/
</style>
Ehhez persze másold be a fent említett HTML kódot, mert nélküle nem fog működni! Remélem, hogy tudtam segíteni. (:
| 
AJÁNLOM AZ OLDALT
Friss bejegyzések
Friss hozzászólások
Archívum
