Témakörök
 
Index

Border, azaz keret rádiusz Explorer, Mozilla Firefox, Safari, Google Chrome böngészőkben

Border, azaz keret rádiusz megjelenítése, külső, azaz export JavaScript alkalmazásával

Származási hely:(Saját részre, mindenki szabadon használhatja)
http://snipplr.com/view/11185/css-rounded-corners-in-internet-explorer-firefox--safari-using-border-radius/

/**
* DD_roundies, this adds rounded-corner CSS in standard browsers and VML sublayers in IE that accomplish a similar appearance when comparing said browsers.
* Author: Drew Diller
* Email: drew.diller@gmail.com
* URL: http://www.dillerdesign.com/experiment/DD_roundies/
* Version: 0.0.2a - preview 2008.12.26
* Licensed under the MIT License: http://dillerdesign.com/experiment/DD_roundies/#license
*
* Usage:
* DD_roundies.addRule('#doc .container', '10px 5px'); // selector and multiple radii
* DD_roundies.addRule('.box', 5, true); // selector, radius, and optional addition of border-radius code for standard browsers.
*
* Just want the PNG fixing effect for IE6, and don't want to also use the DD_belatedPNG library? Don't give any additional arguments after the CSS selector.
* DD_roundies.addRule('.your .example img');
**/

XHTML-fájl "head" és "body" teruletén elhelyezett, rádiuszt megjelenítő JávaScript meghívása
<!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">
<head>
<title>Border, azaz keret rádiusz</title>
<meta name="description" content="A két idézőjel közé írd, miről akarod tájékoztatni a nagyközönséget." />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<script type="text/javascript" src="http://www.dillerdesign.com/experiment/DD_roundies/DD_roundies_0.0.2a-min.js"> </script>
<link href="radiusz.css" rel="stylesheet" type="text/css" />
</head>
<body> <div id="container">
<div class="egyenlo_sarkok">
<script type="text/javascript">DD_roundies.addRule('.egyenlo_sarkok', '20px', true);</script>
</div>
</div> </body> </html>

Stílus fájl: (radiusz.css)
.egyenlo_sarkok{width:95%; background: #FFCC69; border: 4px solid red; padding-left:10px;}

 

A fenti, azaz a külső JavaScript programmal megjeleníthető rádiuszok

Border Tutorial, Frame showing, border, azaz keret bemutató!

 

Border rádiusz, sarkok egyformák

<div class="egyenlo_sarkok">

<script type="text/javascript">DD_roundies.addRule('.egyenlo_sarkok', '20px', true);</script>

<p> Tetszőleges szöveg megírása</p>
</div>

 

Border rádiusz, (balos átló) szemközti sarkok egyformák.

Nagy rádiusz: Bal - felső és Jobb - alsó Kis rádiusz: Jobb-Felső és Bal alsó

<div class="bal_atlo">

<script type="text/javascript">DD_roundies.addRule('.bal_atlo', '20px 4px', true);</script>

<p> Tetszőleges szöveg megírása</p>
</div>

 

Border rádiusz, (jobbos átló) szemközti sarkok egyformák.

Nagy rádiusz: Jobb - felső és Bal - alsó Kis rádiusz: Bal-Felső és Jobb-Alsó

<div class="jobb_atlo">

<script type="text/javascript">DD_roundies.addRule('.jobb_atlo', '4px 20px', true);</script>

<p> Tetszőleges szöveg megírása</p>
</div>

 

Border rádiusz, egyforma rádiuszok, de eltérő keretvastagságok és keretszínek.

<div class="radiuszkeret01">
<script type="text/javascript">DD_roundies.addRule('.radiuszkeret01', '30px 30px 30px 30px', true);</script>
<p> Tetszőleges szöveg megírása</p>
</div>

 

Border rádiusz, sarkoknak és az oldalvastagságoknak eltérő értéket, valamint az oldalaknak és a háttérnek más és más színt határozunk meg. Explorer és Mozilla Firefox egyformán jeleníti meg, kivétel a háttér és keretszín.

<div class="radiuszkeret02">
<script type="text/javascript">DD_roundies.addRule('.radiuszkeret02', '20px 170px 30px 50px', true);</script>
<p> Tetszőleges szöveg megírása</p>
</div>

 

Border rádiusz, sarkoknak és az oldalvastagságoknak eltérő értéket, valamint az oldalaknak és a háttérnek más és más színt határozunk meg. Explorer és Mozilla Firefox egyformán jeleníti meg, kivétel a keretszín.

<div class="hatterszin_div">
<div class="radiuszkeret03">
<script type="text/javascript" src="http://www.dillerdesign.com/experiment/DD_roundies/DD_roundies_0.0.2a-min.js"> </script>
<script type="text/javascript">DD_roundies.addRule('.radiuszkeret03', '170px 170px 30px 50px', true);</script>
<p> Tetszőleges szöveg megírása</p>
</div>
</div>

 

A kék háttérszínnel jelölt JavaScript meghatározást, csak egyszer kell elhelyezni a head szakaszban.
De elhelyezhető minden egyes div szakaszban is, melynek íves sarkokat szeretnénk.

A zöld háttérszínnel jelölt JavaScript meghatározást, helyezzük el közvetlen azon div szakaszban, melynek íves keretet akarunk megjeleníteni.

A stílusok megjelenése:
Mozilla Firefox: Úgy jeleníti meg, ahogyan azokat meghatároztuk.
Explorer. Úgy jeleníti meg, ahogyan azokat meghatároztuk, kivétel:
- Keretszín:A keret oldalainak adott különböző színek esetén is, egyetlen keretszínt jelenít meg mind a négy oldalnak, és pedig az a döntő szín, melyet a border-top színe képvisel.
- Háttérszín: Lefelé és jobbra tolja a keret belső szélétől annyival, amekkora értéket adtunk a felső (border-top) és balos (border-left) megjelenésének.
Safari: Eltérő vonalvastagságok alkalmazásakor, a sarkok rádiuszának folytonossága megszűnik.
Valami olyasmihez lehet hasonlítani a rádiuszok találkozásait, mintha egy vastagabb íves csőbe dugnánk, egy vékonyabb íves csövet, és az átmérő eltérések élesen kirajzolódnak.

Megjegyzés:
Háttérszín alkalmazása esetén, mindegyik böngésző egyformán jelenítse meg:
- A háttérszínt hagyjuk úgy, amilyen a weboldalunk háttérszíne.
- Ha mégis eltérő háttérszínt akarunk megjeleníteni, akkor a rádiuszos div szakaszt, ágyazzuk be egy másik div szakaszba és ennek határozzunk meg háttérszínt.

Ha túl nagy rádiuszokat határozunk meg, akkor a szövegek kívül eshetnek a kereten.
Ilyen esetben, mozgassuk el a szöveget jobbra (margin-left) és alkalmazzuk a sorlezáró jelölőelemet (br), hogy a szövegrészek kereten belül maradjanak.

Összefoglalva: ( Igy, minden böngészőben, egyformán jelenik meg. )
- A keret minden oldalának vonalvastagsága egyforma legyen.
- Háttérszínhez, maradjon a weboldalunk háttérszíne, vagy ágyazzuk másik div szakaszba, mely, rendelkezik eltérő háttérszínnel.
- Eltérő oldalszínek esetén, a border-top színe legyen a domináns szín.

 

A fenti bemutató példák, stílusainak meghatározásai:
A rádiuszok értékét, közvetlen az adott div szakaszban elhelyezett, másodlagos JavaScript utasításban határozzuk meg.

.egyenlo_sarkok{width:95%; background: #FFCC69; border: 4px solid red; padding-left:10px;}
.bal_atlo{width:95%; background: #FFCC69; border: 4px solid green; padding-left:10px;}
.jobb_atlo{width:95%; background: #FFCC69; border: 4px solid green; padding-left:10px;}
.radiuszkeret01{width:750px; background-color: #FFCC69; padding:0px; border-top: 4px solid aqua; border-right: 8px solid blue; border-bottom: 12px solid black; border-left: 16px solid red;}
.radiuszkeret02{width:720px; padding-left:5px; background-color: #FFCC69; padding-left:5px; border-top: 30px solid green; border-right: 20px solid blue; border-bottom: 30px solid black; border-left: 40px solid red;}
.hatterszin_div{background-color: #FFCC69; padding:8px;}
.radiuszkeret03{width:720px; padding-left:5px; border-top: 30px solid green; border-right: 20px solid blue; border-bottom: 30px solid black; border-left: 40px solid red;}

 

 

 

Rövid, egysoros szövegfolyamnál, szövegkiemelés (<span>) :
Tetszőleges szövegrészt kiemelhetünk a span jelölőelemmel, mindegyik böngésző jól jeleníti meg a kijelölt szövegrész körüli rádiuszos keretet.

Többsoros szövegkiemelésnél (<span>) :
IE - 6 és IE - 7 , elfogadható módon jeleníti meg, azaz a span jelölőelemmel kijelölt szövegrészt, külön sorba helyezi, annak ellenére, hogy sorlezáró jelölőelemet nem alkalmaztunk, majd a megadott rádiuszos keretformátumot jeleníti meg a szöveg körül.
IE-8 böngészőben, hibás megjelenést erdményez, a keret túlnyúlik a div szakasz területén is.
Mozilla Firefox böngészőben is hibához vezet, ha a kiemelendő szövegrészben sorlezáró utasítás alkalmazunk.

Az egyedi azonosítót, class osztályazonosítóhoz rendeljük, akkor több jelölőelemhez is felhasználhatjuk, és nem kell újból és újból meghívni a rádiuszt megjelenítő JavaScript programot.

 

Border rádiusz, címsoroknál, bekezdéseknél, kiemeléseknél.

<div class="egyenlo_sarkok">
<script type="text/javascript">DD_roundies.addRule('.egyenlo_sarkok', '20px', true);</script>
Tetszőleges szöveg megírása.
</div>
Stílus meghatározásai:
.egyenlo_sarkok{width:95%; background: #FFCC69; border: 4px solid red; padding-left:10px;}

<h4 class="egyenlo_sarkok">Border, keret rádiusza, címsoroknál</h4>

<p class="egyenlo_sarkok">A keret rádiusza, teljes szövegfolyam kijelölése esetén. A szövegfolyam többsoros is lehet, <br />
sorlezáró jelölőelem alkalmazásával, szellősebbé varázsolhatjuk a megjelenő szövegfolyamot. </p>


<p>Szövegfolyamban, szövegkiemelő jelölőelemet alkalmazunk, <span class="egyenlo_sarkok"> a kijelőlt szövegrész IE-6 és IE-7 -ben külön sorban jelenik meg, </span> egy adott szövegsorban. </p>


<p>Több soros szövegfolyamban <span> szövegkiemelő jelölőelemet alkalmazunk, egy sornál hosszabb szövegrész kijelölésére.<span class="egyenlo_sarkok"> Tetszőleges szöveg, több szövegsot tartalmazó szövegrész kijelölése esetén, folyamatos kijelölése hibás megjelenést erdményez, Explorer böngészőben: IE-6 és IE-7 elfogadhatóan jeleníti meg, azaz fogja az egész kijelölt területet, és annak ellenére új sorba helyezi, hogy sorlezáró utasítást nem helyeztünk el, és szebben jelenítik meg, mint a többi böngésző. De IE-8 elfogadhatatlan. </span> A kijelölt terűleten, sorlezáró utasítás alkalmazásakor, Mozilla Firefox böngészőben is hibához vezet</p>


 

Div szakaszoknak meg kell határozni a szélességet, hogy a width: 800px-es szabványnak megfeleljen. Rádiuszos kereteknél, akkor is határozzuk meg, ha a szabványt felrúgjuk, azaz nem érdekli a weblap tervezőjét, mert így is egyformán jelenik meg, minden monitoron és böngészőben. Legfeljebb, a kisebb monitorokon, élvezhetetlen lesz a szövegfolyam olvashatósága, azaz áttekinthetősége.
A div szakasz szövegfolyamában elhelyezett jelölőelemeknek, rádiuszos keret alkalmazásakor nem kell szélességi értéket meghatározni.

A következő részben, kétszer hívjuk meg a rádiuszt megjelenítő JavaScript programot.

Első, a div szakaszhoz tartozik.
Második, a div szakaszban lévő különböző jelölőelemekhez.

Border rádiusz, címsoroknál, bekezdéseknél, kiemeléseknél.

<div class="div_sarkok">
<script type="text/javascript">DD_roundies.addRule('.div_sarkok', '20px', true);</script>
<script type="text/javascript">DD_roundies.addRule('.jeloloelem_sarkok', '10px', true);</script>
Tetszőleges szöveg megírása.
</div>
Stílusok meghatározásai:
.div_sarkok{width:760px; background: #FFCC69; border: 4px solid red; padding:10px;}
.jeloloelem_sarkok{border: 4px solid green; padding-right: 5px; padding-left: 5px;}

<h4 class="jeloloelem_sarkok">Border, keret rádiusza, címsoroknál</h4>

<p class="jeloloelem_sarkok">A keret rádiusza, teljes szövegfolyam kijelölése esetén. A szövegfolyam többsoros is lehet.
<br /> sorlezáró jelölőelem alkalmazásával, szellősebbé varázsolhatjuk a megjelenő szövegfolyamot. </p>


<p>A szövegfolyamban<span class="jeloloelem_sarkok"> tetszőleges szöveg, kijelölése </span> egy adott szövegsorban.</p>


<p>A szövegfolyamban<span class="jeloloelem_sarkok"> Tetszőleges szöveg, több szövegsot tartalmazó szövegrész kijelölése esetén, folyamatos kijelölése hibás megjelenést erdményez, Explorer böngészőben: IE-6 és IE-7 elfogadhatóan jeleníti meg, azaz fogja az egész kijelölt területet, és annak ellenére új sorba helyezi, hogy sorlezáró utasítást nem helyeztünk el, és szebben jelenítik meg, mint a többi böngésző. De IE-8 elfogadhatatlan. </span> A kijelölt terűleten, sorlezáró utasítás alkalmazásakor, Mozilla Firefox böngészőben is hibához vezet, melyet a sortávolság (line-height) utasítással korigálhatunk. De megjelenésében, ez is elfogadhatatlan.</p>


Összegezve:

 

 

 

Vissza a lap elejére

 

url(Nincs-hatterkep.yyy)