Како створити облик срца са ЦСС-ом

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

Уместо тога, направићемо нешто једноставно да вам помогнемо прво разумети облике и позиционирање помоћу ЦСС-а, пре него што се упустите у напредније дизајне. Пошто је Дан заљубљених управо иза угла, направимо облик срца користећи ХТМЛ и ЦСС.

Основе

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

Почните додавањем

елемент као темељ нашег облика срца.

Онда ћемо направити квадрат тако што ћемо навести ширину и висину подједнако. Изаберите жељену боју позадине.

 .облик срца положај: релативан; видтх: 200пк; хеигхт: 200пк; позадинска боја: ргба (250,184,66, 0,8);

Следеће, направићемо кругове.

Уместо додавања нових елемената, користићемо псеудо-елементе, :пре него што и :после. Прво смо подесили :пре него што псеудо-елементи као наш први круг. Правимо га квадрат са једнаком величином на ширини и висини као што смо радили са див. Затим га претварамо у круг тако да му дамо гранични радијус од 50% и ставимо га на леву страну трга.

 .облик срца: прије позиција: апсолутна; боттом: 0пк; лево: -100пк; видтх: 200пк; хеигхт: 200пк; садржај: "; -вебкит-бордер-радиус: 50%; -моз-бордер-радиус: 50%; -о-бордер-радиус: 50%; бордер-радиус: 50%; бацкгроунд-цолор: ргба (250,184,66 , 0.8);

Заједно са квадратом имат ћемо овакав резултат:

Након тога креирамо други круг са псеудо-елементом :после са истим стиловима као и први круг који смо креирали. Затим га поставимо и на врх трга.

 .облик срца: након позиције: апсолутно; топ: -100пк; десно: 0пк; видтх: 200пк; хеигхт: 200пк; садржај: "; -вебкит-бордер-радиус: 50%; -моз-бордер-радиус: 50%; -о-бордер-радиус: 50%; бордер-радиус: 50%; бацкгроунд-цолор: ргба (250,184,66 , 0.8);

Резултати су следећи:

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

 .облик срца: пре, срца: после позиције: апсолутно; видтх: 200пк; хеигхт: 200пк; садржај: "; -вебкит-бордер-радиус: 50%; -моз-бордер-радиус: 50%; -о-бордер-радиус: 50%; бордер-радиус: 50%; бацкгроунд-цолор: ргба (250,184,66 , 0.8); .хеарт-схапе: пре боттом: 0пк; лево: -100пк; .хеарт-схапе: после топ: -100пк; ригхт: 0пк;

Та-да! Имамо облик срца, иако још није у добром правцу. Да бисмо га исправили, користићемо ЦСС3 Трансформатион.

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

Овде ћемо ротирати срце тако да се види “стоји”.

 .срце-облик -вебкит-трансформ: ротате (45дег); -моз-трансформ: ротате (45дег); -мс-трансформ: ротате (45дег); -о-трансформ: ротирати (45дег); трансформ: ротате (45дег);

И то је оно што наше срце сада изгледа.

Резултат:

Комплетан код облика срца изнад је следећи, у ХТМЛ-у:

А на нашем ЦСС-у ће бити овако:

 .облик срца положај: релативан; видтх: 200пк; хеигхт: 200пк; -вебкит-трансформ: ротате (45дег); -моз-трансформ: ротате (45дег); -мс-трансформ: ротате (45дег); -о-трансформ: ротирати (45дег); трансформ: ротате (45дег); позадинска боја: ргба (250,184,66, 1); . срце-облик: пре,. срце-облик: после позиције: апсолутно; видтх: 200пк; хеигхт: 200пк; садржај: "; -вебкит-бордер-радиус: 50%; -моз-бордер-радиус: 50%; -о-бордер-радиус: 50%; бордер-радиус: 50%; бацкгроунд-цолор: ргба (250,184,66 , 1); .хеарт-схапе: пре боттом: 0пк; лево: -100пк; .хеарт-схапе: после топ: -100пк; десно: 0пк;

Обратите пажњу на то да смо сада подесили алфа канал ргба (250,184,66, 1) у позадини 1 да уклоните транспарентност. Ово сада изгледа наше срце.

Сада када имамо савршен облик срца, можемо замените позадину другом бојом (нпр. ружичаста или црвена) са лакоћом. Једини недостатак овде је да ми није могао додати границу на облик због наслаганих елемената. Додавање граничне линије ће учинити да срце изгледа чудно.

Закључак

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

Ограничени сте само својом креативношћу и маштом!