Како креирати РСС Феед Лого са ЦСС3
РСС феед лого је један од најчешће кориштених логотипа у веб дизајну, због функције коју је упутио. Видели сте многе туторијале за цртање РСС феед логотипа користећи графички софтвер као што је Пхотосхоп, али како цртајући га искључиво користећи ЦСС3? Иеап, чуо си ме :-)
У овој прилици желим да вам покажем једноставан начин да креирате стандардни РСС феед лого са само ЦСС3, па пратите упутства са свеобухватним корацима и графиком да бисте добили свој први ЦСС3 лого!
Ево прегледа онога што ћете направити за минут. Такође можете преузети изворне датотеке на крају водича.
Корак 1
Направите ХТМЛ датотеку, убаците следећи код у датотеку ако је потпуно празан.
Ми Фирст ЦСС3 РСС Феед Лого - Уметните свој ХТМЛ овде -
Корак 2
Уметните доњи код у ХТМЛ датотеку да бисте направили оквир за феед.
ХТМЛ за оквир за феед
ЦСС фор Феед бок
спан.феед-бок дисплаи: блоцк; видтх: 200пк; хеигхт: 200пк; маргин: 0 ауто; позадина: # Ф9А004; бок-схадов: 1пк 1пк 0 # Ц27Ц03, 2пк 2пк # # Ц27Ц03, 3пк 3пк 0 # Ц27Ц03, 4пк 4пк 0 # Ц27Ц03, 5пк 5пк 0 # Ц27Ц03, 6пк 6пк 0 # Ц27Ц03; -моз-бок-схадов: 1пк 1пк 0 # Ц27Ц03, 2пк 2пк 0 # Ц27Ц03, 3пк 3пк 0 # Ц27Ц03, 4пк 4пк 0 # Ц27Ц03, 5пк 5пк 0 # Ц27Ц03, 6пк 6пк 0 # Ц27Ц03; -вебкит-бок-схадов: 1пк 1пк 0 # Ц27Ц03, 2пк 2пк # # Ц27Ц03, 3пк 3пк 0 # Ц27Ц03, 4пк 4пк 0 # Ц27Ц03, 5пк 5пк 0 # Ц27Ц03, 6пк 6пк 0 # Ц27Ц03; -моз-бордер-радиус: 20пк; -вебкит-бордер-радиус: 20пк; радијус: 20пк; спан.феед-бок * флоат: ригхт; дисплеј блок;
То је резултат који ћете постићи:
Корак 3
Направићемо још једну кутију која се налази унутар првог поља за унос, тако да ставите ХТМЛ код испод у ХТМЛ код првог феед-а. Ту ћемо додати границу као баријеру.
ХТМЛ за мањи феед бок
ЦСС за мањи феед бок
спан.феед-бок .феед-бок-ин бордер: 4пк солид # ФФЦ563; ширина: 184пк; хеигхт: 184пк; маргин: 4пк 4пк 0 0; -моз-бордер-радиус: 20пк; -вебкит-бордер-радиус: 20пк; радијус: 20пк; / * оверфлов: хидден; * /
То је резултат који ћете постићи:
Корак 4
У овом кораку направићемо 1/4 круга. Ставите ХТМЛ код 1/4 круга у ХТМЛ код мањег оквира за унос, а испод је његов код:
ХТМЛ за 1/4 Биг Цирцле
ЦСС фор 1/4 Биг Цирцле
спан.феед-бок .феед-бок-ин .феед-куартер-цирцле-биг маргин: 16пк 16пк 0 0; видтх: 260пк; хеигхт: 260пк; граница: 30пк солид # ФФДЕА5; -моз-бордер-радиус: 260пк; -вебкит-бордер-радиус: 260пк; радијус границе: 260пк;
То је резултат који ћете постићи:
Корак 5
Сада ћемо направити 1/4 мали круг, ставити ХТМЛ код испод у ХТМЛ код великог круга.
ХТМЛ за 1/4 мали круг
ЦСС за 1/4 мали круг
спан.феед-бок .феед-бок-ин .феед-куартер-цирцле-биг .феед-куартер-цирцле-смалл маргин: 16пк 16пк 0 0; видтх: 176пк; хеигхт: 176пк; бордер: 26пк солид # ФФДЕА5; -моз-бордер-радиус: 176пк; -вебкит-бордер-радиус: 176пк; радијус: 176пк
То је резултат који ћете постићи:
Корак 6
У 6. кораку најмањи круг ће бити креиран унутар малог круга, тако да ставите његов ХТМЛ код у ХТМЛ код малог круга.
ХТМЛ за најмањи круг
ЦСС за најмањи круг
спан.феед-бок .феед-бок-ин .феед-куартер-цирцле.феед-куартер-цирцле-смалл .феед-цирцле маргин: 24пк 24пк 0 0; позадина: # ФФДЕА5; видтх: 70пк; хеигхт: 70пк; -моз-бордер-радиус: 70пк; -вебкит-бордер-радиус: 70пк; радијус: 70пк
То је резултат који ћете постићи:
Завршни додир
Претражите код, / * оверфлов: хидден; * / \ Т затим замените овим кодом, оверфлов: хидден;, онда да! Управо сте постигли ЦСС3 РСС Феед лого!
Бонус: Додај ефекат лебдјења
Нећете желети да ваш РСС феед лого буде без магичног ховер ефекта, зар не? Само додајте ЦСС стил испод да бисте га постигли!
ЦСС за Ховер ефекат
спан.феед-бок: ховер бацкгроунд: # 07Ц103; бок-схадов: 1пк 1пк 0 # 058Е02, 2пк 2пк 0 # 058Е02, 3пк 3пк 0 # 058Е02, 4пк 4пк 0 # 058Е02, 5пк 5пк 0 # 058Е02, 6пк 6пк 0 # 058Е02; -моз-бок-схадов: 1пк 1пк 0 # 058Е02, 2пк 2пк 0 # 058Е02, 3пк 3пк 0 # 058Е02, 4пк 4пк 0 # 058Е02, 5пк 5пк 0 # 058Е02, 6пк 6пк 0 # 058Е02; -вебкит-бок-схадов: 1пк 1пк 0 # 058Е02, 2пк 2пк 0 # 058Е02, 3пк 3пк 0 # 058Е02, 4пк 4пк 0 # 058Е02, 5пк 5пк 0 # 058Е02, 6пк 6пк 0 # 058Е02; спан.феед-бок: ховер .фед-бок-ин бордер-цолор: # 58ФЦ55; спан.феед-бок: ховер .феед-бок-ин .феед-четврт-круг-велики, спан.феед-бок: ховер .феед-бок-ин .феед-куартер-цирцле-биг .феед-куартер-цирцле -смалл бордер-цолор: # Б9ФФБ7; спан.феед-бок: ховер .феед-бок-ин .феед-куартер-цирцле-ларге .феед-куартер-цирцле-смалл .феед-цирцле бацкгроунд: # Б9ФФБ7;
Прегледи и преузимања
Ево прегледа ЦСС3 логоа у различитим величинама и другачијем стилу. Ако не можете постићи одређени корак, можете преузети и изворне датотеке.
- Превиев ЦСС3 РСС лого (велики)
- Превиев ЦСС3 РСС лого (средња)
- Превиев ЦСС3 РСС лого (мали)
- Превиев ЦСС3 РСС лого (средња, обрнута)
- Преузмите ЦСС3 РСС изворне датотеке (.зип)
Напомена уредника: Овај пост је написао / ла Ирхам Кендени фор Хонгкиат.цом. Ирхам, такође познат као Индаам, је веб дизајнер и програмер из Индонезије. Он такође воли развој ЦСС и ВордПресс тема.
