ЦСС се користи за додавање стила веб страници након што сте подесили ХТМЛ скелет. Штавише, можете креирати углађене дизајне у ЦСС-у са само неколико линија кода.
Сваки програмер треба да зна ове ЦСС трикове како би брзо и ефикасно развијао своје пројекте. Они ће сигурно повећати вашу продуктивност на следећи ниво — хајде да почнемо.
1. Ховер Еффецтс
Можете додати ефекат лебдења у ХТМЛ елемент користећи :лебдети селектор.
Пример: Додавање ефекта лебдења елементу дугмета.
ХТМЛ код:
ЦСС код:
дугме: пређите мишем {
боја: #0062ФФ;
граница: #0062ФФ чврста 1пк;
позадина: #ФФФФ99;
}Можете се играти са овим кодом и додати ефекте попут фаде-ин,расту у, искривити, и тако даље. Учините то својим!
Ефекат ЦСС Фаде-ин при лебдењу
дугме{
непрозирност: 0,5;
}
дугме: пређите мишем{
непрозирност: 1;
}Ефекат раста ЦСС-а при лебдењу
дугме: пређите мишем{
-вебкит-трансформ: скала (1.2);
-мс-трансформ: скала (1.2);
трансформисати: размера (1.2);
}2. Промените величину слика да се уклопе у див контејнер
Можете да промените величину слике тако да стане у див контејнер помоћу висина, ширина, и објектно уклапање својства.
ХТМЛ код:
ЦСС код:
.рандом-имаге {
висина: 100%;
ширина: 100%;
објецт-фит: садржи;
}3. Поништавање свих стилова
Можете заменити све друге декларације стила атрибута (укључујући уграђене стилове) користећи !важно директива на крају вредности.
ХТМЛ код:
Здраво Свете!
ЦСС код:
п {
боја позадине: жута;
}
.Назив класе {
боја позадине: плава !важно;
}
#идНаме {
боја позадине: зелена;
}У овом примеру, !важно правило поништава сва остала боја позадине декларације и осигурава да ће боја позадине бити постављена на плаву, а не зелену.
4. Скратите текст помоћу три тачке
Можете скратити текст који се препуни троточком (...) помоћу преливање текста ЦСС својство.
ХТМЛ код:
Лорем ипсум долор сит амет цонсецтетур адиписицинг елит, сед до еиусмод темпор.
ЦСС код:
.тект {
размак: новрап;
преливање: скривено;
преливање текста: елипсис;
ширина: 200пк;
}Повезан: Модел ЦСС кутије објашњен примерима
5. Коришћење трансформације текста
Можете да натерате да текст буде написан великим, малим словима или великим словима користећи тект-трансформ ЦСС својство.
Велика слова
ХТМЛ код:
Лорем ипсум долор сит амет, цонсецтетур адиписицинг елит.
ЦСС код:
.велика слова {
трансформација текста: велика слова;
}Мала слова
ХТМЛ код:
Лорем ипсум долор сит амет, цонсецтетур адиписицинг елит.
ЦСС код:
.мала слова {
тект-трансформ: мала слова;
}Капитализација
ХТМЛ код:
Лорем ипсум долор сит амет, цонсецтетур адиписицинг елит.
ЦСС код:
.цапитализе {
трансформација текста: велика слова;
}6. Коришћење декларације својства једног реда
Можете да користите својства стенографије у ЦСС-у да учините свој код сажетим и лако читљивим.
На пример, ЦСС позадини је скраћено својство које вам омогућава да дефинишете вредности боја позадине, позадинска слика, бацкгроунд-репеат, и бацкгроунд-поситион. Слично, можете дефинисати својства за фонт, граница, маргина, и паддинг.
Једнолинијска декларација о својству у позадини
боја позадине: црна;
бацкгроунд-имаге: урл (имагес/киз.пнг);
бацкгроунд-репеат: без понављања;
бацкгроунд-поситион: лево горе;Можете да поједноставите горњу декларацију на један ред:
позадина: црни урл (имагес/киз.пнг) без понављања лево горе;Скраћене карактеристике су веома згодне за коришћење, али морате узети у обзир неке лукави ивични случајеви (као што је наведено у МДН веб документима) док их користите.
Објашњење је начин да се пружи више информација о елементу када корисник помери показивач миша преко елемента.
ХТМЛ код:
Десни Тоолтип
Ово је текст описа алата
ЦСС код:
тело {
тект-алигн: центар;
}
.тоолтип_див {
положај: релативан;
дисплеј: инлине-блоцк;
}
.тоолтип_див .тоолтип {
видљивост: скривена;
ширина: 170пк;
боја позадине: плава;
боја: #ффф;
тект-алигн: центар;
бордер-радиус: 6пк;
паддинг: 5пк 0;
/* Позиционирање описа алата */
позиција: апсолутна;
з-индекс: 1;
врх: -5пк;
лево: 105%;
}
.тоолтип_див: лебдећи .тоолтип {
видљивост: видљива;
}ХТМЛ код:
Лево објашњење
Ово је текст описа алата
ЦСС код:
тело {
тект-алигн: центар;
}
.тоолтип_див {
положај: релативан;
дисплеј: инлине-блоцк;
}
.тоолтип_див .тоолтип {
видљивост: скривена;
ширина: 170пк;
боја позадине: плава;
боја: #ффф;
тект-алигн: центар;
бордер-радиус: 6пк;
паддинг: 5пк 0;
/* Позиционирање описа алата */
позиција: апсолутна;
з-индекс: 1;
врх: -5пк;
десно: 105%;
}
.тоолтип_див: лебдећи .тоолтип {
видљивост: видљива;
}ХТМЛ код:
Топ Тоолтип
Ово је текст описа алата
ЦСС код:
тело {
тект-алигн: центар;
}
.тоолтип_див {
маргин-топ: 100пк;
положај: релативан;
дисплеј: инлине-блоцк;
}
.тоолтип_див .тоолтип {
видљивост: скривена;
ширина: 170пк;
боја позадине: плава;
боја: #ффф;
тект-алигн: центар;
бордер-радиус: 6пк;
паддинг: 5пк 0;
/* Позиционирање описа алата */
позиција: апсолутна;
з-индекс: 1;
дно: 100%;
лево: 50%;
маргин-лефт: -60пк;
}
.тоолтип_див: лебдећи .тоолтип {
видљивост: видљива;
}ХТМЛ код:
Боттом Тоолтип
Ово је текст описа алата
ЦСС код:
тело {
тект-алигн: центар;
}
.тоолтип_див {
маргин-топ: 100пк;
положај: релативан;
дисплеј: инлине-блоцк;
}
.тоолтип_див .тоолтип {
видљивост: скривена;
ширина: 170пк;
боја позадине: плава;
боја: #ффф;
тект-алигн: центар;
бордер-радиус: 6пк;
паддинг: 5пк 0;
/* Поставите опис алатке */
позиција: апсолутна;
з-индекс: 1;
врх: 100%;
лево: 50%;
маргин-лефт: -60пк;
}
.тоолтип_див: лебдећи .тоолтип {
видљивост: видљива;
}Такође можете користити Боотстрап библиотеку да креирате прилагођено Боотстрап алатке.
8. Додајте ефекте сенке
Можете додати ЦСС ефекте сенке у текстове и елементе користећи текст-сенка анд тхе кутија-сенка ЦСС својства респективно.
ЦСС Тект Схадов
Тхе текст-сенка ЦСС својство додаје сенке и слојеве у текст. Тхе текст-сенка својство прихвата листу сенки раздвојених зарезима које треба применити на текст.
Синтакса ЦСС својства тект-схадов:
/* Можете користити 4 аргумента са ЦСС својством тект-схадов:
оффсет-к, оффсет-и, полупречник замућења и боја */
/* оффсет-к | оффсет-и | блур-радиус | боја */
тект-схадов: 2пк 2пк 4пк црвена;
/* боја | оффсет-к | оффсет-и | полупречник замућења */
тект-схадов: #18фа3е 1пк 2пк 10пк;Белешка: Аргументи боје и радијуса замућења су опциони.
Повезан: Како користити ЦСС сенку текста: трикови и примери
На пример:
позадина: #е74ц3ц;
боја: #ффф;
фонт-фамили: лато;
тект-схадов: 1пк 1пк ргба (123, 25, 15, 0,5), 2пк 2пк ргба (129, 28, 18, 0,51), 3пк 3пк ргба (135, 31, 20, 0,52), 4гба31пк, 22, 0,53), 5пк 5пк ргба (145, 36, 24, 0,54), 6пк 6пк ргба (150, 38, 26, 0,55), 7пк 7пк ргба (154, 40, 28, 0,56), 8пк 8пк ргба (158, 42, 30, 0,57), 9пк 9пк ргба (1631, 41,0. 10пк ргба (166, 45, 33, 0,59), 11пк 11пк ргба (169, 47, 34, 0,6), 12пк 12пк ргба (173, 48, 36, 0,61), 13пк 13пк ргба (176, 50, 37, 0,62), 14пк 14пк ргба (178, 51, 38, 0,63), 15пк, 15 пк, 15 пк, 15 пк, 15 пк, 15 пк, 16пк 16пк ргба (184, 54, 40, 0,65), 17пк 17пк ргба (186, 55, 41, 0,66), 18пк 18пк ргба (189, 56, 42, 0,67), 19пк 19пк ргба (191, 57, 43, 0,68), 20пк 20пк ргба (1944, 58 пк), 1944, 58 пк 195, 59, 45, 0,7), 22пк 22пк ргба (197, 60, 46, 0,71), 23пк 23пк ргба (199, 61, 47, 0,72), 24пк 24пк ргба (201, 62, 47, 0,73), 25пк 25пк ргба (202, 62, 48, 0,74), 24пк, 24пк, 26пк, 26пк, 27пк 27пк ргба (206, 64, 49, 0,76), 28пк 28пк ргба (207, 65, 50, 0,77), 29пк 29пк ргба (209, 65, 51, 0,78), 30пк 30пк ргба (210, 66, 51, 0,79), 31пк 31пк ргба (2152, 67 пк, ргба (2852, 67 пк 213, 67, 52, 0,81), 33пк 33пк ргба (214, 68, 53, 0,82), 34пк 34пк ргба (215, 69, 53, 0,83), 35пк 35пк ргба (216, 69, 54, 0,84), 36пк 36пк ргба (218, 70, 54, 0,85), 37ргба (218, 70, 54, 0,85), 37ргба (216, 69, 54, 0,84), 39пк, 37пк, 375пк, 38пк 38пк ргба (220, 71, 55, 0,87), 39пк 39пк ргба (221, 71, 56, 0,88), 40пк 40пк ргба (222, 72, 56, 0,89), 41пк 41пк ргба (223, 72, 57, 0,9), 42пк 42пк ргба (225, 743, ргба (225, 743, пк 225, 73, 57, 0,92), 44пк 44пк ргба (225, 73, 58, 0,93), 45пк 45пк ргба (226, 74, 58, 0,94), 46пк 46пк ргба (227, 74, 58, 0,95), 47пк 47пк ргба (228, 75, 59, 0,96), 49ргба (228, 75, 59, 0,96), 49ргба (48рпк, 4750пк), 49пк 49пк ргба (230, 75, 59, 0,98), 50пк 50пк ргба (230, 76, 60, 0.99);ЦСС Бок Схадов
Тхе кутија-сенка својство се користи за примену сенке на ХТМЛ елементе.
Синтакса ЦСС својства бок-схадов
бок-схадов: [хоризонтални помак] [вертикални помак] [радијус замућења] [опциони радијус ширења] [боја];Белешка: Параметри замућења, ширења и боје су опциони.
Повезан: Како користити ЦСС бок-схадов: трикови и примери
На пример:
бок-схадов: ргба (0, 0, 0, 0.35) 0пк 5пк 15пк;Ако желите да погледате комплетан изворни код који се користи у овом чланку, ево ГитХуб спремиште.
Стилизирајте своју веб локацију користећи модерне ЦСС трикове
Додавање ЦСС сенки текста на веб локацију је одличан начин да привучете пажњу корисника. Може дати веб локацији одређену елеганцију и јединствен осећај. Будите креативни и експериментишите са некима текст-сенка примери који могу бити у складу са темом ваше веб странице.
Можете много да урадите са ефектима сенке текста у ЦСС-у, али може бити тешко знати шта је тачно могуће. Потражите помоћ са овим визуелним примерима.
Реад Нект
- Програмирање
- ЦСС
- Веб дизајн
- Веб Девелопмент
Иуврај је студент додипломских студија рачунарских наука на Универзитету у Делхију, Индија. Он је страствен за Фулл Стацк Веб Девелопмент. Када не пише, истражује дубину различитих технологија.
Претплатите се на наш билтен
Придружите се нашем билтену за техничке савете, рецензије, бесплатне е-књиге и ексклузивне понуде!
Кликните овде да бисте се претплатили
