\n Veebikujunduseks kasutatavaid programme on arvukalt, kuid vaid v\u00e4hesed neist on teie aega ja vaeva v\u00e4\u00e4rt. Selline tarkvara muudab meie veebikujunduse palju lihtsamaks ja kiiremaks.\n<\/p>\n
\n CSS-i, mida tuntakse ka kui Cascading Styling Sheets, kasutatakse HTML- ja XHTML-vormingus tehtud veebisaitide vaate muutmiseks v\u00f5i muutmiseks. Enamik veebibrausereid toetab CSS-i. Kuigi CSS-i uusim versioon on CSS 4, kasutatakse CSS3 siiski laialdaselt.\n<\/p>\n
\n CSS 3 on CSS 2.1 laiendus ja sellel on palju v\u00f5imalusi, mis aitavad kasutajal veebisaiti kiiremini ja lihtsamalt kujundada. CSS 3 t\u00f5ttu ei m\u00f5tle disainerid praegu CSS-i ja HTML-koodi h\u00e4kkimisele, et need t\u00f6\u00f6taksid erinevates brauserites ja raiskaksid sellega aega, on CSS 3 veebidisaini tulevik.\n<\/p>\n
\n Uued asjad CSS3-s\n<\/p>\n
\n V\u00f5imalusega lisada oma veebisaidile videoid ja 3D-objekte, on CSS 3-s tehtud palju t\u00e4iustusi, millest r\u00e4\u00e4gime \u00fcksikasjalikult 14-st.\n<\/p>\n
\n CSS 3 kasutamise eeliseks on see, et see \u00fchildub selle eelmiste versioonidega ja vanemaid versioone kasutanud veebisaite saab CSS 3 abil uuesti reguleerida. Enamik veebilehitsejaid on CSS-iga \u00fchilduvad, nii et muutmine abiga CSS 3 kuvatakse suurep\u00e4raselt, kuid kui soovite lisada eelmise versiooni veebisaite muutmata, on see samuti v\u00f5imalik. Parem on kohandada oma saiti vastavalt CSS 3-le, sest CSS 3-le ehitatud saidid laaditakse kiiremini.\n<\/p>\n
\n Teine CSS 3 kasutamise suur eelis on see, et saame eraldada suured moodulid erinevateks v\u00e4ikesteks mooduliteks, mida selle eelmises versioonis polnud. See muudab selle kasutamise palju lihtsamaks ja suurendab praktilisust.\n<\/p>\n
\n CSS 3-l on palju valikuid, mis on selle palju lihtsamaks teinud. Need valikud on v\u00e4rv, taust ja \u00e4\u00e4rised, kasti mudel, selektorid, tekstiefektid, 2D- ja 3D-teisendus ning kasutajaliides. Kui inimesed arvavad, et sellel pole vanu valikuid, siis nende teadmiseks on sellel CSS 3-l ka k\u00f5ik eelmised valikud, kuid need on jagatud v\u00e4ikesteks funktsionaalseteks osadeks. K\u00f5ik need valikud on muutnud t\u00f6\u00f6 lihtsamaks.\n<\/p>\n
\n Kui soovid moodulites muudatusi teha, siis CSS 3 on lihtsaim t\u00f6\u00f6riist, kuna \u00fcksikutes moodulites saab v\u00e4ga lihtsalt muudatusi teha ja need p\u00f5his\u00fcsteemi integreerida. Probleeme saab h\u00f5lpsasti esile t\u00f5sta ja vajadusel parandada \u00fcksikute moodulite testimisega.\n<\/p>\n
\n See on veebisaitide kujundajatele kasutusmugavuse seisukohalt parim valik, kuna CSS 3 abil saavad nad h\u00f5lpsalt iga saidi erinevate kanalite ja elektroonikaseadmete jaoks hinnatavaks muuta. Selle abil saate muuta oma veebisaidid mobiilis\u00f5bralikuks, mis on h\u00f5lpsasti juurdep\u00e4\u00e4setav ja loetav.\n<\/p>\n
\n Inimesed saavad sellega t\u00f6\u00f6d teha kiiremini kui selle eelmise versiooniga. See koosneb valikust, mis ei n\u00f5ua JavaScripti ja CSS-i kombinatsiooni ning s\u00e4\u00e4stab meie jaoks palju aega toote tootmisel, laadimisel ja t\u00f6\u00f6 l\u00f5petamisel. Selle paindlikkuse t\u00f5ttu v\u00e4henevad ka t\u00f6\u00f6ajad. See paindlikkus saavutatakse t\u00e4nu selle moodulitele.\n<\/p>\n
\n CSS 3-ga koostatud veebisaidid laaditakse kiiremini ja need on k\u00f5rgemal kui CSS-iga loodud veebisaidid.\n<\/p>\n
\n Iga kasutaja on teistest kasutajatest erinev, seega on neil erinevad valikud; kasutajate jaoks on saadaval palju brausereid, nii et iga kasutaja kasutab erinevat brauserit. Tarkvaraarendajate jaoks on suur v\u00e4ljakutse luua tarkvara, mis t\u00f6\u00f6tab igas brauseris.\n<\/p>\n
\n CSS-i arendaja veendus, et nad ehitasid CSS 3-ga \u00fchilduva paljude brauseritega, k\u00f5ik varasemad CSS-i versioonid ei \u00fchildunud k\u00f5igi brauseritega. Paljud brauserid toetavad selle uusi versioone, kuigi see ei vasta W3C standarditele.\n<\/p>\n
\n Probleemivabaks projekteerimisprotsessiks saavad disainerid kasutada CSS 3 Generatorit, mis muudab selle klientide jaoks lihtsamaks. See on omamoodi tarkvara, mis annab vabaduse ja \u00fchildub paljude veebibrauseritega.\n<\/p>\n
\n CSS 3 abil saame muuta veebisaitide tausta lihtsamaks kui selle eelmises versioonis. K\u00f5ik see toimub skriptimise ja programmeerimise abil.\n<\/p>\n
\n N\u00fc\u00fcd ei ole teil vaja teha erineva olukorra jaoks mitut tausta, see oleks olnud t\u00fclikas ja nii paljude ekraanisuuruste, kujude ja eraldusv\u00f5imega oleks see olnud keeruline.\n<\/p>\n
\n CSS 3-s saadaolevate valikute abil saate teha paljusid asju, sellega saate m\u00e4\u00e4rata pildi \u00e4\u00e4riseks, peate minema piiri-kujutise omaduse poole, kus saate oma pilti kasutada \u00e4\u00e4risena. Saate oma pildid jagada \u00fcheksaks osaks.\n<\/p>\n
\n See pakub palju tekstiefekte, mille hulgast saate valida oma veebisaidile sobiva tekstiefekti ja varjuefekti abil saate oma veebisaidi kujundust t\u00e4iustada ja sellel on uus funktsioon, mida tuntakse piiri\u00fclese t\u00f6\u00f6riistana. Need asjad olid CSS-i eelmistes versioonides keerulised.\n<\/p>\n
\n Mitme veeru mooduliga saate oma veebisisu veergudes voolata; see valik s\u00e4\u00e4stab teie aega, sest sellega ei pea te palju horisontaal- ega vertikaalsuunas kerima.\n<\/p>\n
\n Inimesed ei tea, kui suurt m\u00f5ju avaldavad pildid ja animatsioon koos lehe paigutusega lugejate meelitamisel ja nende lehel hoidmisel, nad peaksid seda teadma. Varem oli piltide lisamise ja redigeerimise v\u00f5imalusi koos animatsiooniga v\u00e4hem, nii et nende asjade lisamiseks vajas CSS JavaScripti abi. CSS 3 abil pole seda probleemi mitte ainult parandatud, vaid ka oluliselt parandatud.\n<\/p>\n
\n Sellel on isegi pildifilter, mis polnud varem saadaval ja mille jaoks oli vaja JavaScripti.\n<\/p>\n
\n CSS3 \u00fcleminekuid kasutatakse muudatuste tegemiseks kuvas ja sellega saab \u00fcleminekuefektide abil muuta erinevaid CSS-i omadusi nagu taustav\u00e4rv, laius, pikkus, l\u00e4bipaistmatus ja muud. See annab teile v\u00f5imaluse muuta loa atribuutide muudatusi CSS-i v\u00e4\u00e4rtustes, nagu need, mis on seatud teatud aja jooksul toimuma, \n CSS 3 funktsioonide testimise versioon on palju parem kui selle eelmised versioonid ja p\u00f5hjuseks on modulaarne struktuur. See CSS-i uus versioon on veebilehel vea leidmisel palju kiirem ja t\u00f5husam, seega kulub v\u00e4hem testimisaega, CSS-i eelmistes versioonides kulus palju aega veebidisaini testimiseks, kuna tegeliku probleemi leidmine oli v\u00e4ga keeruline. .\n<\/p>\n \n CSS 3-s on v\u00f5imalik sooritada \u00fcksikute moodulite test ja kombineerida neid kogu s\u00fcsteemiga; selle eelised oleksid parem s\u00fcsteem, lihtne remont ja l\u00fchem t\u00f6\u00f6aeg.\n<\/p>\n \n See valik on m\u00f5eldud lehepaigutuste jaoks ja sisaldab selle jaoks mitut valikut. See on kahem\u00f5\u00f5tmeline s\u00fcsteem, nii et see suudab toime tulla nii veergude kui ka ridadega, mist\u00f5ttu peetakse seda CSS 3 k\u00f5ige v\u00f5imsamaks funktsiooniks.\n<\/p>\n \n Lihtsa matemaatika tegemiseks iga numbri v\u00f5i v\u00e4\u00e4rtuste arvu asendamiseks, mida kasutame CSS3-s Calc(), on see \u00e4\u00e4rmiselt t\u00f5hus arvutust\u00f6\u00f6riist. Matemaatiliste funktsioonide arvutamiseks ei vaja me selle eelprotsessoreid; saame teostada matemaatilisi funktsioone, nagu liitmine, lahutamine, korrutamine ja jagamine. CSS-i eeliseks on see, et saame vastuse sega\u00fchikute kohta, samas kui eelprotsessoris saime segu\u00fchikuid arvutada ainult siis, kui nende vahel oli fikseeritud seos.\n<\/p>\n \n See on CSS 3 uusim t\u00e4iendus, mis on lisatud lehe paigutuse kohandamiseks vastavalt erinevatele ekraanisuurustele ja kuvarividinatele. Selle hea asi on see, et see ei kasuta ujukeid ja selle konteineri marginaal ei murene koos teabe veerisega. Kasutajate arvates on see lihtsam kui kast, mist\u00f5ttu on CSS 3 kasutajate seas populaarne. Teine asi, mis inimestele selle juures meeldib, on see, et Flexible box on puhtam ja kasutuses lihtsam.\n<\/p>\n \n Kuigi 3D-teisendus ei ole CSS 3 populaarne funktsioon, on see siiski v\u00e4ga kasulik ja atraktiivne funktsioon, kui seda \u00f5igesti teha. Selle funktsiooniga saame teha 3D-mooduli, mida saab veebisaitidel kasutada; see on z-teljega 2D teisendusvalik. Selle peamised omadused on Translate3d, Scale3d, Rotate X, Rotate Y ja Rotate Z.\n<\/p>\n \n CSS 3 WebKiti arendusmeeskond andis 3D-teisenduskontseptsiooni ja seda kasutati aasta hiljem Safaris ja Chrome'is. Sellest ajast alates on see kaugele j\u00f5udnud ja muutunud veebidisainerite jaoks tavaliseks. Selle abil saame veebilehel keerutada m\u00f5nda elementi ja luua p\u00f6\u00f6rlevaid karussellipilte, k\u00f5ik need v\u00f5imalused on selle tarkvara jaoks p\u00e4ris head.\n<\/p>\n \n Kuigi see pole uus valik, on see siiski \u00fcks CSS 3 parimaid omadusi ja see on veebisaidi kujundamiseks vajalik. Mitte nii kaua aega tagasi ehitasime mobiilile ja lauaarvutile eraldi veebisaite, kuid n\u00fc\u00fcd l\u00f5ime \u00fche veebisaidi, mis on optimeeritud nii mobiilile kui ka lauaarvutile. Need veebisaidid kohandavad end vastavalt erinevale suurusele ja seadmele.\n<\/p>\n \n Kui keegi nii arvab, oleks see raske, siis saab ta \u0161okeeritud teadmisest, et seda funktsiooni on v\u00e4ga lihtne kasutada. Selle valiku kasutamiseks tuleb CSS-stiilid lisada plokki, mis on kaitstud \n CSS 3 on k\u00f5ige populaarsem veebisaidi lehtede kujundamisel kasutatav tarkvara, mille paljude v\u00f5imaluste abil saate veebisaiti kiiremini kujundada, kuna see n\u00f5uab v\u00e4hem kodeerimist, saate seda h\u00f5lpsalt kasutada ja see parandab veebisaitide kiirust, kui see on kujundatud sellega.\n<\/p>\n \n Peamine selle juures on see, et sellel on v\u00f5imalus jagada moodul paljudeks erinevateks v\u00e4ikesteks t\u00fckkideks; see valik muudab selle kasutamise lihtsamaks. 3D-teisendusega saate oma veebisaidile lisada m\u00f5ne 3D-valiku, Flexboxiga saame teha veebisaidi paigutuse, mis on optimeeritud iga ekraani suuruse ja seadme jaoks. Iga veebidisainer, kes soovib CSS 3 kasutada, peaks neid funktsioone teadma.\n<\/p>\n<\/p>\n:hover<\/code>v\u00f5i atribuutide v\u00e4\u00e4rtusi. :focus<\/code>\u00dcleminekuefekti parimaks kasutamiseks peate m\u00e4\u00e4rama kaks asja.\n<\/p>\n\n
\n 9 Funktsioonide testimine
\n<\/h5>\n\n 10 ruudustiku paigutus
\n<\/h5>\n\n
grid-template-columns<\/code>ja grid-template-rows<\/code>mida tuntakse otsese ruudustikuna. Kui teie m\u00e4\u00e4ratletud ruudustikud on tegelikest v\u00f5rkudest v\u00e4iksemad, nimetatakse neid t\u00e4iendavaid ruudustikuid kaudseks ruudustikuks, see kaudne ruudustik genereeritakse automaatselt.\n <\/li>\n\n 11 Calc()
\n<\/h5>\n\n 12 Paindlik kast
\n<\/h5>\n\n 13 3D teisendus
\n<\/h5>\n\n 14 Meediap\u00e4ringud
\n<\/h5>\ncode>@media rule<\/code>. Kui \u00fcks v\u00f5i mitu tingimust on t\u00e4idetud code>@media rule<\/code>, aktiveeritakse iga plokk.\n<\/p>\n\n J\u00e4reldus
\n<\/h4>\n