బ్రౌజర్‌లో డిజైన్ చేయండి

విషయము

• కోడ్‌తో రూపకల్పన చేయడం వల్ల ప్రయోజనాలు
• మొదట డేటా
• మొబైల్ మంచితనం ఉచితంగా
• ఉమ్మడి భాషను కనుగొనడం
• వేగంగా నేర్చుకోండి
• వేగవంతమైన పునరావృతం
• ప్రారంభించడానికి వేగవంతమైన సమయం
• HTML5 ఎందుకు?
• మాయా డేటా- లక్షణం
• CSS3 - ఇది కొత్త ఫోటోషాప్
• సాస్ + కంపాస్: అద్భుతంగా రుచికరమైనది
• j క్వెరీ: ఓహ్, అవును
• ముసాయిదా
• తుది ఆలోచనలు

ఈ వ్యాసం మొట్టమొదట .net మ్యాగజైన్ యొక్క 235 సంచికలో కనిపించింది - వెబ్ డిజైనర్లు మరియు డెవలపర్‌ల కోసం ప్రపంచంలోనే అత్యధికంగా అమ్ముడైన పత్రిక.

నేను ఎన్నడూ అవసరం కంటే ఎక్కువ పని చేయటానికి పెద్ద అభిమానిని కాదు. నన్ను లేదా నా బృందాన్ని మరింత ప్రభావవంతం చేసే సామర్థ్యం ఆధారంగా నేను పద్ధతులు మరియు సాధనాలను అంచనా వేస్తాను. వారు ఎంత త్వరగా పని చేసే ఉత్పత్తికి మమ్మల్ని తీసుకుంటారు? వారు కమ్యూనికేట్ చేయడంలో ఎంత ప్రభావవంతంగా ఉంటారు? వారు మన దారికి దూరంగా ఉంటారా?

సంవత్సరాలుగా, నేను నా డిజైన్ ప్రక్రియ మరియు సాధనాలను సర్దుబాటు చేసాను. నేను అలా కొనసాగిస్తానని imagine హించాను. ఇది సాంకేతికత మరియు వెబ్ కోసం రూపకల్పన యొక్క స్వభావం. ఈ పరిశ్రమ నిరంతరం అభివృద్ధి చెందుతోంది; మా ప్రక్రియ మరియు సాధనాలు కూడా అభివృద్ధి చెందాలి.

HTML5 మరియు CSS3 డిజైన్ ప్రాసెస్‌ను అప్‌స్ట్రీమ్‌లోకి మార్చడాన్ని సులభతరం చేస్తాయి - ఫోటోషాప్ నుండి దూరంగా మరియు మరింత జీవన, శ్వాస రూపకల్పన వైపు. ఫౌండేషన్, బూట్‌స్ట్రాప్ మరియు j క్వెరీ వంటి సాధనాలు మీ డిజైన్ ప్రాసెస్‌ను మరింత చేరుకోగలిగేలా చేయడానికి మరింతగా కదిలిస్తాయి.

కోడ్‌తో రూపకల్పన చేయడం వల్ల ప్రయోజనాలు

మొదట, నేను మీ వర్క్‌ఫ్లో నుండి ఫోటోషాప్ లేదా ఇతర విజువల్ డిజైన్ ఎడిటర్‌ను వదలమని సూచించను. బదులుగా, ఆ డిజైన్‌ను కోడ్‌లోకి తరలించడం వల్ల కలిగే ప్రయోజనాలపై నేను దృష్టి పెడతాను.

మొదట డేటా

HTML తో రూపకల్పన గురించి నేను ఎల్లప్పుడూ ఇష్టపడే విషయం ఏమిటంటే ఇది డేటా-మొదటి కోణం నుండి ఆలోచించడాన్ని ప్రోత్సహిస్తుంది. దీనికి విరుద్ధంగా, ఇల్లస్ట్రేటర్, ఓమ్నిగ్రాఫిల్ లేదా బాల్సామిక్ వంటి డ్రాయింగ్ ప్రోగ్రామ్‌లను ఉపయోగించి, మీరు ఒక పెట్టెతో ప్రారంభించి డేటాతో నింపండి.

HTML లో మీరు DOM (డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్) ను నిర్మిస్తారు, ఇది విషయాల పట్టికను నిర్మించడం లాంటిది. ఇది అర్ధవంతమైన సోపానక్రమాలతో నిజమైన సమాచార రూపకల్పనకు తిరిగి వస్తుంది. కొత్త సెమాంటిక్ అంశాల చేరికతో HTML5 ఒక అడుగు ముందుకు వేస్తుంది: వ్యాసం, విభాగం, శీర్షిక, ప్రక్కన, ఫుటరు మరియు మొదలైనవి. ఈ డేటా-ఫస్ట్ విధానం మొబైల్ ఫస్ట్, ప్రతిస్పందించే డిజైన్లతో చక్కగా మిళితం చేస్తుంది.

మొబైల్ మంచితనం ఉచితంగా

మీరు దీన్ని చదువుతుంటే, మీరు మొబైల్ కోసం రూపకల్పన చేస్తున్నారు. మరియు మీరు ఒక రూపం లేదా రెండు రూపకల్పన చేయబోయే అవకాశాలు ఉన్నాయి. HTML5 తో, మీరు అదృష్టవంతులు. HTML5 కి ముందు, మీ ఇన్‌పుట్ రకాలు చాలావరకు టెక్స్ట్ లేదా పాస్‌వర్డ్ ఫీల్డ్. HTML5 అనేక అదనపు ఇన్పుట్ రకాలను పరిచయం చేసింది, వీటిలో:

input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">

ఈ అదనపు, ప్రత్యేకమైన ఇన్‌పుట్ రకాలు గురించి నిజంగా అద్భుతం ఏమిటంటే, iOS మరియు Android లోని మొబైల్ బ్రౌజర్‌లు వాటిని గుర్తించి, సందర్భోచితంగా తెలిసిన కీబోర్డ్‌ను స్వయంచాలకంగా మార్పిడి చేస్తాయి - ప్రత్యేకమైన j క్వెరీ ప్లగిన్లు లేదా హక్స్ అవసరం లేకుండా. ఓహ్, మరియు మీ బ్రౌజర్‌కు తెలియకపోతే ఇన్పుట్ రకం = "ఇమెయిల్"> అప్పుడు, ఇది టెక్స్ట్ ఇన్పుట్కు డిఫాల్ట్ అవుతుంది.

ఉమ్మడి భాషను కనుగొనడం

“మా డిజైనర్లు మరియు డెవలపర్లు ఒకే భాషలో ఎలా పని చేయవచ్చనేది అద్భుతంగా ఉంది” - జాన్ డ్రాగో, ఇన్ఫ్లెక్షన్ వద్ద అప్లికేషన్ డెవలపర్.

ఇది తెలిసి ఉందో లేదో చూడండి. నేను రూబీ, పైథాన్, జావా లేదా .NET లో నా చుట్టూ సర్కిల్‌లను కోడ్ చేయగల అర డజను సర్వర్-సైడ్ అప్లికేషన్ దేవ్‌లతో సమావేశ గదిలో ఉన్నాను. నేను మాత్రమే డిజైనర్. నా సూచనలు కొన్ని మొదట్లో అమలు చేయడం చాలా క్లిష్టంగా ఉన్నాయని కొట్టిపారేశాయి. నేను వైట్‌బోర్డ్ వరకు నడుస్తూ, డిజైన్‌ను ఎలా అమలు చేయవచ్చో బోర్డులో కొన్ని HTML మరియు CSS రాయడం ప్రారంభించాను. అకస్మాత్తుగా సంభాషణ స్వరం మారుతుంది మరియు డెవలపర్‌లలో ఒకరు అయిష్టంగానే, “సరే, అవును - మేము ఆ విధంగా చేస్తే, అది పని చేయగలదు.”

నా డిజైన్ ప్రాసెస్‌ను కోడ్‌లోకి తరలించడం డెవలపర్‌లతో సంభాషణలను మెరుగుపరిచింది. మీ డిజైన్లను కోడ్‌లో ఎలా రూపొందించాలో తెలుసుకోవడం ద్వారా అదనపు గౌరవం లభిస్తుంది. ఆ గౌరవాన్ని సంపాదించడానికి మీరు నిపుణులు కానవసరం లేదు. నా HTML మరియు CSS నైపుణ్యాలు రాక్ దృ solid ంగా ఉన్నప్పటికీ, నా జావాస్క్రిప్ట్ నైపుణ్యాలు ఉత్తమమైనవి. నేను దానిని అంగీకరించడానికి సిగ్గుపడను. అయినప్పటికీ, ఫ్రంటెండ్ లేదా సర్వర్-సైడ్ డెవలపర్‌లతో కలిసి పనిచేసేటప్పుడు, మనం ఒక సాధారణ భాషలో మాట్లాడగలము, లేదా అర్ధంతరంగా కలుసుకోగలము అనేది చాలా పెద్ద ప్రయోజనం.

వేగంగా నేర్చుకోండి

వైర్‌ఫ్రేమ్‌లు మరియు దృశ్య మిశ్రమాలు ప్రణాళికలో సహాయపడతాయి, అయితే ఈ స్టాటిక్ కళాఖండాలు సైద్ధాంతిక. ఒకరితో పరస్పర చర్యను వివరించడానికి మీరు ఎన్నిసార్లు ప్రయత్నించారు, వారు ప్రతిస్పందించడానికి మాత్రమే, “నేను చూడవలసి ఉంటుందని నేను ess హిస్తున్నాను.” మీరు ఎంత త్వరగా ఒక నమూనాకు చేరుకుంటారో, ప్రజలు సంభాషించగలిగేది, మీరు డిజైన్‌ను త్వరగా అనుభవించవచ్చు మరియు ఆలోచనలు పని చేస్తాయో లేదో చూడవచ్చు.

వేగవంతమైన పునరావృతం

చివరిసారిగా ఉత్పత్తికి పంపిన తుది రూపకల్పన మీ ఫోటోషాప్ కంప్‌తో సరిగ్గా సరిపోతుంది? దాదాపు ఎప్పుడూ కాదు. డిజిటల్ ఉత్పత్తి రూపకల్పనతో, మార్పు నిరంతరం జరుగుతుంది. ఇంకా, డజను స్క్రీన్‌లలో మీ శీర్షికల పరిమాణాన్ని 22pt నుండి 24pt కి పెంచడం వంటి మార్పులు ఫోటోషాప్‌లో గంటలు పట్టవచ్చు. స్మార్ట్ ఆబ్జెక్ట్స్ మీకు ఫోటోషాప్‌లో కొంత స్థాయి ఆబ్జెక్ట్-ఓరియెంటెడ్ డిజైన్‌ను ఇస్తాయి. దురదృష్టవశాత్తు, నాకు తెలిసిన చాలా మంది విజువల్ డిజైనర్లు స్మార్ట్ ఆబ్జెక్ట్‌లను తగినంతగా ఉపయోగించరు. CSS తో, ఇది రూపకల్పనకు మరింత క్రమబద్ధమైన విధానాన్ని ప్రోత్సహిస్తుంది కాబట్టి, టైపోగ్రాఫిక్ మార్పులు గంటలకు బదులుగా నిమిషాలు పడుతుంది.

మీ అన్ని బటన్లలో సరళ ప్రవణతలను మార్చడం గురించి ఏమిటి? లేదా సరిహద్దు పరిమాణం? స్క్వేర్డ్ మూలల నుండి 2px గుండ్రని వాటికి మార్చడం ఎలా? ఫోటోషాప్‌లో, దీనికి గంటలు పట్టవచ్చు మరియు మీరు ఇంకా కోడ్ చేయాలి. కోడ్‌లో రూపకల్పన చేయగల సామర్థ్యం దృశ్య రూపకల్పనపై మళ్ళించడం కోసం ఫోటోషాప్‌లోకి తిరిగి వెళ్ళే రౌండ్ ట్రిప్‌ను నివారించడంలో సహాయపడుతుంది. మీరు CSS3 మరియు సాస్‌లను ఉపయోగించి అప్‌స్ట్రీమ్‌ను కోడ్‌లోకి తరలించినప్పుడు (ఈ వ్యాసంలో నేను తరువాత కవర్ చేస్తాను) అవి నిజ సమయంలో జరగవచ్చు మరియు కొద్ది నిమిషాలు మాత్రమే పడుతుంది.

ప్రారంభించడానికి వేగవంతమైన సమయం

సంవత్సరాలుగా, నేను నా డిజైన్ వర్క్‌ఫ్లో ఎక్కువ భాగాన్ని అప్‌స్ట్రీమ్‌లోకి కోడ్‌గా మార్చినప్పుడు, నేను నిజమైన అభివృద్ధిని అనుభవించాను - మార్కెట్‌కి సమయం 20 నుండి 30 శాతం తగ్గింపు. నేను దీన్ని ఎంత ఎక్కువ చేస్తే, తక్కువ సమయం నేను నకిలీ ప్రయత్నాలను గడుపుతాను. నేను తక్కువ చక్రాలను ఫోటోషాప్ లేదా బాణసంచాలోకి వెళ్లి, ఆ పనిని కోడ్‌లో పునరావృతం చేస్తున్నాను.

ఏదో ఒక సమయంలో డిజైన్ కొన్ని రకాల బ్యాకెండ్‌తో ఇంటర్‌ఫేస్ చేయాలి, అది CMS, రైల్స్ అనువర్తనం లేదా మరేదైనా. నా డిజైన్ పని చాలా కోడ్‌లో ఉన్నందున, ఏకీకరణ తరువాత కంటే త్వరగా జరుగుతుంది. కొన్ని సంవత్సరాల క్రితం, నా ఖాతాదారులలో ఒకరైన పాయింట్‌రోల్, ప్రోటోటైప్ నుండి ఐదు రోజుల్లో ఉత్పత్తికి వెళ్ళాడు.

HTML5 ఎందుకు?

HTML యొక్క మునుపటి సంస్కరణల కంటే HTML5 సులభం. ఉదాహరణకు పత్రం రకం ప్రకటనను తీసుకోండి. HTML యొక్క మునుపటి సంస్కరణల్లో, ది డాక్టిప్ ఇలాంటివి చూసారు:

! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">

మరియు ఆరు వేర్వేరు వెర్షన్లు ఉన్నాయి. అదృష్టవశాత్తూ HTML5 డాక్టిప్ ఇలా ఉంది:

! DOCTYPE HTML>

తీవ్రంగా. అంతే. ఆశ్చర్యకరంగా సులభం.

ప్రామాణిక HTML పేజీని సృష్టించేటప్పుడు, శీర్షిక, ప్రధాన కంటెంట్ ప్రాంతం, సైడ్‌బార్ మరియు ఫుటరు వంటి అనేక సాధారణ అంశాలు ఉన్నాయి. ఇంతకు ముందు మీరు ఇలాంటివి చూశారని నేను ఖచ్చితంగా అనుకుంటున్నాను:

div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>

అక్కడ మామూలు నుండి ఏమీ లేదు. కానీ కంటెంట్‌తో నిండిన తర్వాత, ఈ టెంప్లేట్ డివి సూప్‌కు మారుతుంది. దీనికి విరుద్ధంగా, HTML5 యొక్క క్రొత్త అర్థ అంశాలతో, మీరు చాలా సరళంగా మరియు సులభంగా స్కాన్ చేయగలదాన్ని పొందుతారు,

header> nav> / nav> / header> article> ప్రక్కన> / ప్రక్కన> / వ్యాసం> ఫుటరు> / ఫుటర్>

దానిని చూడండి. అర్ధమయ్యే ఏదో.

మాయా డేటా- లక్షణం

HTML5 మరొక అద్భుతమైన హుక్‌తో వస్తుంది, ఇది మీ స్వంత అర్థ అర్థాన్ని రూపొందించే సామర్థ్యాన్ని ఇస్తుంది: ది సమాచారం-. ఇంతకు ముందు, మీరు DOM మూలకానికి అర్ధవంతమైనదాన్ని కేటాయించాలనుకుంటే, మీరు ID లు, తరగతులు మరియు పాత్రలకు పరిమితం అయ్యారు.

దురదృష్టవశాత్తు, ID లు ప్రత్యేకంగా ఉండాలి. తరగతులు సార్వత్రికమైనవి (యిప్పీ!), కానీ వాటిని ఉపయోగించడం త్వరగా గందరగోళంగా మారుతుంది. పాత్రలు ARIA కి ముఖ్యమైన అర్ధాన్ని అందించే తక్కువ ఉపయోగించని ఆస్తి. ఇటీవల, నేను ఇన్ఫ్లెక్షన్ వద్ద అభివృద్ధి చేస్తున్న ఈవెంట్ ట్రాకింగ్ అనలిటిక్స్ ప్లాట్‌ఫామ్ కోసం డేటాను ఉపయోగిస్తున్నాను.మేము మా డిజైన్లను పరీక్షించడానికి పెద్ద అభిమానులు. అనువర్తనాలు లేదా ఎక్కువ ఇంటరాక్టివిటీ ఉన్న పేజీలలో పనిచేసేటప్పుడు, పేజీలో కస్టమర్ ఎంగేజ్‌మెంట్ గురించి మరింత అవగాహన కలిగి ఉండాలని మేము కోరుకుంటున్నాము.

నమోదు చేయండి సమాచారం-. దానితో మీరు ‘మీ స్వంతంగా నిర్వచించు’ అనే మోడల్‌లోకి కేటాయించవచ్చు, వెంట వెళ్ళవచ్చు మరియు హుక్ చేయవచ్చు. కాబట్టి, ఉదాహరణకు, మీరు దీన్ని చేయవచ్చు:

input type = "button" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "register "> ఇన్పుట్ రకం =" బటన్ "డేటా-ఐడి =" లింక్డ్ఇన్ "డాటరేజియన్ =" ప్రధాన "డేటా-ఈవెంట్ =" రిజిస్టర్ ">

మేము జావాస్క్రిప్ట్‌తో వినేవారిని పేజీకి అటాచ్ చేయవచ్చు మరియు కస్టమర్ ఎప్పుడైనా కదిలించినప్పుడు లేదా ఈ బటన్‌ను క్లిక్ చేసినప్పుడు, మేము ఆ కార్యాచరణను ట్రాక్ చేయవచ్చు. ఎవరైనా ట్విట్టర్‌తో OAuth ద్వారా నమోదు చేసుకున్నట్లు మాత్రమే ట్రాక్ చేయగలిగే బదులు, వారు ఫేస్‌బుక్, తరువాత ట్విట్టర్, తరువాత లింక్డ్‌ఇన్, మరియు చివరికి వారి OAuth మోడల్ కోసం ట్విట్టర్‌ను ఎంచుకోవాలని నిర్ణయించుకున్నారని మనం చూడవచ్చు.

దీన్ని Pinterest వంటి సైట్‌కు లేదా ఆసక్తిని బట్టి క్రమాన్ని మార్చడానికి వినియోగదారులు పలకలను లాగడం మరియు వదలడం వంటి కొత్త మైస్పేస్ డిజైన్‌కు విస్తరించడం గురించి ఆలోచించండి. లేదా వారు ఆసక్తి లేని పలకలను దాచవచ్చు. ది సమాచారం- మీరు నిర్వచించగలిగే విషయాలకు సెమాంటిక్ అర్ధం యొక్క అదనపు పొరను జోడించడానికి లేదా కేటాయించడానికి లక్షణం మిమ్మల్ని అనుమతిస్తుంది. అజాక్స్‌పై ఎక్కువగా ఆధారపడే సైట్‌లు మరియు అనువర్తనాల కోసం ఇది అపరిమిత అవకాశాలను తెరుస్తుంది.

CSS3 - ఇది కొత్త ఫోటోషాప్

CSS3 నేపథ్య చిత్రాలు, ముక్కలు మరియు అప్రసిద్ధమైన ‘స్లైడింగ్ డోర్స్’ టెక్నిక్ అవసరమయ్యే డిజైనింగ్ లుక్ అండ్ ఫీల్ యొక్క సరికొత్త స్థాయిని తీసుకువచ్చింది. కృతజ్ఞతగా, ఇదంతా గతానికి సంబంధించిన విషయం.

సరళ ప్రవణత, గుండ్రని మూలలు, చక్కని అక్షర ప్రెస్ ప్రభావాన్ని ఇచ్చే టెక్స్ట్ నీడ మరియు హోవర్‌పై మెరుపుతో ఫాన్సీ బటన్‌ను తయారు చేద్దాం. ఈ పద్ధతులను నేర్చుకోవడం చాలా దూరం వెళ్తుంది. వాటిలో ప్రతి ఒక్కటి స్వతంత్రంగా లేదా వివిధ కలయికలలో ఈ రోజు వెబ్‌లో ట్రెండింగ్‌లో ఉన్న ప్రస్తుత విజువల్ హాట్‌నెస్‌లో దేనినైనా తీసివేయవచ్చు.

మొదట, డిఫాల్ట్‌కు కొన్ని సర్దుబాట్లు చేద్దాం బటన్> మరియు ఇన్పుట్ రకం = "సమర్పించు"> అంశాలు. మీరు ప్రామాణిక CSS రీసెట్‌లలో ఒకదాన్ని ఉపయోగిస్తున్నారని uming హిస్తే, మేము కొంచెం పరిమాణం మరియు శ్వాస గదిని జోడిస్తాము.

/ * బటన్లు బటన్లు, ఎవరికి బటన్లు వచ్చాయి. =================================== * * / బటన్, ఇన్పుట్ [type = "submit"] {ఎత్తు: 2.7em; పాడింగ్: .4 ఎమ్ .7 ఎమ్; లైన్-ఎత్తు: 1.9; }

రక్షించండి: సమర్పించిన బటన్లు మరియు ఇన్‌పుట్‌లు రెస్టైల్‌కు గమ్మత్తుగా ఉంటాయి. పంక్తి-ఎత్తును 1.6 లేదా అంతకంటే ఎక్కువకు సర్దుబాటు చేయడం ద్వారా నేను కనుగొన్నాను, మీరు లోపల అదనపు డివి లేదా స్పాన్ అవసరమయ్యే హాక్‌ను నివారించవచ్చు బటన్> ట్యాగ్.

ఇప్పుడు మేము మా బటన్ సమస్యను ‘పరిష్కరించాము’, మనం సృష్టించవచ్చు .btn గుండ్రని మూలలు, సరళ ప్రవణత, రూపురేఖలు మరియు ఆ లెటర్‌ప్రెస్ రూపంతో మాకు చక్కని శుభ్రమైన బటన్‌ను ఇవ్వడానికి తరగతి.

.btn {display: ఇన్లైన్-బ్లాక్; అంచు: 1px ఘన # d4d4cc; -మోజ్-బోర్డర్-వ్యాసార్థం: 4 పిక్స్‌; -వెబ్కిట్-బోర్డర్-వ్యాసార్థం: 4 పిక్స్‌; సరిహద్దు-వ్యాసార్థం: 4px; పాడింగ్: .4 ఎమ్ .7 ఎమ్; నేపథ్యం: # edeff2; నేపథ్యం: -వెబ్కిట్-ప్రవణత (సరళ, 0% 0%, 0% 100%, (# ఫీఫ్) నుండి, కలర్-స్టాప్ (0.55, # ఎడెఫ్ 2), నుండి (# e4e6e9)); నేపథ్యం: -మోజ్-లీనియర్-గ్రేడియంట్ (సెంటర్ టాప్, # ఫీఫ్, # ఎడెఫ్ 2 55%, # ఇ 4 ఇ 6 ఇ 9); -మోజ్-బాక్స్-షాడో: rgba (160,172,187, .7) 0 0 .2em 0; -వెబ్కిట్-బాక్స్-నీడ: rgba (160,172,187, .7) 0 0 .2em 0; box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; రంగు: # 6 సి 7786; font-size: 1.1em; టెక్స్ట్-షాడో: #fefefe 1px 0 1px; లైన్-ఎత్తు: 1.375em; కర్సర్: పాయింటర్; }

ఆపై ఉపయోగించి సూక్ష్మమైన గ్లోతో మంచి హోవర్ ప్రభావం బాక్స్-నీడ పద్ధతి:

.btn: హోవర్, .btn: ఫోకస్ {-moz-box-shadow: # 129ceb 0px 0px 2px; -వెబ్కిట్-బాక్స్-షాడో: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; నేపథ్యం: # e6e9eb; నేపథ్యం: -వెబ్కిట్-ప్రవణత (సరళ, 0% 0%, 0% 100%, (# f7f7f7) నుండి, కలర్-స్టాప్ (0.55, # f6f6f7), నుండి (# e6e9eb)); నేపథ్యం: -మోజ్-లీనియర్గ్రాడియంట్ (సెంటర్ టాప్, # f7f7f7, # f6f6f7 55%, # e6e9eb); రంగు: # 45484 బి; text-shadow: rgb (255,255,255) 1px 1px 0; అంచు-రంగు: # c9c9c0; }

ఇప్పుడు, నేను లీనియర్ ప్రవణత కోడ్ రాయడానికి పెద్ద అభిమానిని కాదు. ఇది చాలా కాలం మరియు గందరగోళంగా ఉంది. మీరు గమనిస్తే, నేను సంస్కరణను మాత్రమే చేర్చాను -మోజ్, -వెబ్కిట్, మరియు ప్రామాణిక మోడల్. మీరు -o మరియు -ms సంస్కరణలను చేర్చాలనుకుంటే, మీరు కోడ్‌ను రెట్టింపు చేయాలి.

మరో రెండు ఎంపికలు ఉన్నాయి. ఒకటి CSS3 జనరేటర్; కలర్‌జిల్లాతో సహా వెబ్‌లో చాలా అందుబాటులో ఉన్నాయి. మీరు మీ ఆటను కొంచెం పెంచాలనుకుంటే, సాస్‌లోకి డైవింగ్ చేయడాన్ని పరిగణించండి: కంపాస్‌తో కలిపి, ఇది ఒక భగవంతుడు.

సాస్ + కంపాస్: అద్భుతంగా రుచికరమైనది

మీరు CSS4 యునికార్న్ ఎడిషన్ కోసం ఆశించడం ఆపవచ్చు. ఇది ఇక్కడ ఉంది మరియు దీనిని సాస్ + కంపాస్ అని పిలుస్తారు. సాస్ అంటే వాక్యనిర్మాణ అద్భుత స్టైల్‌షీట్‌లు: మీరు వేరియబుల్స్, మిక్సిన్లు, ఎక్స్‌టెండర్లు మరియు ఇతర గూడీస్ యొక్క అదనపు ఆనందాలతో CSS3 యొక్క అన్ని సాంప్రదాయ ప్రయోజనాలను వారసత్వంగా పొందుతారు.

నీలిరంగు నీడలో 30 కంటే ఎక్కువ వైవిధ్యాలను కలిగి ఉన్న 5,000-లైన్ CSS ఫైల్‌ను నేను ఇటీవల రీఫ్యాక్టర్ చేసాను. సాస్‌తో, నేను ఈ కోడ్‌తో ప్రతి వైవిధ్యాన్ని భర్తీ చేసాను:

రంగు: $ నీలం;

నిర్వచించడం ద్వారా $ నీలం నా _variables.scss ఫైల్, ప్రతి CSS లేదా SCSS ఫైల్ సూచించగల డిఫాల్ట్ రంగును నేను సృష్టించగలను. CSS వ్రాసే ఎవరైనా ఉపయోగించవచ్చు $ నీలం మరియు ఐడ్రోపర్ ఉపయోగించడం, హెక్స్ కోడ్ లేదా RGB, RGBA లేదా HSL రంగును కనుగొనడం గురించి ఆందోళన చెందాల్సిన అవసరం లేదు.

ఆ సరళ ప్రవణత కోడ్ గుర్తుందా? కోడ్ యొక్క అనేక పంక్తులను వ్రాయడానికి బదులుగా, దీని గురించి ఎలా:

background నేపథ్యాన్ని చేర్చండి (లీనియర్-ప్రవణత (# b1cfdc, # 7a9cac));

సాస్ మరియు కంపాస్ భారీ లిఫ్టింగ్ చేయనివ్వండి మరియు మీ కోసం సరైన వాక్యనిర్మాణాన్ని రూపొందించండి: పూర్తయింది. మీకు రంగు యొక్క ముదురు లేదా తేలికైన సంస్కరణ కావాలి. మీరు ఫోటోషాప్‌లో ఐడ్రోపర్ చుట్టూ తిరగవచ్చు లేదా సాస్‌లో తేలికైన / ముదురు ఆదేశాలను ఉపయోగించవచ్చు:

background నేపథ్యాన్ని చేర్చండి (సరళ-ప్రవణత (ముదురు ($ సాహిత్యం, 2%), ముదురు ($ ఆఫ్-వైట్, 5%));

అది 2% చీకటితో సరళ ప్రవణతను సృష్టిస్తుంది $ లైట్-గ్రే మరియు 5% చీకటిగా ఉంది ఆఫ్-వైట్. వాయిల్! మీకు HEX లేదా RGB సంకేతాలు కూడా అవసరం లేదు.

j క్వెరీ: ఓహ్, అవును

నేను చేయడానికి ఒప్పుకోలు ఉంది. జావాస్క్రిప్ట్ నన్ను బెదిరించేది. అప్పుడు నేను j క్వెరీని కనుగొన్నాను. నేను జావాస్క్రిప్ట్ గురువు అని చెప్పుకోను, కాని నేను j క్వెరీని ఉపయోగించాల్సిన ఏ విధమైన పరివర్తన లేదా ఫంక్షన్ గురించి అయినా ఉపసంహరించుకోగలనని నాకు చాలా నమ్మకం ఉంది.

ఉదాహరణకు, క్రొత్త సంఖ్యను జోడించు లింక్‌ను క్లిక్ చేయడం ద్వారా ద్వితీయ ఫోన్ నంబర్ ఇన్‌పుట్‌ను తెరపై ప్రదర్శించే సామర్థ్యాన్ని తీసుకోండి. J క్వెరీని ఉపయోగించి, మీరు దీన్ని వ్రాస్తారు:

// - ప్రోగ్రెసివ్ రివీల్ - // $ (’. కొత్త-సంఖ్య’). క్లిక్ చేయండి (ఫంక్షన్ () {$ (’. Alt-number’). ఫేడ్ఇన్ (’ఫాస్ట్’);});

మరింత అధునాతనమైన వాటి కోసం చూస్తున్నారా? దీనికి ప్లగ్-ఇన్ ఉండవచ్చు. ప్రాథమిక ప్రవర్తనలు సులభం మరియు సంక్లిష్టమైనవి j క్వెరీతో చేరతాయి.

ముసాయిదా

ఈ రోజు అత్యంత బలమైన రెండు ఫ్రేమ్‌వర్క్‌లు ఫౌండేషన్ మరియు బూట్‌స్ట్రాప్. ఇప్పుడు, మీరు CSS ఫ్రేమ్‌వర్క్‌లను కొట్టివేసే ముందు, నేను మిమ్మల్ని ఒక విషయం అడుగుతాను. మీరు j క్వెరీని ఉపయోగిస్తున్నారా? రూబీ ఆన్ రైల్స్? జంగో? అన్ని చట్రాలు.

J క్వెరీ మరియు రోఆర్ మాదిరిగానే, ఫౌండేషన్ మరియు బూట్స్ట్రాప్ మనం పదే పదే చేసే పనుల సంఖ్యను గుర్తించకుండా పుట్టింది (రీసెట్‌లు, టైపోగ్రఫీ, గ్రిడ్లు, రూపాలు, బటన్లు, నావ్ మరియు జాబితాలు వంటివి). ఫౌండేషన్ మరియు బూట్స్ట్రాప్ రెండూ సహాయక తరగతుల ఉపయోగం ద్వారా ప్రతిస్పందించే డిజైన్లకు మద్దతునిస్తాయి. రెండూ చక్కగా డాక్యుమెంట్ చేయబడ్డాయి మరియు రహదారి పరీక్షించబడ్డాయి, కాబట్టి మీరు వాటిని విశ్వాసంతో ఉపయోగించవచ్చు.

రెండింటి మధ్య ఒక ముఖ్యమైన వ్యత్యాసం: బూట్స్ట్రాప్ CSS ప్రిప్రాసెసింగ్ కోసం తక్కువ వ్యవస్థపై ఆధారపడి ఉంటుంది, అయితే ఫౌండేషన్ సాస్ మీద ఆధారపడి ఉంటుంది. సాస్ దాని అదనపు సామర్ధ్యాల కారణంగా నేను తక్కువ కంటే ఇష్టపడతాను, కాని సాస్ మరియు తక్కువ స్క్వాష్ సాంప్రదాయ CSS రెండూ ముక్కలుగా ఉంటాయి.

ఫ్రేమ్‌వర్క్‌లపై చివరి ఆలోచన. వేరొకరి ఫ్రేమ్‌వర్క్ యొక్క అదనపు ఉబ్బరాన్ని వారసత్వంగా పొందకూడదనుకునేవారికి, ఇప్పటికే ఉన్నదాన్ని ఎంచుకొని దానిని ఎముకలకు తీసివేయడం లేదా మీ స్వంతంగా చుట్టడానికి చెర్రీ ఎంచుకోవడం వంటివి పరిగణించండి. ఎలాగైనా, ప్రతిసారీ మొదటి నుండి ప్రారంభించడానికి నిజంగా ఎటువంటి కారణం లేదు.

తుది ఆలోచనలు

మీ డిజైన్ చివరకు ఎలా మారుతుందనే దానిపై ఎక్కువ నియంత్రణ కావాలా? మరిన్ని ప్రాసెస్‌లను అప్‌స్ట్రీమ్‌కు కోడ్‌కి తరలించండి. HTML5 చివరకు DOM కి కొంత భావాన్ని తెస్తుంది. అర్ధంలేని వాటికి మంచి ప్రవర్తన డాక్టిప్s మరియు డివిటిస్. CSS3 కొత్త ఫోటోషాప్: లీనియర్ ప్రవణతలు, బోర్డర్‌రాడియస్ మరియు బాక్స్-షాడోస్ FTW! మరియు బూట్‌స్ట్రాప్, ఫౌండేషన్, సాస్ మరియు j క్వెరీ వంటి సాధనాలతో, డిజైన్‌ను అప్‌స్ట్రీమ్‌కు కోడ్‌కు తరలించడం అంత సులభం కాదు.

క్రియేటివ్ బ్లాక్ వద్ద HTML5 ఓవర్ యొక్క 55 అద్భుతమైన ఉదాహరణలను కనుగొనండి.