15 полезни CSS трикове, които може да сте пропуснали

Ако за известно време сте били уеб разработчици, има голяма вероятност, че сте имали момент, когато се опитвате да разберете как да кодирате нещо и реализирате след малко от Google, “има CSS за това”. Ако не бяхте, добре сте на път.

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

1. Нумерационни заглавия и подпозиции

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

2. Подправете обикновени подчертавания

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

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

   Можете да използвате тези стилове за подчертаване, преливане, дори да накарате текст да мига и др. От април 2015 г. само Firefox поддържа това свойство, но можете да го активирате “експериментални функции на уеб платформата” да я използвате в Chrome.

3. Цитиране на цитата

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

   Най- tag също се грижи за цитирането на вътрешните кавички с единични кавички. И така, къде е “за това има „CSS“” момент в това?

   Да речем, че не искате двойните кавички по подразбиране или имате повече от едно ниво на вложени кавички, можете да дефинирате предпочитанията си за цитат за елемент на цитат с CSS, като използвате CSS2 кавички Имот.

4. Управление на непокорните таблици

   Може да сте попаднали на голяма маса с различен размер на съдържанието на клетка, която отказва да остане в рамките на посочената от вас ширина, без значение какво ще опитате. Укроти таблицата с маса оформление свойство (за еднаква височина на колона следвайте тази връзка).

   За да бъдем конкретни, корекцията е в оформление на масата: фиксирано; стойност. Когато присвоите фиксирано оформление за таблицата, таблицата и ширината на клетката се определят от ширината на таблицата или от първия ред клетки (които могат да бъдат дефинирани от потребителя), а не от съдържанието. Това се поддържа от всички браузъри.

5. Направи го лепкаво

   Залепващите елементи са елементи на страница, която няма да се превърта от изглед. С други думи, той се придържа към видима област (прозорец или прозорец за превъртане). Можете да създадете това с помощта на CSS позиция: лепкава;.

   Те действат като относително позиционирани елементи преди всяко превъртане и по-късно като фиксирани елементи след достигане на прага за превъртане. За сега, само Firefox го подкрепя.

6. Вземете текста си във форма

   Искате ли текстът на страницата ви да се извива добре над изображение, което сте показали до него? Можете да опитате CSS фигури. За да реализираме CSS форми, можем да използваме три свойства оформяне-навън, формата марж и формата на изображения праг. От април 2015 CSS Shapes се поддържа от уеб браузъри.

7. Задължителни полета

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

8. Придирчив с цветове

   Ако не ви харесва определен цвят, като синьо, можем да оцветите избраната област с друг цвят и :: селекция псевдо елемент е CSS за това. Това се поддържа от всички модерни браузъри.

9. Проверих ли го?

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

   Има CSS за това, което използва връзката между непосредствените братя и сестри, два елемента един до друг. CSS има съседен селективен селектор, обозначен с плюс + знак и можем да го използваме, за да насочим етикета до квадратчето за отметка. Но какво да кажем за първоначално насочване на отметнато квадратче? Има : проверява псевдо клас за това.

10. Подобно на Storybook

    Тогава, няма ли да е хубаво, ако първата “О” в “Имало едно време” изглежда доста? Можем да го направим да изглежда доста, все пак има CSS за това. Ето къде ::първа буква псевдоелементът идва на помощ. Насочва се към първата буква на първия ред на целевия елемент. Прочетете повече за това тук.

11. Бихте ли искали да знаете повече?

    Елементът може да има клас X или Y или някаква друга стойност за даден атрибут. Ако някога трябва да покажем такава стойност на атрибут на елемент близо до него, можем да използваме съдържание: ATTR (X). Той извлича стойността на атрибут X на елемента, след което можем да го покажем до елемента.

12. Малко повече за левицата

    Центрирането на елементи за CSS начинаещи е доста подвиг. Различните елементи изискват различен набор от CSS свойства, за да ги центрират. Ще разгледаме един пример от многото, който е достъпен в световната мрежа, така че можете да си спомните отново, че има CSS за центриране на нещата..

13. Разкриване на файловия формат на връзките

    Някога виждали ли сте малко изображение в близост до връзка, показваща какво представлява връзката? PDF? или DOC? Да, има CSS, за да постигнем това. Най- съдържание: URL () е това, което ще използваме за показване на изображението зад връзките.

14. Ефект на тригерния паралакс

    Ефектът на паралакса е ефект, използван за описване на привидно бавното движение на фона спрямо предния план. Този ефект е популярен в уебсайтове, които прилагат паралакс. Има различни начини за нейното прилагане, примерът по-долу работи във Firefox с фон-прикачен файл: фиксиран;.

15. Силата на CSS анимациите

    Вероятно не е огромна “има CSS за това” момент, защото всички вие вероятно сте наясно с CSS анимациите досега. Но малко напомняне не е вредно. Има много приложения за CSS анимации, но ето един за обикновен оцветяване.

Сега прочетете: 50 полезни CSS фрагмента, които всеки дизайнер трябва да има