Реклама
ЦСС3 (у комбинацији са снагом ХТМЛ5) брзо подржавају сви главни прегледачи (читај - све осим Интернет Екплорера), тако да сам мислио сам да би сада био прави тренутак да видимо неке од сјајних ЦСС ефеката које можемо постићи користећи снагу прегледача и мало ЦСС кода. Требали бисте моћи да видите све ефекте приказане у овом чланку ако користите најновији прегледач Цхроме, Сафари или Фирефок.
Прво - Шта је ЦСС?
Ако читате овај чланак јер сте заинтригирани, али немате појма шта значи ЦСС, дозволите ми да брзо објасним. ЦСС је кодни језик који се користи за украшавање веб страница. Важи за Цасцадинг Стиле Схеет, и у основи само додаје стилу и њух сајту. Веб странице су сигурно читљиве без свог ЦСС-а, али су одвратне баш као и све веб странице давне 1995. године. Док ХТМЛ датотеке описују структуру и текстуални садржај странице, ЦСС их приказује на начин као дизајнер одредили и одредили све, од изгледа странице, величине текста и боја, а сада и низ фантастичних ефеката с уводом ЦСС3.
У прошлости, постизање истих врста ефеката као они описани у овом чланку значило би преузимање гломазног ЦСС-а или још веће графике. Сада ЦСС може само да опише вашем прегледачу како би желела да страница изгледа и претраживач ће обрадити обраду. Као да вам предајем планове за изградњу властите куће уместо да вам продајем целокупну кућу - то је значајно јефтиније!
Заобљени углови
Интернет је постепено постајао округлији, али сада је то учвршћено у ЦСС3. Погледајте оквир око овог параграфа. То није слика - покушајте десним кликом на њу да бисте је видели. Чисти ЦСС!
Код заобљених углова је заиста једноставан:
.бок_роунд {-моз-радијус: 20пк; / * ФФ1 + * / -вебкит-бордер-радијус: 20пк; / * Саф3-4, иОС 1+, Андроид 1.5+ * / обруб радиуса: 20пк; / * Опера 10.5, ИЕ9, Саф5, Цхроме, ФФ4 * /}
Тект Схадов
Текст понекад може изгледати врло оштро, али једноставна мала сенка заиста помаже стварима. Погледајте сенку коју сам применио на овај одломак.
Ево кода за неке текстуалне сенке:
.бок_тектсхадов {тект-схадов: 1пк 1пк 3пк # 888; / * ФФ3.5 +, Опера 9+, Саф1 +, Цхроме * / }
Градиенти
Нема више равних боја или слика градијента позадине, сада можете креирати цоол градијент само помоћу ЦСС-а. Нажалост, потребно вам је неколико редака због тренутних проблема са некомпатибилношћу између прегледача, али можете користити алат који ћу описати касније да бисте их аутоматски генерисали.
Ево кода за ЦСС градијенте:
.бок_градиент {позадина-боја: # 3ф9фе3; позадинска слика: -моз-линеарни градијент (врх, # 3ф9фе3, # бели); / * ФФ3.6 * / позадина: -моз-линеарни градијент (врх, # 1Е5799 0%, # 207цца 26%, # 2989Д8 39%, #ФФФФФФ 100%); / * фирефок * / бацкгроунд-имаге: -мс-линеар-градиент (врх, # 3ф9фе3, #вхите); / * ИЕ10 * / бацкгроунд-имаге: -о-линеарни градијент (врх, # 3ф9фе3, #вхите); / * Опера 11.10+ * / бацкгроунд-имаге: -вебкит-градиент (линеарни, леви горњи, леви доњи, од (# 3ф9фе3), до (#вхите)); / * Саф4 +, Цхроме * / бацкгроунд-имаге: -вебкит-линеар-градиент (врх, # 3ф9фе3, #вхите); / * Цхроме 10+, Саф5.1 + * / позадина-слика: линеарни градијент (врх, # 3ф9фе3, #вхите); филтер: прогид: ДКСИмагеТрансформ. Мицрософт.градиент (стартЦолорСтр = '# 3ф9фе3', ЕндЦолорСтр = '# бели'); / * ИЕ6 – ИЕ9 * / }
Ротација
Тешко је замислити употребу овог текста у смислу текста, али може додати неке лепе елементе дизајна, на пример, када користите слике. И опет, приметите да, иако је овај одломак закренут, и даље можете да га одаберете и комуницирате с њим, јер он остаје обичан текст.
Овде је код да се нешто ротира:
.бок_ротате {-моз-трансформација: ротирати (7.5дег); / * ФФ3.5 + * / -о-трансформација: ротирати (7.5дег); / * Опера 10.5 * / -вебкит-трансформ: ротирати (7.5дег); / * Саф3.1 +, Цхроме * / -мс-трансформ: ротирати (7.5дег); / * ИЕ9 * / трансформација: ротирати (7.5дег); филтер: прогид: ДКСИмагеТрансформ. Мицрософт. Матрица (/ * ИЕ6 – ИЕ9 * / М11 = 0,9914448613738104, М12 = -0,13052619222005157, М21 = 0,13052619222005157, М22 = 0,9914448613738104, величинаМетход = 'аутоматски прошири'); зум: 1; }
Анимација
О да, најбоље сам сачувао до последњег. ЦСС3 уводи различите облике анимације за било који број описаних цоол ЦСС ефеката. У овом параграфу дефинисао сам својство преласка као што је наведено у наставку, као и једноставну боју позадине и ротацију када миша пређете преко ње. Ако већ нисте, поставите показивач миша изнад овог одломка текста да бисте видели ефекат у акцији. Можете анимирати прилично било шта!
Требат ће вам овакав пријелазни код било којем елементу који желите промијенити. Такође ћете требати да користите неке псеудо ЦСС класе (као што су: задржите показивач да промените било која својства која желите да анимирате, као што су боја, величина или ротација)
.бок_транситион {-моз-транзиција: свих 0,5 с олакшањем; / * ФФ4 + * / -о-транзиција: свих 0,5с олакшање; / * Опера 10.5+ * / -вебкит-транзиција: свих 0,5-так олакшање; / * Саф3.2 +, Цхроме * / -мс-прелаз: свих 0,5-так олакшање; / * ИЕ10? * / прелаз: свих 0,5 с олакшањем; }
Некомпатибилности претраживача
Иако већина модерних прегледача на неки начин подржава читав ЦСС3, неки и даље захтијевају нешто другачији код или хакове како би успјели с њиховом посебном имплементацијом стандарда. На пример, у горњем коду, видећете многе инстанце -моз- или -вебкит- који претходе неким од ЦСС својстава, а односе се на прегледаче засноване на Мозилла или Вебкит. Међутим, писање ових додатних редака може представљати бол, зато погледајте ово цсс3 генератор да их напишем за вас.
Закључак
Веб ће постати још узбудљивији са новим ЦСС3 и ХТМЛ5 екстензијама. Одобрено је да ћемо видети још један бљесак текста и високи однос вхиз-банг-а према стварном садржају (као што смо то радили када анимирани ГИФ-ови су прво „откривени“), али дугорочно ћемо научити како да користимо алате ЦСС3 како би направили занимљивији веб интерфејси. И хеј, увек можете све да искључите!
Ако сте и сами дизајнер или веб програмер, само запамтите да ЦСС3 никада не би могао бити једина опција. Ако ваша веб локација неће функционисати без ЦСС3, нисте је правилно користили. ЦСС треба користити да би се побољшао доживљај, а не функционалност програма.
Јамес има диплому о вештачкој интелигенцији и сертификат је ЦомпТИА А + и Нетворк +. Он је водећи програмер МакеУсеОф-а и своје слободно време проводи играјући ВР паинтбалл и таблегамес. Градио је рачунаре још од детета.
