11 CSS тайни, които трябва да знаете през 2020 г.

CSS трикове
04.30 Кредит за изображение: Ага Наплоча

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

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



Искате ли повече вдъхновение за CSS? Вижте този избор на върха CSS анимация примери, както и повече CSS трикове . Ако започвате от нулата да създавате сайт, опитайте нашия списък с брилянтни строители на уебсайтове и, за да съхранявате активи, вземете правото съхранение в облака за теб.



как да рисувам коса с акрил

Какво ще ви трябва:

  • Вашият любим уеб браузър и инструменти за разработчици - препоръчвам да използвате Firefox или Google Chrome, тъй като те поддържат всички функции, които използвам в този урок.
  • Редактор на код.
  • Активи като изображения и шрифтове (можете да ги изтеглите от моето хранилище .

Типографска посока

Има няколко CSS свойства, които ни помагат да подобрим начина на представяне на текста в мрежата.

01. Текст-инсулт

Познати сме с щрих на текста (контур) от Adobe Illustrator или приложения за векторно рисуване. Можем да приложим същия ефект с помощта на шрифт на текст Имот.



Добре е да знаете, че можете да анимирате шрифт на текст с CSS, но само цвета на щриха - ширината на штриха не е.

footer h3 { /*more styles in style.css*/ /*...*/ -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #000; }

02. :: първо писмо

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

p.intro:first-letter { font-size: 100px; display: block; float: left; line-height: .5; margin: 15px 15px 10px 0 ; }

03. Градиентен текст

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



h2.contact-heading { -webkit-text-fill-color: transparent; -webkit-background-clip: text; background: radial-gradient(#ffbc00, #ff65aa); }

Контрол на съдържанието

Благодарение на следните свойства можем да се наслаждаваме на по-голям контрол върху това как ще се държат текстът или изображенията в зависимост от размера и пропорцията на контейнера им.

04. Линия-скоба

The линия-скоба свойството съкращава текста на определен брой редове. Трябват ни три свойства, за да работи.

The дисплей собствеността трябва да бъде настроена на -webkit-box или -webkit-inline-box , -webkit-box-orient задайте вертикално, а препълването - скрито, в противен случай съдържанието няма да бъде изрязано.

p.shortened { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

04. Брой колони

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

.outro { column-count: 2; }

05. Символна единица

Можем да ограничим ширината или височината на текста в зависимост от символната единица. Като Изтъква Ерик Майер , гл unit представлява ширината на символа „0“ (нула) в текущия шрифт, който е особено полезен в комбинация с монопространствени шрифтове. Той се променя, когато се променя семейството на шрифтовете. Можем да се отнасяме с него като с x-височина но гл се основава на ширината на символа 0 вместо x.

xp-pen artist 15,6 "таблет за рисуване.
h2.contact-heading { /*more properties in the CSS file* … max-width: 8ch; }

06. Таг за прекъсване на думи

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

+0043234-343234-234

07. Обект на годни

Ако се чудите дали можем да контролираме поведението на изображението в зависимост от размера на контейнера, препоръчвам ви да разгледате обект-годен Имот. Това определя как съдържанието на или трябва да бъде преоразмерен, за да побере контейнера си. Имаме четири възможности: запълване , съдържат , Покрийте и намаляване на мащаба . Например с Покрийте стойност, заместеното съдържание се оразмерява, за да запази пропорцията си, като същевременно запълва цялото поле за съдържание на елемента.

.object-fit { object-fit: cover; height: 400px; width: 100%; }

Декоративни и креативни елементи

CSS трикове: съдържание

Докато библиотеките за визуализация на данни като d3.js предлагат изчерпателна функционалност на диаграми, за прости кръгови диаграми защо не опитате CSS?04.30 Кредит за изображение: Ага Наплоча

Нека да преминем към добавянето на някои нови елементи и цветове към нашия уебсайт.

08. Коничен градиент

Ако някога сте се чудили дали можете да създадете кръгова диаграма само с помощта на CSS, добрата новина е, че всъщност можете! И решението за това ни отвежда до коничен градиент функция. Създава изображение, състоящо се от градиент с зададени цветови преходи, завъртяни около централна точка (вместо да излъчва от централната точка, както бихте намерили с радиално-градиент ).

.piechart { background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d 56% 100%); border-radius: 50%; width: 300px; height: 300px; }

09. Броячи

За да стилизираме числата в номериран списък, трябва да играем със свойства, наречени CSS броячи. CSS броячите ви позволяват да коригирате външния вид на съдържанието въз основа на местоположението му в документ.

CSS трикове: данни

как да настроите размера на платното в
CSS броячите ви позволяват да коригирате външния вид на съдържанието въз основа на местоположението му в документ, предлагайки удобен хак за стилизиране на номерирани списъци04.30 Кредит за изображение: Ага Наплоча

За да използвате CSS броячи:

  • Стойността на броячите може да бъде увеличена или намалена с контра-увеличение
  • Можем да покажем стойността на брояча, като използваме брояч () или броячи () функция от свойство съдържание
ol.numbered-list > li:before { content: counter(li); position: absolute; box-sizing: border-box; width: 45px; height: 45px; background: #f3b70f; border-radius: 50%; } ol.numbered-list li { position: relative; left: 0px; list-style: none; counter-increment: li; }

10. Променете цвета за избор на текст

За да промените цвета за избор на текст, :: избор е псевдоелемент, който заменя на ниво браузър, за да замени цвета на подчертаване на текста с цвят, който сте избрали. Цветът може да се види, след като изберете съдържанието с курсора.

::selection { background-color: #f3b70f; }

11. @support

Винаги, когато искате да използвате CSS свойство, което не се поддържа от всички браузъри, има заявка за функция, наречена @поддържа правило. Това ви позволява да проверите поддръжката на браузъра за двойки CSS свойство: стойност. Кодът, включен в @поддържа блок ще бъде изобразен само ако тези условия са верни.

Ако браузърът не разбира @поддържа , той също не генерира дадена част от кода.

@supports (text-stroke: 4px navy;) { .example { text-stroke: 4px navy; } }

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

Ако искате допълнително вдъхновение, Джен Симънс и Mozilla стартираха Разпределение Земя , канал в YouTube, пълен с видеоклипове за уеб дизайн и разработка, включително инструменти и техники, какво е новото и най-добрите практики. Освен това можете също да разберете как да тествате цветовия контраст и да симулирате далтонизъм с помощта Firefox DevTools . И докато обмисляте сложността на вашия уебсайт, уверете се, че сте уеб хостинг услугата отразява вашите амбиции.

как да изключите инструмента за решетка в перспектива в илюстратор -

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

Прочетете още: