Weblap vonalak rajzok, keretek, és a border rádiusz. Mozilla Firefox, Safari, Google Chrome és Explorer böngészőkben

Témakörök.

1. Vonalak stílusa, Angol elnevezés alpján.


2. Területhez, rádiusz border.


3. Border létrehozása, egy meglévő fotóból.


4. Keretek eltérő színnel és rádiusszal.


5. Egyedi vonal és keret.

---

Vonalak és keretek

Vonal típusa	Angol neve	Normál keret és vonal	Rádiuszos keret és vonal
Folytonos vonal	solid	Vonal megjelenése	Rádiusz megjelenése
Pontozott vonal	dotted	Vonal megjelenése	Rádiusz megjelenése
Szaggatott vonal	dashed	Vonal megjelenése	Rádiusz megjelenése
Dupla vonal	double	Vonal megjelenése	Rádiusz megjelenése
Bemélyített vonal	groove	Vonal megjelenése	Rádiusz megjelenése
Kidomborodó vonal	ridge	Vonal megjelenése	Rádiusz megjelenése
Kiemelkedő vonal	outset	Vonal megjelenése	Rádiusz megjelenése
Süllyesztett vonal	inset	Vonal megjelenése	Rádiusz megjelenése

---

 

Vonal vagy keret és annak rajzolatának megjelenítései

border: 2px solid #fff; Vonal rajz	border-top: 2px solid #fff; Vonal rajz	border-right: 2px solid #fff; Vonal rajz	border-bottom: 2px solid #fff; Vonal rajz	border-left: 2px solid #fff; Vonal rajz
border-top: 2px solid #fff; border-right: 2px solid #fff; Vonal rajz	border-top: 2px solid #fff; border-bottom: 2px solid #fff; Vonal rajz	border-top: 2px solid #fff; border-left: 2px solid #fff; Vonal rajz	border-right: 2px solid #fff; border-left: 2px solid #fff; Vonal rajz	border-right: 2px solid #fff; border-bottom: 2px solid #fff; Vonal rajz
border: 2px solid #fff; border-top: none; Vonal rajz	border: 2px solid #fff; border-right: none; Vonal rajz	border: 2px solid #fff; border-bottom: none; Vonal rajz	border: 2px solid #fff; border-left: none; Vonal rajz
{ border-top: 10px solid white; border-right: 20px solid blue; border-bottom: 30px solid black; border-left: 40px solid red; }	Vonalak rajzolatának, térbeli megjelenése

---

Vissza a lap elejére

 

Rádiusz vagy íves vonal rajzolata

border: 4px solid #fff; Vonal rajz

border-top: 4px solid #fff; Vonal rajz

border-right: 4px solid #fff; Vonal rajz

border-bottom: 4px solid #fff; Vonal rajz

border-left: 4px solid #fff; Vonal rajz

---

Területhez rádiuszos border

Lekerekítések:
.terulet1 {border: 2px solid black; border-radius: 2px; width:100px; height:100px; background-color: yellow;}
.terulet2 {border: 2px solid black; border-radius: 4px; width:100px; height:100px; background-color: yellow;}
.terulet3 {border: 2px solid black; border-radius: 8px; width:100px; height:100px; background-color: yellow;}
.terulet4 {border: 2px solid black;border-radius: 12px; width:100px; height:100px; background-color: yellow;}
.terulet5 {border: 2px solid black; border-radius: 50%; width:100px; height:100px; background-color: yellow;}
.terulet6 {border: 2px solid black; border-radius: 50%; width:100px; height:80px;  background-color: yellow;}

<div class="terulet1"> Terület 1.</div>
<div class="terulet2"> Terület 2.</div>
<div class="terulet3"> Terület 3.</div>
<div class="terulet4"> Terület 4.</div>
<div class="terulet5"> Terület 5.</div>
<div class="terulet6"> Terület 6.</div>

---

Terület 1.

Terület 2.

Terület 3.

Terület 4.

Terület 5.

Terület 6.

---

Vissza a lap elejére

 

Készítsünk egyedi vonalakat

Diszítsük weboldalunkat egyedi vonalakkal és keretekkel

Emlékeztető

Képet behívó utasítás, a képhez tartozó szöveggel:
<img src="images/képfájlnév.jpg" width="......" height="......." alt="a kép elnevezése" border="0" />

Háttérkép lekérő utasítás:
#azonosito {width: ....px; height: ....px; background: url(XX / YYYYYYYYY.jpg) no-repeat; }

A div szakasz méretéből adódóan a képet tetszés szerinti pozícióba mozgathatjuk, ha megadtuk a no-repeat utasítást.
A no-repeat utasítást töröljük, akkor a kép annyiszor fog ismétlődni, még e div szakasz területét ki nem tölti

---

A következő háttérképekből áll össze, az alsó és felső keretformátum

<----- Képek mérete: 200x14px ---->

1.

2.

 

<---------------------- Képek mérete: 400x14px --------------------->

1.

2.

3.

4.

---

A fenti képek, 210px-től 800px széles (width) div szakaszokhoz használhatók.

---

1. Vonal lent jelenik meg

width: 210px

Vonal hossza, automatikusan követi a div szakasz szélességét 210px-től 400px-ig.

---

2. Vonal lent jelenik meg

width: 410px

Megírása HTML-fájlban

<div class="alsovonal_001">
<p class="p_margo">
Szöveg megírása. xxxxxx xxxxx xxxxxx xxxxxx xxxxxx xxxxxxx xxxxxx xx xxxx x x xxxxxx x x x xxxxxx x x x xxxx xxxx xxxx x x x x xx xxxxx x xxxxxx x xxx xxx!
</p>
</div>

Megírása CSS-fájlban

/* 2. Vonal csak lent 410px ----- Háttérszínt, a végén kell megírni! */
.alsovonal_001 { width: 410px; margin-top: 5px; padding-top: 1px;}
.alsovonal_001 { background: url(pirosvonal_1.gif) no-repeat right bottom; text-align: left; }
.alsovonal_001 p { background: url(pirosvonal_2.gif) no-repeat left bottom; padding-bottom: 5px;}
.p_margo { font-size: 60%; padding-right: 10px; padding-left: 10px;}

.alsovonal_001 { background-color: aqua;}

---

3. Vonal lent jelenik meg

width: 800px

Vonal hossza, automatikusan követi a div szakasz szélességét 410px-től 800px-ig.

---

1. Vonal lent és fent

width: 410px

Megírása HTML-fájlban

<div id="atfogo_001">

<div class="vonalfent_001">
<p class="cp">
Szöveg megírása. xxxxxx xxxxx xxxxxx xxxxxx xxxxxx xxxxxxx xxxxxx xx xxxx x x xxxxxx x x x xxxxxx x x x xxxx xxxx xxx xxx xxxx xx xxxx xxxxxxxxxxx xxx aaa!
Szöveg megírása. xxxxxx xxxxxx xxxxxxx xxxxxx xx xxxx x x xxxxxx x x x xxxxxx x x x xxxx xxxx xxxx xxxxx xxx xxx xxxxxx xxxx xx xxxx xxxxxxxxxxx xxx aaa!
</p>
</div> <!-- vonalfent_001, lezárása -->

<div class="vonallent_001">
<p><span class="pont">.</span></p>
</div>

</div>

Megírása CSS-fájlban

#atfogo_001 {background-color: aqua;}
#atfogo_001, .vonalfent_001, .vonallent_001 { width: 410px;}

.vonalfent_001{ margin-top: 10px; padding-top: 0px; margin-top: -16px;}
.vonalfent_001{ background: url(pirosvonal_4.gif) no-repeat right top; text-align: left;}
.vonalfent_001 p{ background: url(pirosvonal_3.gif) no-repeat left top; padding-top: 18px;}
.vonalfent_001{ background-color: aqua;}
.cp { font-size: 60%; padding-right: 20px; padding-left: 20px;}

.vonallent_001{ background: url(pirosvonal_1.gif) no-repeat right bottom;}
.vonallent_001 p{background: url(pirosvonal_2.gif) no-repeat left bottom;}

.vonallent_001{ background-color: aqua;}
.pont {font-size: 10px; margin-left: 15px; color: red;}

---

2. Vonal lent és fent

width: 800px

Vonalak hossza, automatikusan követi a div szakasz szélességét 410px-től 800px-ig.

---

Megírása HTML-fájlban

<div class="keret">
<p class="up_02">
szövegsor, ide írhatunk tetszőleges szöveget.
</p>
</div>

Megírása CCS-fájlban

.keret {width: 300px;}
.keret {background: url(u_vonal_300x500.jpg) no-repeat top;}
.keret p {background: url(u_vonal_300x18.jpg) no-repeat bottom;}

.up_02 {font-size: 12px; padding-top: 15px; padding-right: 5px; padding-bottom: 12px; padding-left: 25px;}

---

Vissza a lap elejére

Border létrehozása, egy meglévő fotóból.

A CSS border-imagetulajdonsággal beállíthat egy képet, amelyet az elem körül szegélyként használunk.
Ez a border-imagetulajdonság elkészíti a képet és kilenc részre osztja, mint egy tic-tac-toe tábla.
Ezután a sarkokat a sarkokba helyezi, és a középső szakaszokat megismételjük vagy megfeszítjük, ahogyan Ön megadta.

---

A képből border, három részből áll:
- A szegélyként használni kívánt kép.
- Hól szeletelje a képet.
- Határozza meg, hogy a középső szakaszokat meg kell ismételni vagy meg kell nyújtani.

---

A következő képeket (1.Kép 2.Kép 3.Kép) használjuk border, azaz, keret megjelenítésre.

A border szélességi értékének, és a round / stretch értékének megváltoztatásával, eltérő megjelenési formátumokat hozhatunk létre.
Itt a bemutatóban:
- A border szélessége fix, azaz, 10px
- A round / stretch értékei változóak lesznek.

---

1.Példa round: A kép középső szakaszai ismétlődnek, a határ létrehozásához.
.ismetles{width:150px; height:80px; padding:5px; border:10px solid transparent; border-image:url(border.png) 30 round;}

2.Példa stretch: A kép középső részei meg vannak húzva, a határ létrehozásához.
.nyujtas{width:150px; height:80px; padding:5px; border:10px solid transparent; border-image:url(border.png) 30 stretch;}

3. {width:150px; height:80px; padding:5px; border:10px solid transparent; border-image:url(border.png) 20% round;}
4. {width:150px; height:80px; padding:5px; border:10px solid transparent; border-image:url(border.png) 50 round;}

1. Kép	30 round;	30 stretch;	20% round;	50 round;
2. Kép	30 round;	30 stretch;	20% round;	50 round;
3. Kép	30 round;	30 stretch;	20% round;	50 round;

---

Itt, a round / stretch értékeit megváltoztathatjuk,
ha a lenti gombokra, többször is kattintunk.

round; round érték növelése. Katt ide!

stretch; stretch érték növelése. Katt ide!

---

 

Keretek eltérő színnel és rádiusszal

 

Vissza a lap elejére

------------------------------------------------------------------------------