15 Корисни ЦСС трикови које сте можда превидели

Ако сте неко време били фронтенд веб девелопер, постоји велика вероватноћа да сте имали тренутак када сте покушали да откријете како да шифрирате нешто и схватите након мало гооглинга, “постоји ЦСС за то”. Да нисте, добро сте.

Овај пост је колекција таквих ЦСС кодова, који вам могу дати функције као што је окретање елемента љепљив, дати вам црткане линије подвлачење могућности, ток текста ваше странице у посебном облику, или постићи ефект паралаксе. Неки од њих су широко подржани, док су други на путу за пуну подршку свих претраживача.

1. Наслови и поднаслови нумерације

   Рецимо да имате скуп заглавља и поднаслова у вашем документу и да их нумерирате ручно или путем скрипте. Уместо тога, можете користити ЦСС бројаче да бисте то урадили. Већ постоји детаљан пост на њему. А пошто је из ЦСС2 спецификација, можете се кладити да га подржавају сви претраживачи, осим можда ИЕ 6.

2. Спице Уп Плаин Ундерлинес

   Понекад желимо да подвучемо лепом тачкастом или испрекиданом линијом уместо чврсте. Пошто нема опције за то, ми смо задовољни бордер-боттом. Али бордер-боттом није добро решење ако текст који подвлачите облаже.

   ЦСС3 је дефинисао не једну, већ три нове особине за декорацију текста тект-децоратион-цолор, тект-децоратион-лине, и текст-украс-стил који се може скратити у старо добро тект-децоратион.

   Можете их користити за подцртавање стила, преклапање, чак и за трептање текста и још много тога. Од априла 2015. само Фирефок подржава ову особину, али можете је омогућити “експерименталне функције веб платформе” да бисте га користили у Цхроме-у.

3. Куотинг А Куоте

   Прво, нема потребе да се гњавите са куцањем исправних коврџавих цитата за кратке цитате јер постоји ХТМЛ за то: ознака која означава уграђене цитате.

   Тхе ознака такође води бригу о цитирању унутрашњих цитата са појединачним наводницима. Дакле, где је “за то постоји 'ЦСС'” тренутак у овоме?

   Рецимо да не желите да подразумевани дупли наводници или имате више од једног нивоа угнежђених цитата, можете да дефинишете своје поставке цитата за елемент цитата помоћу ЦСС-а користећи ЦСС2 куотес својство.

4. Манагинг Унрули Таблес

   Можда сте наишли на велики сто са различитим садржајем садржаја по ћелији који одбија да остане унутар ширине коју сте навели, без обзира шта покушате. Укротите тај сто са распоред табела својство (за једнаку висину ступца, пратите овај линк).

   Да будемо прецизнији, исправка је у табеларни распоред: фиксни; вредност. Када доделите фиксни распоред за табелу, табела и ширина ћелије се одређују ширином табеле или првог реда ћелија (које може дефинисати корисник), а не садржајем. То подржавају сви претраживачи.

5. Маке Ит Стицки

   Лепљиви елементи су елементи на страници која неће бити скролована. Другим речима, лепи се на видљиву област (оквир за преглед или скроловање). Ово можете креирати помоћу ЦСС-а позиција: лепљива;.

   Они се понашају као релативно постионирани елементи пре било ког померања и касније као фиксни елементи када се достигне праг померања. За сад, само Фирефок подржава.

6. Набавите текст у облику

   Да ли желите да се текст на вашој страници лијепо савије преко неке слике коју сте приказали поред ње? Можете пробати ЦСС Схапес. За имплементацију ЦСС облика, можемо користити три својства облик-напољу, облик-маргина и праг облика слике. Од априла, ЦСС Облици су подржани од стране вебкит бровсерс.

7. Обавезна поља

   Ако имате образац постоји велика шанса да су нека поља у њему обавезна, док друга нису. Мораћете да обавестите кориснике који је који. ЦСС за ово је :потребан :опционо псеудо класе. Сви модерни претраживачи их подржавају.

8. Пицки Витх Цолорс

   Ако вам се не свиђа одређена боја, као што је плава, можемо обојити одабрану област неком другом бојом и :: селецтион псеудо елемент је ЦСС за то. То подржавају сви модерни претраживачи.

9. Јесам ли га проверио?

   У ситуацији када је потврђен оквир за избор, било би лијепо да се другачији знак разликује од мале квачице унутар подразумеваног оквира за потврду да би се означило да је ставка означена.

   Постоји ЦСС за оно што искориштава везу између непосредних браће и сестара, два елемента један поред другог. ЦСС има суседни селектор који означава плус + знак, а ми можемо да га употребимо да циљамо ознаку поред поља за потврду. Али шта је са циљањем прво потврђеног квадратића? Постоји : цхецкед псеудо класа за то.

10. Лике А Сторибоок

    Онда, зар не би било лепо кад би први “О” у “У давна времена” изгледа лепо? Можемо да учинимо да изгледа лепо, након свега постоји ЦСС за то. Ево где ::прво слово псеудо елемент долази на спас. Она циља прво слово првог реда циљаног елемента. Више о томе прочитајте овдје.

11. Желите ли знати више?

    Елемент може имати класу Кс или податке И или неку другу вриједност за атрибут. Ако икада буде потребно да прикажемо такву атрибутну вредност елемента близу њега, можемо да користимо садржај: аттр (Кс). Он добија вредност атрибута Кс елемента, а онда је можемо приказати поред елемента.

12. Мало више левици

    Центрирање елемената за ЦСС почетнике је прави подвиг. Различити елементи захтевају различит скуп ЦСС својстава да их центрирају. Размотрићемо један пример од многих који је доступан у светској мрежи, тако да можете поново да се сетите да постоји ЦСС за центрирање ствари.

13. Откривање формата датотека линкова

    Да ли сте икада видели малу слику у близини везе која показује шта је та веза? ПДФ? или ДОЦ? Да, постоји ЦСС да то постигне. Тхе садржај: урл () је оно што ћемо користити да прикажемо слику иза линкова.

14. Триггер Параллак Еффецт

    Ефекат паралаксе је ефекат који се користи за описивање наизглед спорог кретања позадине у односу на предњи план. Овај ефекат је популаран на веб сајтовима који примењују померање паралаксе. Постоје различити начини за његову имплементацију, пример испод ради у Фирефок-у са бацкгроунд-аттацхмент: фиксно;.

15. Тхе Повер Оф ЦСС Аниматионс

    Вероватно није огроман “постоји ЦСС за то” тренутак, јер сте сви вероватно већ свесни ЦСС анимација. Али мали подсетник није штетан. Постоји много начина за ЦСС анимације, али овде је једна за једноставну вежбу за бојење.

Сада прочитајте: 50 корисних ЦСС исјечака Сваки дизајнер би требао имати