Много хора смятат, че само Препроцесорът и съставен, че логиката и изчисления, но изчислено () функция е в състояние да направи това, което не може да не предпроцесорни в света: да се смесват всички единици. Препроцесори може да се смесват само единици с фиксирани тип връзки ъглови мерни единици, време, честота, разделителна способност на уреда, както и някои единици за дължина.
1Включете винаги е 360deg, 100grad - 90deg и 3.14rad е 180deg. 1s е равен на 1000ms, 1kHz е 1000Hz. 1in е 2,54 см или 25,4 mm или 96px и 1dppx винаги е 96dpi. Това е така, защото на такива точни връзки Препроцесори и могат да участват в изчисленията за преобразуване на една единица в друга и да ги смесвате заедно. Въпреки предпроцесорни не може да се изчисли колко 1em или 1% или 1vmin или 1 Летописи бъде в пиксели, защото няма смисъл. Разполагате с няколко основни примера:
В някои случаи, изчислено () функция може да се наложи променливи. Тя може да се прилага в почти всяка предпроцесорни. Първият пример - Sass променлива работи с всеки друг роден функция на CSS:
Практически курс по адаптивно оформление Кацане от нулата!
Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни
Можете да използвате и местни CSS променливи, но те все още са само работа в Firefox 31+. Други браузъри не поддържат CSS променливи.
За да функционира изчислено () работи както трябва, трябва да се помни няколко неща. Първо - не може да се раздели на нула, очевидно. Calc между думи и скоби не трябва да е пропуски. Операторите като + или -, разделени с интервали от двете страни. Кодът по-долу не е наред:
Calc () работи като ценност в тези места, където е възможно да се замени със стойност, няма значение с единиците, или не. Подкрепа от тази функция е прекрасно, но все още можете да се изправи пред редица проблеми. Всичко зависи от това къде ние прилагаме тази функция. Помислете за няколко примера, сред които са също от значение, както и най-доброто решение на тези задачи.
Един прост начин да се разбере, изчислените стойности
Да кажем, че ние искаме да направим градиента в цветовете на дъгата. В CSS, не е трудно:
Но HEX стойности не са ясни. С HSL () и изчислено () по-горе код може да бъде пренаписана, като:
За съжаление метода на изч () в единия от HSL () функции, RGB (), hsla () или RGBA (), докато тя не работи в Firefox и Internet Explorer. Този метод работи само в WebKit браузъри. На практика, това е най-добре да го даде на всички да изчисляване на Препроцесорът. И най-готините, че в Препроцесорът да създадете списък директно в цикъла:
Ефективните фонови градиенти за гъвкави елементи
Например, ние искаме да направим на заден план, по-горе и по-долу, които ще насочи фиксирана 1em размер. Проблемът е, че ние не знаем точната височина на елемента. В този случай могат да се използват две градиент:
С изчислено () функция горе запис може да бъде направено с използване на градиент:
Този запис ще работи във всички браузъри подкрепа изчислено () и наклони. И тъй като там се използват смесени единици, Препроцесорът не могат да се справят, че. Вие все още може да се подобри леко кода по-горе, да добавите променлива:
Забележка: една от бандите, по неизвестни причини, може да е малко по-различно и са леко замъглено в Chrome и Opera.
Диагонални ивици с градиент
Например, ние трябва да се създаде широка диагонална линия. Това може да стане чрез интерес.
В този случай, на честотната лента ще зависи от размера на елемент. Понякога това е точно това, което ви трябва. Така например, примера по-горе е страхотно, ако е необходимо да се направи флаг. Добавете малко зелено, жълто и синьо, и това е нашето знаме. Любителите на шоколад признават този флаг Танзания флаг.
Но какво, ако трябва да се установи фиксирана честотна лента, така че не се променя в зависимост от големината на обекта? В изчислено () функция е необходимо да се определи стойността на 50% минус половината от фиксирана лента и 50% плюс половината широчина на честотната лента. Ако се нуждаем от групата ширина 4EM на:
В примера по-горе може да бъде тествана в браузър. Поиграйте си с размера на прозореца на браузъра. Размерите на правоъгълника, определени в Vmin, така че размерът на обекта се променя, когато размера на прозореца на браузъра. Но диагонал групата винаги е фиксирана ширина.
Класиране деца елементи на известните размери в центъра на елемента родител
Вероятно знаете за този трик с абсолютно позициониране в центъра на дете елемент на родителя:
С Calc на функцията (), можете да се отървете от маржа:
Направете кода по-гъвкави, да добавите променлива ширина и височина:
Имайте предвид, че в началото и ляво може да се използва за позициониране елемент. Все пак, ако имате нужда, за да анимирате обект, използвайте преобразуването. Тъй като се случва по време на трансформацията изменение на състава на обекта, чрез изместване на даден обект, той отново се прехвърли върху страницата - по този начин намаляване на производителността.
Координатна система и се зацепва с произхода на координатите на центъра
Когато научава за четирицифрения стойността на фон-позиция, вече загуби интерес позиция елемент спрямо или надясно или долната страна на родителя чрез изчислено (функция). Но с помощта на тази функция, се оказа, че може да се идеално разположен в центъра на обекта с определена точка за фон.
А преди няколко години, че е необходимо да се създаде фоново изображение, което е координатна система. Задачата е да се направи за произхода на фоновото изображение, за да бъде винаги в центъра.
Начертайте координатна система с решетка беше лесно:
Практически курс по адаптивно оформление Кацане от нулата!
Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни
Но как да се направи тапет се придържат твърдо към центъра на елемента, а не към горния ляв ъгъл? фон-позиция: 50% 50 не работи, тъй като точка 50% до 50% градиент съвпада с точката на 50% 50% член, но линии са разположени горе и в ляво на градиента, съответно. За да се реши този проблем, можете да използвате КАЛК (). Трябва да поставите наклона, така че неговата горния ляв ъгъл е точно в центъра на фигурата. След това преместете градиент и лявата половина ширина и височина оси, съответно:
И отново, променливите направят кода по-гъвкав. Вижте пример за система на координати + решетка # 2 от Ana Tudor (@thebabydino) с CodePen сайт.
Поддържане на пропорцията и видима
Когато създавате HTML плъзгачи Винаги съм искал да всеки слайд е контейнер с фиксирано съотношение аспект, така че пързалката винаги се поставя на видно площ на прозореца на браузъра, и винаги е бил в средата.
Например, ние се нуждаем са със съотношение 4: 3, а ние го разгледаме на големия екран. Това означава, че височината на всичко ще бъде наред, но ширината ние ще бъдем по-малко пространство в ляво и в дясно.
С съотношение по-малко от 4: 3, ние появи разрешения по-горе и по-долу, и в целия блок е поставен.
Блок заема цялата ширина на видимата област на браузъра, т.е. ширина: 100vw. Ширина и със съотношение, може да се изчисли височината на височината, тя ще бъде равна на 3/4 * 100vw. И накрая, в началото на границата ще бъде равна на половината от височината на прозореца на браузъра минус височина половин единица 100vh / 2 - 3/4 * 100vw / 2.
Можете също така да се опрости кода от променлива височина и ширина. По-долу е пример за Sass, които могат да бъдат тествани. промяна на размера на прозореца на браузъра:
Дори по-добре, кода по-горе може да се превърне техни подобни, много по-добре, отколкото глобалните променливи:
Имайте предвид, за правилната работа на исканията за медиите, $ а и $ б трябва да е цяло число. Методът се поддържа във всички модерни браузъри. Независимо от това, доскоро WebKit браузъри не поддържат използването на VW единици Calc на () функция. Подкрепа дойде в Safari 8, Chrome 34, най-новата опера.
Най-краткото заглавие на слайда в средата
Аз не искам да се използва абсолютно позициониране и реши да работи с линия височина собственост. Slide рамка заема цялата височина на прозореца на браузъра, така че трябваше да се създаде линия височина стойността на имота 100vh минус два пъти стойността на граничен ширина:
Ако рамката за слайд заема 100% от ширината на прозореца на браузъра (и е вертикално в средата), височината му е равна на $ б / $ на * 100vw. Стойност на линия височина ще бъде равна на $ б / $ 100vw минус * два пъти стойността на граничния ширина слайд:
Това беше моята идея, на теория, тя работи перфектно. Освен това, тя работи в WebKit браузъри и IE. Но Firefox изчислено () функция не се изчисли стойността на имота линия височина (и някои други); В този случай, изчислено () не е най-добрият вариант. Има много други начини за решаване на този проблем (flexbox, абсолютно позициониране и т.н.).
Перспективен имот, на снимачната площадка на сцената, го прави така, че ако обектът се намира по-близо до зрителя, той е по-голям и обратно. Имоти заема стойности на дължина, а стойността е по-малка от по-голям е контрастът между близки и далечни обекти.
Ние имаме една проста форма - куб, например. Cube се намира в центъра на сцената. Цифрата не е много подобен на 3D: тя е симетрична, а ако страните са напълно прозрачни, ние виждаме само предната част на фигурата.
Нека да преминете куб от 30 ° с Y-ос (вертикална ос минава през центъра на обекта), или около една ос X. Това е по-добре, но сега сме видими само две повърхности.
перспектива произход 0% 100 комплекта отправна точка в горния десен ъгъл на сцената, и цифрата е винаги в центъра на сцената. Поради това, когато се променя размера на сцената, промяна на разстоянието от 50% до 50% (куб позиция) до точката 100 0% (точката на наблюдение перспектива произход).
Като начин можете да използвате КАЛК (). За да направите това, вие трябва да добавите или извадите фиксирана стойност от 50%:
Опитайте сами. преоразмеряване на прозореца на браузъра. И това, което за теб? Използвали сте изчислено ()? Ако е така, защо?
Редакция: Екип webformyself.
Практически курс по адаптивно оформление Кацане от нулата!
Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни
Най-IT новини и уеб разработки на нашия канал Телеграма
HTML5 и CSS3 практика от нула до резултата!
Свързани статии