КампутарыПраграмнае забеспячэнне

Эфекты CSS: закругленне кутоў элементаў

Сінтаксіс каскадных табліц стыляў пабудаваны так проста, што магчымасць атрымання самага нечаканага дызайну даступная нават далёкаму ад праграмавання і распрацоўкі сайтаў чалавеку. Магчыма ад таго, што дзіцячыя гульні ў кубікі засталіся ў кожнага ў памяці, выкарыстаць гэты шматгранны вопыт у HTML, CSS не складае працы.

Аднак сучаснае праграмаванне яшчэ вельмі далёка ад прадстаўлення канструкцый рэальнай рэчаіснасці. Да гэтага часу любая вобласць (займаемая якім заўгодна блокавым элементам) у любым яе значэнні і фармальным прызначэнні мае прастакутную форму, у межах якой фарміруецца патрэбная крывая лінія контуру.

Да гэтага часу любая акружнасць, радыус скругленыя, калі-небудзь скрыўленая прамая і т. П. Апісваюцца складанымі матэматычнымі раўнаннямі альбо вельмі дробнымі кубікамі, трапецый, трыкутнікамі ці іншымі прамалінейнымі элементамі, якія для вока адрозныя, як кропка на лініі.

Класічныя прамыя канструкцыі

Няма нічога дзіўнага, што прагрэс у галіне праграмавання і інфармацыйных тэхналогій ўзаконіў прастакутныя канструкцыі. Перадавыя ідэі не сталі марнаваць час на круглявыя формы, але не забыліся прадставіць у распараджэнне распрацоўніка дастаткова магчымасцяў у тэгах і правілах HTML, CSS і сумежных мовах праграмавання.

Любы элемент, які выкарыстоўваецца на старонцы, мае прастакутную вобласць, прычым у ёй вылучаецца некалькі складовых частак, з якіх у кожным канкрэтным выпадку варта выкарыстоўваць толькі неабходнае, з улікам патрабаванняў кроссбраузерности, асаблівасцяў разметкі канкрэтнага зместу ў даступных сінтаксічных канструкцыях.

Агульныя правілы CSS

Каскадныя табліцы стыляў прапаноўваюць апісваць элементы так:

  • ўласцівасць: значэнне.

Пры гэтым ўласцівасць - канкрэтнае імя, а значэнне можа быць як імем, так і пералікам імёнаў ці значэнняў.

Датычна блокавых элементаў і неабходнасці рабіць з дапамогай CSS закругленне кутоў, мае сэнс выкарыстоўваць ўласцівасць border-radius і яго значэння ў фармаце "38px" ці "8px 16px 24px 38px".

Калі ў якасці значэння задаецца адно лік, яно будзе ўстаноўлена такім для усіх кутоў. Запіс ўсіх чатырох значэнняў адносіць:

  • першае чысло - да левага верхняга куце;
  • другое - да правага верхняга;
  • трэцяе - да правага ніжняга;
  • апошняе - да левага ніжняга.

Сумеснае выкарыстанне некаторых правілаў

Паняцці border, image і background могуць быць выкарыстаны сумесна. Гэта нармальна, і названыя правілы не перашкаджаюць адзін аднаму, фарміруючы агульную кампазіцыю. Галоўнае - аддаваць справаздачу ў тым, што менавіта кожнае з іх пазначае, і як на што накладваецца.

Перш чым рэалізоўваць той ці іншы элемент, важна правесці некалькі эксперыментаў і праверыць працу на некалькіх браўзэрах. Арыентацыя на парады, рэкамендацыі, іншыя прыклады або сінтаксіс CSS, закругленне кутоў і т. П. Рэдка бывае лепшай уласнай свежай практыкі.

Важна разумець, што border, image, з пункту гледжання афармлення кутоў, - аднатыпныя паняцці. Малюнак можа быць прадстаўлены не ў png-фармаце. Ён будзе абрэзана браўзэрам, згодна з правіламі усталяваным у CSS. Закругленне кутоў - клопат распрацоўніка па-за залежнасці ад прастакутных зыходнага матэрыялу.

Асаблівасці HTML, CSS ад браўзэраў

Вітаецца запіс стылю оптам - для ўсіх браўзэраў адразу. Ва ўсякім выпадку класічныя прыклады на тэму "CSS: закругленне кутоў" прапаноўваюць пісаць так:

background: # FF7F00; / * Фон * /

border: 1px #CCCCCC solid; / * Рамка * /

-moz-border-radius: 10px; / * CSS закругленне кутоў для Mozilla Firefox * /

-webkit-border-radius: 10px; / * ... для Chrome і Safari * /

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

border-radius: 10px; / * CSS закругленне кутоў для всех * / і т. П.

Аднак у большасці выпадкаў досыць паказаць апошняе правіла. Надмернасць варта выкарыстоўваць, толькі калі ў ёй ёсць рэальная неабходнасць.

Класічныя і дзівосныя табліцы

Нягледзячы на шматлікія спрэчкі прыхільнікаў таблічнай вёрсткі (tr, td) і варыянту выкарыстання тэгаў div і span ( «дзівосная» вёрстка), аб'ектыўная практыка аддае перавагу варыянту разумнай неабходнасці.

У дивов ёсць адны годнасці, у табліц іншыя. Калі б яны адзін аднаго не дапаўнялі, а проста канкуравалі, пытанне хутка б знік у адзін варыянт, які аб'ядноўвае лепшыя бакі табліц і дивов.

Большасць сайтаў ствараецца пры дапамозе CMS (сістэм кіравання сайтамі) і ў распараджэнне распрацоўніка прыходзіць не толькі шырокі асартымент «гіганцкіх» масіваў дадзеных, сотняў тэчак, аб'ектаў, але і табліц.

Тэгі [div | span], як такія, не вылучаюцца, але адзінае, што дакладна паступае на поўны водкуп распрацоўніка, - гэта CSS стылі. Прычым любая CMS выразна падзяляе як код, які ўваходзіць у яе ад творчасці распрацоўніка, так і ўласныя стылі ад дададзеных стыляў, а ў дачыненні да змен (напрыклад, у css - закругленне кутоў табліцы), заўсёды можна аднавіць налады і стылі па змаўчанні.

Крывыя і куты, не прадугледжаныя сінтаксісам

Можна строга выконваць усе правілы HTML, CSS, але мець вынік, імі не прадугледжаны. Накладваючы элементы адзін на аднаго, можна атрымліваць любыя вобласці любой канфігурацыі. Выкарыстоўваючы PHP-праграмаванне на сэрвэры, можна адпраўляць у браўзэр наведвальніка любыя файлы стыляў і прымацоўваць да іх адпаведны JavaScript код у целе HTML-файла або асобнага js-файла.

Любы варыянт контуру, любая форма ўласнай элемента па-за правіламі CSS! Закругленне кутоў - усяго толькі прыватнасць, а рэальныя магчымасці значна шырэй. Пры гэтым праграмуючы ўласныя аб'екты, можна не звяртаць увагі на асаблівасці асобных браўзэраў, выкарыстоўваць толькі тыя тэгі і канструкцыі моў гіпертэксту, якія ўспрымаюцца ўсімі без выключэння браўзэрамі.

Выкарыстоўваючы ідэі аб'ектна-арыентаванага праграмавання, можна спраектаваць знешні выгляд кута або крывой, відавочна ня прадугледжанай ніводным браўзэрам формы. Пры гэтым зусім не абавязкова, што гэта будзе менавіта кут вобласці, першапачаткова прамавугольнай формы. Важна, што кампаненты крывой, апісаныя ў форме правілаў CSS, аб'ядноўваюцца ў адзіны візуальны аб'ект JavaScript кодам і ў патрэбны момант, у патрэбным месцы браўзэра, адлюстроўваюць сябе ў правільнай форме.

Пры такой тэхналогіі нічога не перашкаджае такіх аб'ектах рэалізоўваць сябе ў трохмернай плоскасці альбо дэманстраваць анімацыю.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 be.unansea.com. Theme powered by WordPress.