Како направити основне и напредне облике са чистим ЦСС-ом

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

У овом чланку ћемо користити ЦСС облике и неколико функционалних вредности за кодирање различитих облика.

Цртање основних ЦСС облика

Почнимо са основним облицима као што су квадрат, правоугаоник, троугао, круг и елипса.

Квадрат и правоугаоник

Квадрат и правоугаоник су облици који се најлакше праве у ЦСС-у. Све што треба да урадите је да креирате а и дати му а висина и а ширина.

ХТМЛ

ЦСС

.рец-ск {
дисплеј: флек;
гап: 2ем;
маргина: 2ем;
}
.квадрат {
ширина: 15рем;
висина: 15рем;
позадина: ргб (255, 123, 0);
}
.рецтангле {
ширина: 24рем;
висина: 14рем;
позадина: ргб (0, 119, 128);
}

Излаз:

Круг и елипса

Само треба да доделите а

граница-радијус од 50% на квадрат и добићете круг. Урадите исто са правоугаоником да добијете елипсу.

ХТМЛ

ЦСС

.цирцле {
ширина: 15рем;
висина: 15рем;
позадина: ргб (255, 123, 0);
радијус границе: 50%;
}
.еллипсе {
ширина: 24рем;
висина: 14рем;
позадина: ргб (0, 119, 128);
радијус границе: 50%;
}

Излаз:

Троуглови

Користићемо ивице да направимо троуглове. Питате се како то функционише? Све што треба да урадите је да подесите ширина и висина троугла на нулу. То значи да идемо напред стварна ширина елемента ће бити ширина границе. Такође, можда већ знате да су ивице ивице једна према другој дијагонале од 45 степени. Дајте различите боје свакој ивици и поставите било које три од њих на транспарентне. На крају, имаћете свој троугао.

ХТМЛ

ЦСС

//заједничка за све
тело {
дисплеј: флек;
јаз: 5ем;
маргина: 15ем;
}.узорак {
висина: 8.5ем;
ширина: 8.5ем;
бордер-топ: 1ем солид #9ее780;
бордер-ригхт: 1ем солид ргб (240, 241, 141);
бордер-боттом: 1ем солид ргб (145, 236, 252);
ивица лево: 1ем солид ргб (248, 115, 106);
}.троугао {
висина: 0;
ширина: 0;
бордер-топ: 5ем солид #9ее780;
бордер-ригхт: 5ем солид ргб (240, 241, 141);
бордер-боттом: 5ем солид ргб (145, 236, 252);
ивица лево: 5ем солид ргб (248, 115, 106);
}

Излаз:

Можете се играти са висина и боја ивице да бисте добили различите врсте троуглова. На пример, можете да креирате троугао који показује ка горе тако што ћете дати граница-дно пуну боју док су све остале ивице постављене на транспарентне. Такође, можете да креирате троугао који показује у правом смеру или троугао под правим углом играјући се са граница-ширина и боја ивице.

ХТМЛ

ЦСС

.триангле-уп {
висина: 0;
ширина: 0;
ивица-врх: 5ем чврста провидна;
бордер-ригхт: 5ем солид транспарент;
бордер-боттом: 5ем солид ргб (145, 236, 252);
ивица лево: 5ем чврста провидна;
}
.триангле-ригхт {
ширина: 0;
висина: 0;
Бордер-стил: чврст;
бордер-видтх: 4ем 0 4ем 8ем;
Бордер-цолор: транспарентан транспарентан провидан ргб (245, 149, 221);
}
.триангле-боттом-ригхт {
ширина: 0;
висина: 0;
Бордер-стил: чврст;
бордер-видтх: 8ем 0 0 8ем;
Бордер-цолор: транспарентан транспарентан провидан ргб (151, 235, 158);
}

Излаз:

Креирање напредних облика помоћу ЦСС-а

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

Облик звезде (5 тачака)

Мораћете да манипулишете границама користећи вредност ротације трансформације. Идеја је да се креирају две стране користећи а класа=”звезда”, друге две стране користе ::после елемент, а последња страна помоћу ::пре него што елемент.

ХТМЛ

ЦСС

.стар-фиве {
маргина: 3.125ем 0;
положај: релативан;
дисплеј блок;
ширина: 0ем;
висина: 0ем;
граница десно: 6.25ем чврста провидна;
ивица-дно: 4.3ем солид ргб (255, 174, 81);
ивица лево: 6.25ем чврста провидна;
трансформисати: ротирати (35 степени);
}
.стар-фиве: пре {
ивица-дно: 5ем солид ргб (255, 174, 81);
ивица лево: 2ем чврста провидна;
бордер-ригхт: 1.875ем солид транспарент;
позиција: апсолутна;
висина: 0;
ширина: 0;
топ: -45пк;
лево: -65пк;
дисплеј блок;
садржај: '';
трансформисати: ротирати (-35 степени);
}
.стар-фиве: после {
позиција: апсолутна;
дисплеј блок;
врх: 3пк;
лево: -105пк;
ширина: 0;
висина: 0;
граница десно: 6.25ем чврста провидна;
ивица-дно: 4.3ем солид ргб (255, 174, 81);
ивица лево: 5.95ем чврста провидна;
трансформисати: ротирати (-70 степени);
садржај: '';
}

Излаз:

Пентагон

Можете направити петоугао комбиновањем трапеза и троугла. Користите граница и својства положаја обликују и групишу их.

ХТМЛ

ЦСС

.пентагон {
положај: релативан;
ширина: 10ем;
бок-сизинг: цонтент-бок;
бордер-видтх: 10ем 5ем 0;
Бордер-стил: чврст;
бордер-цолор: ргб (7, 185, 255) транспарентан;
маргин-топ: 20рем;
маргин-лефт: 10рем;
}
.пентагон: пре {
садржај: "";
позиција: апсолутна;
висина: 0;
ширина: 0;
врх: -18ем;
лево: -5ем;
бордер-видтх: 0 10ем 8ем;
Бордер-стил: чврст;
Бордер-цолор: транспарентан транспарентан ргб (7, 185, 255);
}

Излаз:

Диамонд

Групишите два троугла који показују нагоре и надоле користећи позицију да бисте направили облик дијаманта. Да, користићемо граница својства за стварање ових троуглова.

ХТМЛ

ЦСС

.диамонд {
ширина: 0;
висина: 0;
положај: релативан;
врх: -3ем;
ивица: 3ем чврста провидна;
бордер-боттом-цолор: ргб (129, 230, 255);
}
.дијамант: после {
садржај: '';
ширина: 0;
висина: 0;
позиција: апсолутна;
лево: -3ем;
врх: 3ем;
ивица: 3ем чврста провидна;
бордер-топ-цолор: ргб (129, 230, 255);
}

Излаз:

Можете креирати облик дијамантског штита тако што ћете променити висину горњег троугла као што је приказано испод:

ХТМЛ

ЦСС

.дијамантски штит
{
ширина: 0;
висина: 0;
ивица: 3ем чврста провидна;
ивица-дно: 1.25ем солид ргб (71, 194, 231);
положај: релативан;
врх: -3ем;
}
.диамонд-цут: после {
садржај: '';
позиција: апсолутна;
лево: -3ем;
врх: 1.25ем;
ширина: 0;
висина: 0;
ивица: 3ем чврста провидна;
бордер-топ: 4.4ем солид ргб (71, 194, 231);
}

Излаз:

Срце

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

ХТМЛ

ЦСС

.срце {
ширина: 6.25ем;
висина: 55ем;
положај: релативан;
}
.срце: пре,
.хеарт: после {
садржај: "";
ширина: 3ем;
висина: 5ем;
позиција: апсолутна;
лево: 3ем;
топ: 0;
позадина: црвена;
бордер-радиус: 3ем 3ем 0 0;
трансформисати: ротирати (-45 степени);
трансформ-оригин: 0 100%;
}
.хеарт: после {
лево: 0;
трансформисати: ротирати (45 степени);
трансформ-оригин: 100% 100%;
}

Излаз:

Експериментишите са чистим ЦСС облицима

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

Како да направите прилагодљиву траку за навигацију користећи ХТМЛ и ЦСС

Позивање свих почетника веб програмера: овај водич ће вам дати вештине које су вам потребне да креирате сопствене респсониве навигационе траке користећи само ХТМЛ и ЦСС!

Реад Нект

О аутору