Създайте добър сайт днес просто: има достатъчно специалисти, активно се следват активните процеси за подобряване на функционалността и нейното представяне (структура и съдържание). Последното е CSS дизайн - като най-простото, рентабилно и ефективно решение.

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

CSS Transitions

Според настоящото становище CSS Transitions в псевдокласата: hover и back. Има стил на етикет, например TagStyle, и има TagStyle: стил hover. Задачата на псевдокласата е да постави съдържанието на всички правила от второто описание в първата, веднага щом мишката мине над нея, и веднага щом се върне, обърнете всичко обратно. В тази схема (в класическата версия) цветът на фона, цвета на текста, рамката, закръглението, вдлъбнатините и други видими елементи обикновено се променят. Използването на правилото CSS Transitions ви дава възможност плавно и гладко.

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

Съдържанието на правилото за преход

Задачата на правилото: да прехвърля плавно други правила от едно състояние в друго, така че CSS Transition s включва (transition = '*'):

името на имота, към което тя засяга (*) собственост);

продължителност на процеса (* - продължителност);

преходна функция (* - времева функция);

забавяне на началото на процеса (* -закъснение).

При CSS каноните може да се допусне кратко правило за въвеждане на правило:

преход: всичките 1 s лесно .5 s;

Преходът се отнася за всички правила, изпълнени за една секунда в стил „лекота“ със закъснение от половин секунда. Все пак, написани от елементите на правилото:

* - собственост: всички;

* - продължителност: 1s;

* - функция за регулиране на времето: лекота;

* -закъснение: .5s;

Правилото за преход се поддържа от основните браузъри, но никога не се намесва в това и има кръстосан браузър на писмени правила.

Класическо приложение

Най-лесният и често използван е преходът на цвета на фона (символ): CSS Transition: background: В този пример само правилото за фоновия цвят ще приложи правилото за преход (продължителност 2 секунди, изключване на функцията, забавяне 0.2 секунди) и други правила ще се преместят в друго състояние незабавно.

Преходна функция (стил)

Важен компонент на CSS правилата е преходната функция, т.е. кривата на времето за извършване на преход от едно състояние към друго. Гладкото (easy) е стойността по подразбиране: преходът започва бавно, ускорява се и се забавя в края. Стойността "линейна" дефинира еднороден преход: "easy-in" - бавно започва прехода, след това плавно се ускорява докрай и "улеснява" - работи обратното. Функцията cubic-bezier (x1 y1 x2 y2) ви позволява да създадете своя собствена опция за преход, но използването на официални ресурси и сайтове, които имат добър опит с кривата на Безие, все още са по-добри. Нещо ново определено няма да излезе, а опитът на приятна око и възможности за психология на посетителянатрупаните все още са значителни.

Комбинация от преход с трансформация

Добър ефект се дава от комбинация от правила CSS Transition & amp; Transform. Първият определя времето на процеса, второто показва, че трябва да се прави през цялото това време. Конвертиране ви позволява да премествате етикети, да завъртате, преоразмерявате, променяте позицията. Нека разгледаме комбинацията:

преобразуване: завъртане (180 градуса);

преход: всички 2 сек.

След две секунди тя ще превърне съдържанието на маркера на 180 градуса. Експериментирайки с функциите на translate, scale, rotate, skew и техните вариации, можете да постигнете интересни ефекти и да дадете на вашата работа уникална оригиналност. CSS3 също ви позволява да извършите 3d трансформация, т.е. да преместите етикет в координатите xyz, което във връзка с CSS Transitions ви позволява да завъртите текста и фигурата, както е необходимо за постигане на целта.

Съвместимост с преходното правило

Ако се използват CSS преходи за фон, граница, цвят и други очевидно визуални правила, то е нормално, естествено и удобно, а в някои случаи например се опитват да комбинират CSS Transition & amp; Покажете, можете просто да прекарате време и да не постигнете желаното. Като цяло, когато се планира използването на визуални ефекти, се препоръчва да се разпредели "видим от универсалния". Направете добра ротация на формата на текста или за определено време - действие, което е малко по отношение на това, което дава характеристика на дисплея, видимост, z-индекс. Обаче, ако последните две са ясно определени в списъка на правилата, за които се отнася CSS Transition, тогава първото не се споменава, въпреки че неговото използване носи нещо, което е забележимо, но слабо управлявано.


Правилото за преход не е само: hover и обратно, то може успешно да бъде приложено към други псевдокласове, например: focus или: active. Като цяло, Transition и Transform са тези CSS функции, които нямат пряка връзка с логиката на нещата (все пак става дума за стилове, а не за алгоритми). Но през последните няколко години акцентът се промени, така че да не се използва богатият арсенал от CSS и CSS3 е просто неприемлив лукс.

За ненормално и естествено

В зората на персонални компютри, когато е бил издаден математически процесор за математически изчисления, е необичайно да има 386-ти компютър без математически копроцесор, когато става дума за ефективното използване на програмата Fortran за изчисляване на следата на Луната Естествено днес никой не идва начело, купувайки компютър, питайки дали има хардуерно реализирани средства за математически изчисления.