CSS ефекти: закръгляване на ъглите на елементите

Синтаксисът на каскадните стилови листове е толкова прост, че възможността за получаване на най-неочаквания дизайн е достъпна дори за човек, далеч от програмирането и разработването на сайтове. Може би от факта, че детските игри в кубчета остават в паметта на всички, да използваме този многостранен опит в HTML, CSS не е трудно.

Съвременното програмиране обаче е много далеч от представянето на конструкциите на реалната действителност. До сега, всяка област (заети, което ви харесва блок елемент) в някой от неговия смисъл и официалното назначаване на правоъгълна форма, която се формира в рамките на желаната крива контур линията.

До сега, всеки кръг, радиусът на закръгление, как извита права и така нататък. П. Описва сложни математически уравнения или много малки кубчета, трапецовидна триъгълници или други праволинейни елементи, които са различими за окото като точка на линията.

Класически преки конструкции

Не е изненада, че напредъкът в програмирането и информационните технологии е легитимирал правоъгълни проекти. Новите идеи не губят време на закръглени формуляри, но не забравят да предоставят на разработчика достатъчно функции в етикетите и правилата на HTML, CSS и свързаните езици за програмиране.

Всеки елемент, използван в страницата е правоъгълна област, в която е разпределена на няколко части, от които във всеки отделен случай трябва да се използват само за това, е необходимо krossbrauzernosti изисквания за маркиране и специфичните функции за съдържание на разположение синтактични конструкции.

Общи правила за CSS

Каскадните стилови листове предлагат описание на елементите, както следва:

• собственост: стойност.

В този случай собствеността е конкретно име и стойността може да бъде или име или изброяване на имена или стойности.

По отношение на блокови елементи и необходимостта да се направи чрез CSS заоблени ъгли, че има смисъл да се използва граничен радиус имота и неговата стойност в формат "38px" или "8 пкс 16px 24px 38px".

Ако стойността е зададена на една цифра, тя ще бъде определена като една за всички ъгли. Записът на четирите стойности е свързан с:

• първото число е в горния ляв ъгъл;
• втората надясно;
• третата надясно долната;
• втората вляво.

Споделяне на някои правила

Понятията граница, изображение и фон могат да се използват заедно. Това е нормално и правилата не си взаимодействат, образуват общ състав. Основното нещо е да дадете сметка за това, какво точно означава всеки от тях и как той е насложен.

Преди да внедрите този или този елемент, е важно да проведете няколко експеримента и да тествате работата на няколко браузъра. Ориентацията към съвети, препоръки, примери от трети страни или синтаксис на CSS, закръгляване на ъглите и т.н. рядко е по-добра от вашата нова практика.

Важно е да се разбере, че границата, изображението, от гледна точка на дизайна на ъгъла, са едни и същи концепции. Снимката може да бъде представена не във формат png. Тя ще бъде съкратена от браузъра, съгласно правилата, зададени в CSS. Заоблянето на ъглите е загриженост на разработчика, независимо от правоъгълността на изходния материал.

Удобства HTML, CSS от браузърите

Добре дошли в стил за запис в насипно състояние - за всички браузъри веднага. Във всеки случай, класическите примери на тема "CSS: закръгляване на ъглите" предполагат писане по следния начин:

фон: # FF7F00- / * фон * /

граница: 1px # CCCCCC твърдо / * рамка * /

-моз-граница-радиус: 10px; / * CSS закръглени ъгли за Mozilla Firefox * /

-webkit-border-радиус: 10px; / * ... за Chrome и Safari * /

-khtml-border-радиус: 10px; / * ... Konquerer * /

радиус на границата: 10px; / * CSS закръглени ъгли за всички * / и т.н.

В повечето случаи обаче е достатъчно да се посочи последното правило. Съкращението трябва да се използва само когато има реална нужда от него.

Класически и чудесни маси

Въпреки многобройните противоречия поддръжници маса оформление (TR, TD) и възможност за използване на Разделение тагове и педя ( «прекрасен" оформление), обективен предпочитан вариант практика разумно необходимо.

Divas имат някои добродетели, други имат маси. Ако те не се допълват, а просто се състезават, въпросът бързо ще изчезне в една версия, съчетаваща най-добрите страни на масите и divas.

Повечето от сайтовете, създадени с помощта на CMS (система за управление на съдържанието), и по разположение на разработчика идва не само широка гама от "гигантски" масиви от данни на стотици папки, обекти, но и таблици.

Tag [Разделение | педя], като такива, не се открояват, но единственото нещо, което идва точно в пълен милостта на разработчика - на CSS стилове. И всяка CMS ясно разделя кода, част от нея от творчеството на разработчика и собствените си стилове на добавената стил, както и в случай на промени (например, CSS - на ъглите на таблицата), винаги можете да възстановите настройките и стилове по подразбиране.

Криви и ъгли, които не са предоставени от синтаксиса

Можете стриктно да спазвате всички правила на HTML, CSS, но имате резултат, те не са предоставени. Чрез наслагване на елементи един върху друг, можете да получите всякакви области на всяка конфигурация. Използвайки PHP програмирането на сървъра, можете да изпращате всякакви стилови файлове в браузъра на посетителя и да прикачите подходящ jаvascript код към тях в тялото на HTML файла или отделен js-файл.

Всяка версия на очертанието, всяка форма на вашия собствен елемент извън правилата на CSS! Закръгването на ъглите е само частично и реалните възможности са много по-широки. В този случай, програмиране на собствени обекти, можете да не обръщат внимание на характеристиките на отделните браузъри, използвайте само етикети и структурата на хипертекст езици, които се възприемат от всички, без изключение браузъри.

Използвайки идеята за обектно-ориентирано програмиране, можете да проектирате външния вид на ъгъл или крива, очевидно не се предлагат от браузърите. В този случай, не е необходимо, че това ще бъде най-ъгъл на областта, който първоначално е бил с правоъгълна форма. Важно е, че компонентите на кривата, описана под формата на правила CSS, обединени в едно и също зрително jаvascript обектен код и в точното време на точното място браузъра, се отразява в правилната форма.

С тази технология нищо не възпрепятства подобни обекти да се реализират в триизмерната равнина или да демонстрират анимацията.