\n Program som anv\u00e4nds f\u00f6r webbdesign finns i antal men bara ett f\u00e5tal av dem \u00e4r verkligen v\u00e4rda din tid och anstr\u00e4ngning. Programvara som dessa g\u00f6r v\u00e5rt webbdesignarbete s\u00e5 mycket enklare och snabbare.\n<\/p>\n
\n CSS, \u00e4ven k\u00e4nd som Cascading Styling Sheets, anv\u00e4nds f\u00f6r att \u00e4ndra eller \u00e4ndra synen p\u00e5 webbplatser som \u00e4r gjorda p\u00e5 HTML och XHTML. Majoriteten av webbl\u00e4sarna st\u00f6der CSS. \u00c4ven om den senaste versionen av CSS \u00e4r CSS 4, anv\u00e4nds fortfarande CSS3 i stor utstr\u00e4ckning.\n<\/p>\n
\n CSS 3 \u00e4r en f\u00f6rl\u00e4ngning av CSS 2.1 och har m\u00e5nga alternativ som hj\u00e4lper en anv\u00e4ndare att designa webbplats snabbare och enklare. P\u00e5 grund av CSS 3 nu, skulle designers inte t\u00e4nka p\u00e5 att hacka CSS och HTML-kod f\u00f6r att fungera i olika webbl\u00e4sare och sl\u00f6sa tid p\u00e5 det, CSS 3 \u00e4r webbdesignens framtid.\n<\/p>\n
\n Nya saker i CSS3\n<\/p>\n
\n Med m\u00f6jligheten att l\u00e4gga till videor och 3D-objekt p\u00e5 din webbplats har m\u00e5nga f\u00f6rb\u00e4ttringar gjorts i CSS 3, vi kommer att prata om 14 av dem i detalj.\n<\/p>\n
\n F\u00f6rdelen med att anv\u00e4nda CSS 3 \u00e4r att den \u00e4r kompatibel med dess tidigare versioner och de webbplatser som anv\u00e4nde de \u00e4ldre versionerna kan justeras med hj\u00e4lp av CSS 3. Majoriteten av webbl\u00e4sarna \u00e4r CSS-kompatibla s\u00e5 modifiering med hj\u00e4lp av CSS 3 visas perfekt men om du vill l\u00e4gga till webbplatserna i den tidigare versionen utan att \u00e4ndra s\u00e5 \u00e4r det ocks\u00e5 m\u00f6jligt. Det \u00e4r b\u00e4ttre att anpassa din webbplats enligt CSS 3 eftersom webbplatser byggda p\u00e5 CSS 3 laddas snabbare.\n<\/p>\n
\n En annan stor f\u00f6rdel med att anv\u00e4nda CSS 3 \u00e4r att vi kan separera stora moduler till olika sm\u00e5 moduler som inte var tillg\u00e4ngliga i dess tidigare version. Detta g\u00f6r det s\u00e5 mycket enklare att anv\u00e4nda och det f\u00f6rb\u00e4ttrar det praktiska.\n<\/p>\n
\n CSS 3 har m\u00e5nga alternativ som har gjort det mycket enklare, dessa alternativ \u00e4r F\u00e4rg, Bakgrund och gr\u00e4nser, Box Model, Selectors, Text Effects, 2D & 3D transformation och anv\u00e4ndargr\u00e4nssnitt. Om folk tror att den inte har gamla alternativ s\u00e5 f\u00f6r deras information, har denna CSS 3 alla tidigare alternativ ocks\u00e5, men dessa alternativ \u00e4r uppdelade i sm\u00e5 funktionella delar. Alla dessa alternativ har gjort det l\u00e4ttare att anv\u00e4nda.\n<\/p>\n
\n Om du vill g\u00f6ra \u00e4ndringar i modulerna s\u00e5 \u00e4r CSS 3 det enklaste verktyget eftersom man kan g\u00f6ra \u00e4ndringar i de separata modulerna mycket enkelt och integrera dem i huvudsystemet. Problem kan enkelt lyftas fram och korrigeras vid behov med individuell modultestning.\n<\/p>\n
\n Detta \u00e4r det b\u00e4sta alternativet n\u00e4r det g\u00e4ller anv\u00e4ndarv\u00e4nlighet f\u00f6r webbdesigners eftersom de med hj\u00e4lp av CSS 3 enkelt kan g\u00f6ra vilken webbplats som helst bed\u00f6mbar f\u00f6r olika kanaler och elektroniska enheter. Med den kan du g\u00f6ra dina webbsidor mobilv\u00e4nliga som blir l\u00e4ttillg\u00e4ngliga och l\u00e4sbara.\n<\/p>\n
\n M\u00e4nniskor kan arbeta med det snabbare \u00e4n de kan g\u00f6ra med den tidigare versionen. Det best\u00e5r av alternativ som inte kr\u00e4ver en kombination mellan JavaScript och CSS och sparar mycket tid f\u00f6r oss vid produktion, laddning och slutf\u00f6rande av arbetet f\u00f6r produkten. Handl\u00e4ggningstiderna minskar ocks\u00e5 p\u00e5 grund av dess flexibilitet. Denna flexibilitet uppn\u00e5s p\u00e5 grund av dess moduler.\n<\/p>\n
\n Webbplatser som bygger med CSS 3 laddas snabbare och rankas h\u00f6gre \u00e4n webbplatser som bygger med CSS.\n<\/p>\n
\n Varje anv\u00e4ndare \u00e4r annorlunda \u00e4n andra anv\u00e4ndare s\u00e5 de har olika val; det finns m\u00e5nga webbl\u00e4sare tillg\u00e4ngliga f\u00f6r anv\u00e4ndarna att v\u00e4lja mellan s\u00e5 varje anv\u00e4ndare anv\u00e4nder en annan webbl\u00e4sare. F\u00f6r mjukvaruutvecklare \u00e4r det en stor utmaning att de bygger mjukvara som fungerar p\u00e5 alla webbl\u00e4sare.\n<\/p>\n
\n CSS-utvecklare s\u00e5g till att de byggde en CSS 3-kompatibel p\u00e5 m\u00e5nga webbl\u00e4sare, alla tidigare versioner av CSS var inte kompatibla med alla webbl\u00e4sare. M\u00e5nga webbl\u00e4sare st\u00f6der dess nya versioner \u00e4ven om den inte uppfyller W3C-standarderna.\n<\/p>\n
\n F\u00f6r problemfri designprocess kan designers anv\u00e4nda CSS 3 Generator, vilket g\u00f6r det enklare f\u00f6r kunderna. Det \u00e4r en sorts mjukvara som ger frihet och den \u00e4r kompatibel med m\u00e5nga webbl\u00e4sare.\n<\/p>\n
\n Med hj\u00e4lp av CSS 3 kan vi g\u00f6ra bakgrunden till webbplatserna l\u00e4ttare \u00e4n vi kan g\u00f6ra i dess tidigare version. Allt detta kommer att ske med hj\u00e4lp av skript och programmering.\n<\/p>\n
\n Nu med det beh\u00f6ver du inte g\u00f6ra flera bakgrunder f\u00f6r olika situationer annars, det skulle ha varit en del problem och med s\u00e5 m\u00e5nga sk\u00e4rmstorlekar, former och uppl\u00f6sningar hade det varit sv\u00e5rt.\n<\/p>\n
\n Med alternativen som finns i CSS 3 kan du g\u00f6ra m\u00e5nga saker, med den kan du st\u00e4lla in en bild som en kantlinje, du m\u00e5ste g\u00e5 till border-image-egenskapen d\u00e4r du kommer att f\u00e5 anv\u00e4nda din bild som en kantlinje. Du kan dela upp dina bilder i de nio delarna.\n<\/p>\n
\n Den erbjuder m\u00e5nga texteffekter fr\u00e5n vilka du kan v\u00e4lja en texteffekt som passar din webbplats och med skuggeffekt kan du f\u00f6rb\u00e4ttra din webbdesign och den har en ny funktion som \u00e4r k\u00e4nd som ett gr\u00e4ns\u00f6verskridande verktyg. Dessa saker var sv\u00e5ra i de tidigare versionerna av CSS.\n<\/p>\n
\n Du kan f\u00e5 ditt webbinneh\u00e5ll att flyta i kolumnerna med modulen med flera kolumner; det h\u00e4r alternativet kommer att spara tid eftersom du inte beh\u00f6ver rulla s\u00e5 mycket i horisontell eller vertikal riktning.\n<\/p>\n
\n M\u00e4nniskor vet inte hur mycket inverkan bilder och animationer g\u00f6r tillsammans med sidlayouten f\u00f6r att locka l\u00e4sare och h\u00e5lla dem p\u00e5 din sida, de borde veta det. Tidigare var m\u00f6jligheten att l\u00e4gga till och redigera bilder, tillsammans med animering, f\u00e4rre, s\u00e5 f\u00f6r att l\u00e4gga till dessa saker beh\u00f6vde CSS hj\u00e4lp av JavaScript. Med CSS 3 har detta problem inte bara \u00e5tg\u00e4rdats utan ocks\u00e5 f\u00f6rb\u00e4ttrats avsev\u00e4rt.\n<\/p>\n
\n Den har till och med ett bildfilter som inte var tillg\u00e4ngligt tidigare och som kr\u00e4vde JavaScript f\u00f6r det.\n<\/p>\n
\n CSS3-\u00f6verg\u00e5ngar anv\u00e4nds f\u00f6r att g\u00f6ra \u00e4ndringar i displayen och med den kan man \u00e4ndra olika CSS-egenskaper som bakgrundsf\u00e4rg, bredd, l\u00e4ngd, opacitet och annat med hj\u00e4lp av \u00f6verg\u00e5ngseffekter. Det ger dig m\u00f6jlighet att \u00e4ndra tillst\u00e5ndsegendoms\u00e4ndringar i CSS-v\u00e4rden som de, som \u00e4r inst\u00e4llda att h\u00e4nda p\u00e5 \n Funktionstestversionen av CSS 3 \u00e4r mycket b\u00e4ttre \u00e4n dess tidigare versioner och anledningen \u00e4r modul\u00e4r struktur. Den h\u00e4r nya versionen av CSS \u00e4r mycket snabbare och effektivare f\u00f6r att hitta ett fel p\u00e5 en webbsida s\u00e5 det tar kortare testtid, det tog mycket tid att testa en webbdesign i de tidigare versionerna av CSS eftersom det var mycket sv\u00e5rt att hitta det faktiska problemet .\n<\/p>\n \n Det \u00e4r m\u00f6jligt i CSS 3 att g\u00f6ra testet av de enskilda modulerna och kombinera dem med hela systemet; f\u00f6rdelarna med det skulle vara ett b\u00e4ttre system, enkel reparation och kortare handl\u00e4ggningstid.\n<\/p>\n \n Det h\u00e4r alternativet \u00e4r att bygga f\u00f6r sidlayouter och inneh\u00e5ller flera alternativ f\u00f6r det. Det \u00e4r ett tv\u00e5dimensionellt system s\u00e5 det har kapacitet att hantera b\u00e5de kolumn och rad, varf\u00f6r det anses vara den mest kraftfulla funktionen i CSS 3.\n<\/p>\n \n F\u00f6r att g\u00f6ra den enkla matematiken f\u00f6r att ers\u00e4tta varje siffra eller v\u00e4rde som vi anv\u00e4nder Calc() i CSS3, \u00e4r det ett extremt effektivt ber\u00e4kningsverktyg. F\u00f6r att kunna ber\u00e4kna matematiska funktioner beh\u00f6ver vi inte dess f\u00f6rprocessorer; vi kan utf\u00f6ra matematiska funktioner som addition, subtraktion, multiplikation och division. F\u00f6rdelen med CSS \u00e4r att vi kan f\u00e5 svar p\u00e5 blandade enheter medan vi p\u00e5 preprocessor bara kunde ber\u00e4kna mixenheter n\u00e4r de hade ett fast f\u00f6rh\u00e5llande mellan dem.\n<\/p>\n \n Det \u00e4r det senaste tillskottet till CSS 3, som l\u00e4ggs till f\u00f6r att anpassa layouten p\u00e5 sidan efter de olika sk\u00e4rmstorlekarna och visningsprylarna. Det som \u00e4r bra med det \u00e4r att det inte anv\u00e4nder fl\u00f6ten och att dess beh\u00e5llarmarginal inte smulas s\u00f6nder med marginalen f\u00f6r dess information. Anv\u00e4ndare tycker att det \u00e4r enklare \u00e4n en box, det \u00e4r d\u00e4rf\u00f6r CSS 3 \u00e4r popul\u00e4rt bland anv\u00e4ndare. En annan sak som folk gillar med den \u00e4r att Flexible Box \u00e4r renare och enklare n\u00e4r det g\u00e4ller anv\u00e4ndning.\n<\/p>\n \n \u00c4ven om 3D-transformation inte \u00e4r en popul\u00e4r funktion i CSS 3, \u00e4r det fortfarande en mycket anv\u00e4ndbar och attraktiv funktion om den g\u00f6rs p\u00e5 r\u00e4tt s\u00e4tt. Med denna funktion kan vi g\u00f6ra en 3D-modul som kan anv\u00e4ndas p\u00e5 webbplatserna; det \u00e4r 2D-transformeringsalternativ med z-axeln. Translate3d, Scale3d, Rotate X, Rotate Y och Rotate Z \u00e4r dess huvudsakliga egenskaper.\n<\/p>\n \n CSS 3:s WebKit-utvecklingsteam gav 3D-transformationskoncept och det anv\u00e4ndes ett \u00e5r senare i Safari och Chrome sedan dess har det kommit l\u00e5ngt och har blivit vanligt f\u00f6r webbdesigners. Med hj\u00e4lp av det kan vi snurra n\u00e5gra element p\u00e5 webbsidan och skapa roterande karusellbilder, alla dessa alternativ \u00e4r ganska bra f\u00f6r denna programvara.\n<\/p>\n \n \u00c4ven om det inte \u00e4r ett nytt alternativ, \u00e4r det fortfarande en av de b\u00e4sta funktionerna i CSS 3 och det \u00e4r n\u00f6dv\u00e4ndigt f\u00f6r en webbdesign. F\u00f6r inte s\u00e5 l\u00e4nge sedan byggde vi separata webbplatser f\u00f6r mobil och station\u00e4r men nu byggde vi en webbplats som \u00e4r optimerad f\u00f6r b\u00e5de mobil och station\u00e4r. Dessa webbplatser anpassar sig efter olika storlek och enhet.\n<\/p>\n \n Om n\u00e5gon tror det skulle det vara sv\u00e5rt d\u00e5 han blir chockad \u00f6ver att veta att det \u00e4r v\u00e4ldigt l\u00e4tt att anv\u00e4nda den h\u00e4r funktionen. F\u00f6r att kunna anv\u00e4nda det h\u00e4r alternativet m\u00e5ste man bara bifoga CSS-stilar i ett block skyddat av en \n CSS 3 \u00e4r den mest popul\u00e4ra programvaran som anv\u00e4nds f\u00f6r att designa webbsidor, med hj\u00e4lp av dess m\u00e5nga alternativ kan du designa webbplatsen snabbare eftersom den kr\u00e4ver mindre kodning, du kan anv\u00e4nda den med l\u00e4tthet och den f\u00f6rb\u00e4ttrar webbsidornas hastighet om den \u00e4r designad med det.\n<\/p>\n \n Huvudsaken med den \u00e4r att den har m\u00f6jlighet att bryta en modul i m\u00e5nga olika sm\u00e5 bitar; detta alternativ g\u00f6r det l\u00e4ttare att anv\u00e4nda den. Med 3D-transformation kan du l\u00e4gga till n\u00e5got 3D-alternativ p\u00e5 din webbplats, med Flexbox kan vi g\u00f6ra en layout av webbplatsen som \u00e4r optimerad f\u00f6r varje sk\u00e4rmstorlek och enhet. Varje webbdesigner som vill anv\u00e4nda CSS 3 b\u00f6r k\u00e4nna till dessa funktioner.\n<\/p>\n<\/p>\n:hover<\/code>eller :focus<\/code>fastighetsv\u00e4rden under en viss tid. Du m\u00e5ste st\u00e4lla in tv\u00e5 saker f\u00f6r att f\u00e5 ut det b\u00e4sta av \u00f6verg\u00e5ngseffekten.\n<\/p>\n\n
\n 9 Funktionstestning
\n<\/h5>\n\n 10 Rutn\u00e4tslayout
\n<\/h5>\n\n
grid-template-columns<\/code>och grid-template-rows<\/code>kallas explicit rutn\u00e4t och om dina definierade rutn\u00e4t \u00e4r mindre \u00e4n faktiska rutn\u00e4t kallas dessa ytterligare rutn\u00e4t implicita rutn\u00e4t, detta implicita rutn\u00e4t genereras automatiskt.\n <\/li>\n\n 11 Calc()
\n<\/h5>\n\n 12 Flexibel l\u00e5da
\n<\/h5>\n\n 13 3D-transformation
\n<\/h5>\n\n 14 mediefr\u00e5gor
\n<\/h5>\ncode>@media rule<\/code>. N\u00e4r enstaka eller fler \u00e4n enstaka villkor \u00e4r uppfyllda code>@media rule<\/code>aktiveras varje block.\n<\/p>\n\n Slutsats
\n<\/h4>\n