CSS efekty: Zaokrúhľovanie rohov prvkov

Syntax kaskádových šablón štýlov je konštruovaný tak, že možnosť získať najviac neočakávaný dizajn je k dispozícii aj osobe ďaleko od programovania a vývoja lokalít. Možno zo skutočnosti, že detské hry v kocky zostali v pamäti každého, aby využili túto mnohostrannú skúsenosť v HTML, CSS nie je ťažké.

Moderné programovanie je však stále veľmi vzdialené od reprezentácie konštrukcií skutočnej reality. Doteraz každá oblasť (obsadená akýmkoľvek blokovým prvkom) v akomkoľvek svojom význame a formálnych účeloch má obdĺžnikový tvar, v ktorom je vytvorená požadovaná krivka obrysu.

Doteraz každý kruh, polomer zakrivenia, akákoľvek zakrivená priama čiara atď. Sú opísané zložitými matematickými rovnicami alebo veľmi malými kockami, lichobežníkmi, trojuholníkmi alebo inými priamočiarymi prvkami, ktoré sú viditeľné pre oko ako bod na línii.

Klasické priame konštrukcie

Nie je prekvapením, že pokrok v programovaní a informačných technológiách legitimizoval obdĺžnikové návrhy. Pokročilé nápady nezneužili čas na zaoblených formulároch, ale nezabudli poskytnúť vývojárovi dostatok funkcií v tagoch a pravidlách HTML, CSS a súvisiacich programovacích jazykoch.

Každý prvok použitý na stránke má obdĺžnikovú oblasť a v ňom je vybraných niekoľko komponentov, z ktorých je v každom konkrétnom prípade potrebné používať iba potrebné, s požiadavkami kompatibility medzi rôznymi prehliadačmi, vlastnosti označovania špecifického obsahu v dostupných syntaktických konštrukciách.

Všeobecné pravidlá CSS

Kaskádové štýly navrhujú opis prvkov nasledovne:

• Vlastnosť: hodnota.

Vlastnosť je špecifický názov a hodnota môže byť buď názov alebo vymenovanie mien alebo hodnôt.

Pokiaľ ide o blokové prvky a potrebu zaokrúhľovania rohov pomocou CSS, má zmysel použiť vlastnosť hraničného polomeru a jeho hodnotu vo formáte "38px" alebo "8px 16px 24px 38px".

Ak je hodnota nastavená na jedno číslo, bude nastavená ako jedna pre všetky uhly. Záznam všetkých štyroch hodnôt sa týka:

• Prvé číslo vľavo hore;
• Druhý v pravom hornom rohu;
• Tretia - vpravo nižšia;
• Druhé doľava.

Zdieľanie niektorých pravidiel

Pojmy okraj, obrázok a pozadia môžu byť použité spoločne. To je normálne a pravidlá sa navzájom neporušujú a vytvárajú všeobecné zloženie. Hlavnou vecou je poskytnúť informácie o tom, čo presne každý z nich znamená a ako sa to prekrýva.

Pred implementáciou tohto alebo tohto prvku je dôležité vykonať niekoľko experimentov a testovať operáciu na viacerých prehliadačoch. Orientácia na rady, odporúčania, príklady tretích strán alebo syntax CSS, zaokrúhľovanie rohov atď., Je zriedka lepšia ako vaša vlastná čerstvá prax.

Je dôležité pochopiť, že hranice, obraz, z hľadiska konštrukcie rohov, sú rovnaké koncepty. Obraz môže byť prezentovaný nie vo formáte png. Bude prerušený prehliadačom podľa pravidiel stanovených v CSS. Zaokrúhľovacie rohy sú obavy vývojára, bez ohľadu na obdĺžnikovú veľkosť východiskového materiálu.

Vlastnosti HTML, CSS z prehliadačov

Privítajte hru hromadne - pre všetky prehliadače hneď. V každom prípade klasické príklady na tému "CSS: zaokrúhľovanie rohov" naznačujú, že sa píše takto:

Pozadie: # FF7F00; / * Pozadie * /

Hranica: 1px # CCCCCC pevná látka; / * Rámček * /

-moz-border-radius: 10px; / * CSS zaokrúhlenie rohov pre Mozilla Firefox * /

-webkit-border-radius: 10px; / * ... pre Chrome a Safari * /

-khtml-okraj-polomer: 10px; / * ... Konquerer * /

Okraj-polomer: 10px; / * CSS zaokrúhľovanie rohov pre všetky * / atď.

Vo väčšine prípadov stačí uviesť posledné pravidlo. Redundancia by sa mala používať iba vtedy, keď je to skutočne potrebné.

Klasické a úžasné tabuľky

Napriek mnohým sporom podporovateľov tabuľkového usporiadania (tr, td) a použitia značiek div a span ("úžasné" rozloženie), objektívna prax uprednostňuje možnosť rozumnej nevyhnutnosti.

Divas majú niektoré čnosti, iné majú tabuľky. Ak by sa navzájom dopĺňali, ale jednoducho súťažili, otázka by rýchlo zmizla do jedného variantu, ktorý by kombinoval najlepšie strany tabuliek a divov.

Väčšina webových stránok sa vytvára pomocou systému CMS (site management systems) a pre vývojárov je k dispozícii nielen široká škála "obrovských" dátových polí, stovky zložiek, objektov, ale aj tabuliek.

Štítky [div | span] ako také nie sú pridelené, ale jediná vec, ktorá presne prichádza k úplnému výkupu vývojára, sú štýly CSS. A akákoľvek CMS jasne oddeľuje kód, ktorý je v ňom obsiahnutý, od kreativity vývojára a vlastných štýlov z pridaných štýlov, a pokiaľ ide o zmeny (napríklad v css - zaokrúhlenie rohov tabuľky), môžete vždy obnoviť nastavenia a predvolené štýly.

Krivky a uhly, ktoré syntax neposkytuje

Môžete prísne dodržiavať všetky pravidlá HTML, CSS, ale majú za následok, že nie sú poskytované. Nahradením prvkov nad sebou môžete získať akékoľvek oblasti akejkoľvek konfigurácie. Pomocou programovania PHP na serveri môžete posielať ľubovoľné súbory štýlov do prehliadača návštevníka a priložiť im zodpovedajúci kód JavaScript v telese súboru HTML alebo samostatnom súbore js.

Každá verzia obrysu, akákoľvek forma vášho vlastného prvku mimo pravidiel CSS! Zaokrúhľovanie rohov je len čiastočné a reálne možnosti sú oveľa širšie. Súčasne programujete svoje vlastné objekty, nemôžete venovať pozornosť funkciám jednotlivých prehliadačov, používať iba tie značky a konštrukcie hypertextových jazykov, ktoré sú vnímané všetkými prehliadačmi bez výnimky.

Pomocou myšlienok objektovo-orientovaného programovania môžete navrhnúť vzhľad uhla alebo krivky, ktorý zrejme nie je poskytovaný žiadnym prehliadačom formulára. V tomto prípade nie je vôbec potrebné, aby bol presne uhol oblasti, pôvodne obdĺžnikového tvaru. Je dôležité, aby sa komponenty krivky popísané vo forme pravidiel CSS skombinovali do jedného vizuálneho kódu objektu JavaScript a v správnom momente, na správnom mieste v prehliadači, sa odrážajú v správnej forme.

S touto technológiou nič nebráni tomu, aby sa takéto objekty v troch-dimenzionálnej rovine uvádzali alebo demonštrovali animáciu.