Направите Твиттер картицу за кориснике који користе ХТМЛ5 и ЦСС3

Кориснички профил је један од најважнијих делова апликације, одакле он може приступити својим личним подацима, опцијама конфигурације и свим функционалностима које су својствене његовом профилу.
Кориснички профили готово увијек слиједе стандард у веб апликацијама, али понекад можемо имплементирати нешто другачије, а то такође овиси о пословном моделу наше странице, на примјер ако управљамо неком врстом заједнице било које врсте, не би шкодило имплементирати карта у стилу Твиттер за кориснике наше заједнице.
Изградња ХТМЛ -а
Користићемо нашу корисничку картицу у стилу Твиттер-а ХТМЛ5 И ЦСС3, тако да ћемо имати само две датотеке; наш .хтмл и наш стилски лист. Укључујемо нашу таблицу стилова и започињемо стварање наше угнијежђене див структуре која затим с неким стиловима у ЦСС учинићемо да изгледају како желимо.

Даве Грохл @ДавеГрохлТвеетс 3,500Следећи 140Следбеници 2,700

Када ово добијемо, остаје нам само да направимо нашу стилску таблицу.
Креирање ЦСС -а
За њега ЦСС користићемо нека својства градијента, сенке и конвенционална својства за слово и положај елемената:

 боди {позадина: # Ф0ЕФЕД; бацкгроунд-имаге: -вебкит-линеар-градиент (врх, # Е5Е4Е5, # Ц2Ц1Ц2); бацкгроунд-имаге: линеар-градиент (до дна, # Е5Е4Е5, # Ц2Ц1Ц2); фонт-фамили: 'ПрокимаНова-Регулар', Хелветица неуе, санс-сериф; } .контејнер {мак-видтх: 350пк; ширина: 100%; висина: 100%; положај: релативан; маргина: ауто; }

Поред овога морамо додати и стилове картице као такве, погледајмо неке стилове за њу:

 .цард-профиле_висуал: пре, .цард-профиле_висуал: афтер {дисплаи: блоцк; садржај: ''; ширина: 100%; висина: 100%; положај: апсолутан; з-индекс: 0; позадина: урл (профиле.јпг) центар / поклопац без понављања; непрозирност: 0,5; мик-бленд-моде: посветлити; } .цард-профиле_висуал: пре {-вебкит-филтер: сиве (100%); филтер: у сивим тоновима (100%); } .цард-профиле_усер-инфос {поситион: абсолуте; з-индекс: 3; лево: 0; десно: 0; маргина: ауто; врх: калц (68% - 100пк); боја: #ффф; поравнање текста: центар; } .цард-профиле_усер-инфос а {видтх: 64пк; висина: 64пк; положај: апсолутан; лево: 0; десно: 0; маргина: ауто; боја позадине: # Ф96Б4Ц; бацкгроунд-имаге: -вебкит-линеар-градиент ( # Ф96Б4Ц, # Ф23182); бацкгроунд-имаге: линеар-градиент ( # Ф96Б4Ц, # Ф23182); дисплеј блок; јасно: обоје; маргина: ауто; граница-полупречник: 100%; врх: калц (500% + 66 пиксела); бок-схадов: 0 2пк 0 # Д42Д78, 0 3пк 10пк ргба (243, 49, 128, 0.15), 0 0пк 10пк ргба (243, 49, 128, 0.15), 0 0пк 4пк ргба (0, 0, 0, 0.35 ), 0 5пк 20пк ргба (243, 49, 128, 0.25), 0 15пк 40пк ргба (243, 49, 128, 0.75), уметнуто 0 0 15пк ргба (255, 255, 255, 0.05); преливање: скривено; }

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

На крају, на крају водича ће се наћи датотеке које ће свако моћи да тестира и прилагоди на веб локацији по свом избору, па немојте оклевати да испробате, па чак и проширите њену функционалност у односу на оно што се види у овом водичу.
профилна картица твиттер.зип 393.53К 251 преузимањаДа ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен