CSS Efektoj: rondigita anguloj de elementoj

Sintakso de Laŭtemaj Style Sheets estas desegnita por simple ke la eblo de akiri la plej neatenditaj dezajno estas disponebla eĉ malproksime de la programado kaj la evoluo de la homaj lokoj. Eble la fakto ke infanoj ludas kun blokoj restas en ĉies memoro, uzi la mult-faceted sperto en HTML, CSS estas facila.

Tamen, la nuna programado estas ankoraŭ tre malproksime de prezenti konstruoj de la realo. Ĝis nun, neniu areo (okupita kion vi ŝatas bloko elemento) en iu el ĝia signifo kaj la formala nomumo de rektangula formo, kiu estas formita ene la deziratan kurbon konturo linio.

Ĝis nun, neniu cirklo, rondigo radiuso, kiel kurba rekta kaj tiel plu. P. Priskribas la kompleksaj matematikaj ekvacioj aŭ tre malgrandaj kuboj, trapezoj, trianguloj aŭ aliaj rectilínea elementoj kiuj estas distingeblaj al la okulo kiel punkto sur la linio.

Klasika Rekta dezajno

Ne estas surprize, ke progreso en la kampo de programado kaj informo teknologioj legalizita rektangula dezajno. Novigaj ideoj ne malŝpari tempon sur rondigita formon, sed ne forgesu prezenti al dispozicio de la ellaboranto sufiĉe trajtoj kaj HTML etikedoj reguloj, CSS kaj rilataj programlingvoj.

Ajna elemento uzata en la paĝo estas rektangula areo, en kiu ĝi estas asignita pluraj partoj, el kiuj en ĉiu kazo devus esti uzata nur necesa konsiderante krossbrauzernosti postuloj markado trajtoj specifaj enhavo havebla sintaksaj konstruoj.

Ĝeneralaj reguloj por CSS

Laŭtemaj Folioj proponi por priskribi la elementojn tiel:

• propraĵo: valoro.

En ĉi tiu kazo, proprieto - specifa nomo kaj valoro povas esti aŭ nomo aŭ liston de nomoj aŭ valorojn.

Koncerne la bloko elementoj kaj la bezono fari per CSS rondigita anguloj, ĝi havas sencon uzi la limo-radiuso proprieto kaj ĝia valoro en la formato "38px" aŭ "8px 16px 24px 38px".

Se la valoro donita per sola nombro, ĝi estos metita al tiuj de ĉiuj anguloj. Rekorda ĉiuj kvar valoroj estas:

• unua nombro - ĝis la supra maldekstra angulo;
• la dua - por la supra dekstra;
• la tria - al la pli malalta rajto;
• lasta - al la pli malalta maldekstro.

Dividante iuj de la reguloj

Konceptoj limo, bildo kaj fono povas esti uzata kune. Tio estas normala, kaj menciis reguloj ne malhelpas unu la alian, formante la entuta konsisto. La ĉefa afero - por klarigi la fakton, ke la nomo de ĉiu el ili reprezentas, kaj kiel ĝi estas aplikata.

Antaŭ efektivigi tiun aŭ tiu elemento, estas grave fari iujn eksperimentojn kaj testo laboro sur multnombraj retumiloj. Orientiĝo al la konsiloj, rekomendoj, ekzemploj de triaj aŭ CSS sintakso, rondigita anguloj, kaj tiel plu. N. Ĉu malofte pli bona ol sia propra dolĉa praktiko.

Gravas kompreni, ke la limo, bildo, laŭ dezajno anguloj - la sama tipo de koncepto. Desegno eblas prezentita ne en png-formato. Li ekstermiĝos per la retumilo, laŭ la reguloj establitaj en la CSS. Rondigita angulojn - zorganta ellaboranto, sendepende de squareness de la fonto materialo.

Trajtoj HTML, CSS de retumiloj

Bonvenon Stilo registradon pogranda - por ĉiuj retumiloj tuj. Ĉiuokaze klasikaj ekzemploj pri la temo "la CSS: rondigitaj anguloj" oferton por skribi tiel:

fono: # FF7F00; / * Fono * /

limo: 1px #CCCCCC solida; / * Limo * /

-moz-limo-radiuso: 10px; / * CSS rondigitaj anguloj por Mozilla Firefox * /

-webkit-limo-radiuso: 10px; / * ... por la Safari kaj Chrome * /

-khtml-limo-radiuso: 10px; / * ... Konquerer * /

limo-radiuso: 10px; / * La CSS rondigitaj anguloj por ĉiuj * / kaj tiel plu. N.

Tamen, plej ofte sufiĉas specifi la lasta regulo. Redundo estu uzata nur kiam ekzistas reala bezono.

Klasika kaj mirinda tablo

Malgraŭ multnombraj polemikoj subtenantoj tablo aranĝo (tr, td) kaj la eblon de uzi div etikedoj kaj interspaco ( «mirinda" aranĝo), objektiva praktiko favoris opcion akcepteble necesa.

En divs havas iun dignon en la aliaj tabloj. Se ili ne kompletigas unu la alian, kaj ĝuste konkurencas, la demando estus rapide forvaporiĝis en unu versio kiu kombinas la plej bonan aspektoj de tabloj kaj divs.

La plej multaj el la lokoj kreitaj uzante la CMS (enhavo mastrumado sistemo), kaj en la dispono de la ellaboranto venas ne nur vasta gamo de "gigantaj" datumaroj de centoj da dosierujoj, objektoj, sed ankaŭ tabloj.

Etikedo [div | span], kiel tia, ne elstaras, sed la sola afero, kiu venas ĝuste ĉe la kompletan kompato de la ellaboranto - a CSS stilfolio. Kaj iu CMS klare apartigas la kodo, parto de ĝi de la ellaboranto de kreivo kaj siajn proprajn stilojn de aldonitaj stilo, kaj en la kazo de ŝanĝoj (ekz, css - rondigas la angulojn de la tablo), vi povas ĉiam redoni la agordojn kaj defaŭlta stiloj.

Kurboj kaj anguloj ne estas kovrita de la sintakso

Vi povas strikte obei ĉiujn regulojn de HTML, CSS, sed havi rezulton, ili ne estas provizita. Superponiendo elementoj unu al la alia, ĝi eblas akiri ajnan regionon de ajna agordo. Uzante PHP-evoluo sur la servilo, vi povas sendi al la vizitinto retumilo kaj ajna stilo dosierojn ligi al ili la taŭgajn JavaScript kodo en la korpo de HTML-dosiero aŭ aparta js-dosiero.

Ajna cirkviton varianto, iu formo de proprieto elemento estas CSS reguloj! Rondigita angulojn - nur aparta, kaj realaj ŝancoj estas multe pli larĝa. En ĉi tiu kazo, programado viaj objektoj, vi ne atentu la karakterizaĵojn de individuaj retumiloj, uzu nur la etikedoj kaj strukturo de hipertekstaj lingvoj, kiuj estas perceptitaj de ĉiu, sen escepto retumiloj.

Uzante la ideo de programado orientita al celoj, Vi povas desegni la rigardon de angulo aŭ kurbo estas evidente ne antaŭvidis en cxiuj formoj. En ĉi tiu kazo, ne estas necese, ke ĉi tiu estos la angulo de la areo, kiu estis origine rektangulan formon. Gravas ke la komponantoj de la kurbo priskribita en la formo de CSS reguloj, kombinitaj en ununura vidaj JavaScript objekto kodo kaj je la ĝusta tempo en la ĝusta loko foliumilo, reflektas en la ĝusta formo.

Tiu teknologio ne malhelpas tiajn objektoj realigi en tri-dimensia ebeno aŭ spektaklo kuraĝigo.