Efectes CSS: arrodonint les cantonades dels elements

La sintaxi dels fulls d'estil en cascada es construeix de manera que la possibilitat d'obtenir el disseny més inesperat està disponible fins i tot a una persona lluny de programar i desenvolupar llocs. Potser pel fet que els jocs infantils en cubs romanguessin a la memòria de tots, per utilitzar aquesta experiència multifacètica en HTML, CSS no és difícil.

No obstant això, la programació moderna encara està molt lluny de la representació de les construccions de la realitat real. Fins ara, qualsevol àrea (ocupada per qualsevol element de bloc) en qualsevol dels seus significats i fins formals té una forma rectangular en la qual es forma la corba desitjada del contorn.

Fins ara, qualsevol cercle, radi de curvatura, qualsevol línia recta corbada, etc. es descriuen per equacions matemàtiques complexes o cubs molt petits, trapezoides, triangles o altres elements rectilinis que són visibles per a l'ull com un punt de la línia.

Construccions directes clàssiques

No és cap sorpresa que l'avanç en la programació i la tecnologia de la informació hagi legitimat els dissenys rectangulars. Les idees avançades no van perdre el temps en formularis arrodonits, però no van oblidar proporcionar al desenvolupador característiques suficients en les etiquetes i les regles d'HTML, CSS i llenguatges de programació relacionats.

Qualsevol element utilitzat a la pàgina té una àrea rectangular, i es seleccionen diversos components, de la qual, en cada cas específic, és necessari utilitzar les característiques de marcar contingut específic en construccions sintàctiques disponibles amb els requisits de la compatibilitat entre navegadors.

Regles generals de CSS

Els fulls d'estil en cascada suggereixen descriure els elements de la manera següent:

• Propietat: valor.

La propietat és un nom específic, i el valor pot ser un nom o una enumeració de noms o valors.

Pel que fa als elements de bloc i la necessitat de fer un arrodoniment de cantonades a través de CSS, té sentit utilitzar la propietat border-radius i el seu valor en el format "38px" o "8px 16px 24px 38px".

Si el valor s'estableix en un nombre, s'establirà que serà un per a tots els angles. El registre dels quatre valors es refereix:

• El primer número a l'extrem superior esquerre;
• El segon a la part superior dreta;
• La tercera: a la part inferior dreta;
• Aquest últim a l'esquerra inferior.

Compartir algunes normes

Els conceptes frontera, imatge i fons es poden utilitzar junts. Això és normal, i les regles no interfereixen entre elles, formant una composició general. El més important és explicar què significa exactament cadascun d'ells i com es superposa.

Abans d'implementar aquest o aquell element, és important realitzar diversos experiments i provar l'operació en diversos navegadors. L'orientació als consells, recomanacions, exemples de tercers o sintaxi de CSS, cantonades de arrodoniment, etc., rarament és millor que la vostra pròpia pràctica.

És important entendre que la frontera, la imatge, des del punt de vista del disseny de les cantonades, són els mateixos conceptes. La imatge es pot presentar no en format PNG. El navegador el truncarà, d'acord amb les regles establertes a CSS. Els espais de redondeig són la preocupació del desenvolupador, independentment de la rectangularitat del material d'origen.

Característiques d' HTML, CSS de navegadors

Benvingut a l'entrada de l'estil a granel - per a tots els navegadors de seguida. En qualsevol cas, els exemples clàssics sobre el tema "CSS: corning rounding" suggereixen escriure així:

Antecedents: # FF7F00; / * Antecedents * /

Frontera: 1px #CCCCCC sòlid; / * Marc * /

-moz-border-radius: 10px; / * Cantonades de redondeig de CSS per a Mozilla Firefox * /

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

-khtml-border-radius: 10px; / * ... Konquerer * /

Radio de la vora: 10 px; / * CSS redondejant cantonades per a tots * / etc.

Tanmateix, en la majoria dels casos, és suficient indicar l'última regla. La redundància només s'ha d'utilitzar quan hi hagi una necessitat real.

Taules clàssiques i meravelloses

Malgrat les nombroses disputes dels partidaris del disseny tabular (tr, td) i l'ús de les etiquetes div i span (disseny "meravellós"), la pràctica objectiva prefereix l'opció de necessitat raonable.

Les divas tenen algunes virtuts, altres tenen taules. Si no es complementessin, però simplement competien, la qüestió desapareixeria ràpidament en una variant, combinant els millors costats de les taules i les dives.

La majoria de llocs es creen utilitzant CMS (sistemes de gestió del lloc) i a disposició del desenvolupador no només apareixen una àmplia gamma de matrius de dades "gegants", centenars de carpetes, objectes, sinó també taules.

Les etiquetes [div | span], com a tals, no es distribueixen, però l'únic que exactament arriba a la compra completa del desenvolupador és els estils CSS. I qualsevol CMS separa clarament el codi inclòs en la creativitat del desenvolupador i els seus propis estils dels estils afegits, i pel que fa als canvis (per exemple, a css - arrodonint les cantonades de la taula), sempre podeu restaurar la configuració i els estils predeterminats.

Corbes i angles no proporcionats per la sintaxi

Podeu seguir estrictament totes les regles d'HTML, CSS, però tenir el resultat, no es proporcionen. En superposar els elements un sobre l'altre, podeu obtenir qualsevol àrea de qualsevol configuració. Mitjançant la programació de PHP al servidor, podeu enviar qualsevol fitxer d'estil al navegador del visitant i adjuntar-hi el codi JavaScript corresponent en el cos del fitxer HTML o un js-file separat.

Qualsevol versió del contorn, qualsevol forma del vostre propi element fora de les regles de CSS. Les cantonades de redondeig són només parcials, i les possibilitats reals són molt més àmplies. Al mateix temps, programar els vostres propis objectes, no podeu prestar atenció a les característiques dels navegadors individuals, només utilitzeu aquelles etiquetes i construccions d'idiomes d'hipertext que tots els navegadors percebin sense excepció.

Usant les idees de programació orientada a objectes, podeu dissenyar l'aparença d'un angle o corba, òbviament no proporcionat per cap navegador de formularis. En aquest cas, no és gens necessari que sigui precisament l'angle de la regió, originalment en forma rectangular. És important que els components de la corba que es descriuen en forma de regles CSS es combinin en un únic codi d'objecte JavaScript visual i, en el moment adequat, al lloc correcte del navegador, es reflecteixin en la forma correcta.

Amb aquesta tecnologia, res evita que aquests objectes es realitzin en el pla tridimensional o demostrin l'animació.