శైలులు మీ చిత్రాలు మరియు ఉపయోగం చిత్రాలు శైలి
చాలా మంది ప్రజలు ఫాంట్, రంగు, పరిమాణం మరియు మరింత మారుతున్న, టెక్స్ట్ సర్దుబాటు చేయడానికి CSS ను ఉపయోగిస్తారు. కానీ అనేక మంది తరచుగా మర్చిపోతే ఒక విషయం మీరు అలాగే చిత్రాలతో CSS ఉపయోగించవచ్చు ఉంది.
చిత్రం మార్చడం
CSS మీరు చిత్రం ఎలా ప్రదర్శించాలో సర్దుబాటు అనుమతిస్తుంది. ఇది మీ పేజీలు స్థిరంగా ఉంచుకోవడానికి నిజంగా ఉపయోగపడుతుంది. అన్ని చిత్రాలను శైలులు సెట్ చేయడం ద్వారా, మీరు మీ చిత్రాల కోసం ఒక ప్రామాణిక రూపాన్ని సృష్టించండి. మీరు చేయగల కొన్ని విషయాలు:
- చిత్రాల చుట్టూ సరిహద్దు లేదా అవుట్లైన్ జోడించండి
- అనుసంధాన చిత్రాల చుట్టూ రంగు సరిహద్దుని తొలగించండి
- చిత్రాల వెడల్పు మరియు / లేదా ఎత్తు సర్దుబాటు
- డ్రాప్ నీడను జోడించండి
- చిత్రాన్ని తిప్పండి
- చిత్రం పైగా వాటా ఉన్నప్పుడు శైలులు మార్చండి
మీ చిత్రం సరిహద్దుని ఇవ్వడం ప్రారంభించడానికి ఒక గొప్ప ప్రదేశం. కానీ మీరు కేవలం సరిహద్దు కంటే ఎక్కువగా పరిగణించాలి - మీ చిత్రం యొక్క మొత్తం అంచు గురించి ఆలోచించండి మరియు అంచులు మరియు పాడింగ్లను కూడా సర్దుబాటు చేయండి. సన్నని నల్ల సరిహద్దుతో ఉన్న ఇమేజ్ బాగుంది, కానీ సరిహద్దు మరియు ఇమేజ్ మధ్య కొన్ని పాడింగ్లను జోడించడం కూడా మరింత మెరుగవుతుంది.
img {
సరిహద్దు: 1px ఘన నలుపు;
పాడింగ్: 5 px;
}
ఇది సాధ్యమైనప్పుడు ఎల్లప్పుడూ అలంకరణ-కాని చిత్రాలు లింక్ చేయడానికి మంచి ఆలోచన. కానీ మీరు చేస్తే, చాలా బ్రౌజర్లు చిత్రం చుట్టూ రంగు సరిహద్దుని జోడించాలని గుర్తుంచుకోండి. మీరు సరిహద్దుని మార్చడానికి పైన ఉన్న కోడ్ని ఉపయోగిస్తున్నప్పటికీ, మీరు లింక్పై సరిహద్దును తొలగించినా లేదా మార్చకపోయినా ఆ లింక్ భర్తీ చేస్తుంది. దీన్ని చేయటానికి మీరు ఒక CSS బాల నియమాన్ని ఉపయోగించాలి.
img> a {
సరిహద్దు: none;
}
మీరు మీ చిత్రాల ఎత్తు మరియు వెడల్పును మార్చడానికి లేదా సెట్ చేయడానికి CSS ను ఉపయోగించవచ్చు. ఇది డౌన్లోడ్ వేగం కారణంగా చిత్ర పరిమాణాలను సర్దుబాటు చేయడానికి బ్రౌజర్ను ఉపయోగించడం గొప్ప ఆలోచన కాదు, అవి మళ్లీ చిత్రాలను పునఃపరిమాణం చేయడంలో మెరుగ్గా ఉంటాయి. మరియు CSS తో మీరు మీ చిత్రాలను ప్రామాణిక వెడల్పు లేదా ఎత్తుగా సెట్ చేయవచ్చు లేదా కంటెయినర్కు సంబంధించి కొలతలు కూడా సెట్ చేయవచ్చు.
గుర్తుంచుకోండి, మీరు చిత్రాలను పునఃపరిమాణం చేసినప్పుడు, ఉత్తమ ఫలితాల కోసం, మీరు ఒక కొలత - ఎత్తు లేదా వెడల్పుని మాత్రమే పరిమాణాన్ని మార్చాలి. ఇది చిత్రం దాని కారక నిష్పత్తిని ఉంచుతుంది, అందువలన వింతగా కనిపించదు. ఇతర విలువను ఆటోకు సెట్ చేయండి లేదా కారక నిష్పత్తిని స్థిరంగా ఉంచుకోవడానికి బ్రౌజర్కు చెప్పడానికి దాన్ని వదిలివేయండి.
img {
వెడల్పు: 50%;
ఎత్తు: ఆటో;
}
CSS3 కొత్త లక్షణాలను వస్తువు-సరిపోతుందని మరియు వస్తువు-స్థానంతో ఈ సమస్యకు పరిష్కారం అందిస్తుంది. ఈ లక్షణాలతో మీరు ఖచ్చితమైన చిత్రం ఎత్తు మరియు వెడల్పును నిర్వచించగలరు మరియు కారక నిష్పత్తి ఎలా నిర్వహించాలి. ఇది మీ చిత్రాల చుట్టూ లెటర్బాక్సింగ్ ప్రభావాలను సృష్టించవచ్చు లేదా అవసరమైన పరిమాణంలో సరిపోయే విధంగా చిత్రం పొందడానికి పంటను సృష్టించవచ్చు.
CSS3 ఆబ్జెక్ట్-ఫిట్ మరియు ఆబ్జెక్ట్-స్థానం లక్షణాలు ఇంకా విస్తృతంగా మద్దతించబడలేదు, మీరు మీ చిత్రాలను సవరించడానికి ఉపయోగించే అత్యంత ఆధునిక బ్రౌజర్లలో మద్దతు ఉన్న ఇతర CSS3 లక్షణాలు కూడా ఉన్నాయి. చాలా ఆధునిక బ్రౌజర్లలో ప్రస్తుతం మీ పనిని అన్ని చిత్రాలను రొటేట్ చేయడానికి, వక్రీకరించడానికి, లేదా తరలించడానికి డ్రాప్ షాడోస్, గుండ్రని మూలలు మరియు పరివర్తనలు వంటి విషయాలు. అప్పుడు మీరు CSS పరివర్తనాలను ఉపయోగించుకోవచ్చు, చిత్రాలను మార్చడానికి, లేదా క్లిక్ చేసినప్పుడు, లేదా కొంత సమయం తర్వాత మాత్రమే మార్చండి.
నేపథ్యాలుగా చిత్రాలు ఉపయోగించడం
CSS మీ చిత్రాలతో ఫాన్సీ నేపథ్యాలు సృష్టించడానికి సులభం చేస్తుంది.
మీరు మొత్తం పేజీలో లేదా నిర్దిష్ట అంశానికి నేపథ్యాలను జోడించవచ్చు. నేపథ్యం-ఇమేజ్ ఆస్తితో పేజీలో నేపథ్య చిత్రాన్ని రూపొందించడం సులభం:
శరీరం {
నేపథ్య చిత్రం: url (background.jpg);
}
కేవలం ఒక అంశంపై నేపథ్యాన్ని ఉంచడానికి పేజీలో ఒక నిర్దిష్ట అంశానికి శరీర సెలెక్టర్ని మార్చండి.
ఒక వాటర్మార్క్ లాగా - మీరు చిత్రాలతో చేయగల మరొక ఆహ్లాదకరమైన విషయం, మిగిలిన పేజీతో స్క్రోల్ చేయని నేపథ్య చిత్రాన్ని సృష్టించడం. మీరు శైలి నేపథ్యం-అటాచ్మెంట్ని ఉపయోగిస్తారు: స్థిర; మీ నేపథ్యంతో పాటు. మీ నేపథ్యాల కోసం ఇతర ఎంపికలు నేపథ్య పునరావృత లక్షణాన్ని ఉపయోగించి అడ్డంగా, నిలువుగా పలకను తయారు చేస్తాయి.
Background-repeat వ్రాయండి: repeat-x; చిత్రం క్షితిజ సమాంతరంగా మరియు నేపథ్య పునరావృతం చేయడానికి: పునరావృతం- y; నిలువుగా కట్టాలి. మరియు మీరు background-position ఆస్తితో మీ నేపథ్య చిత్రాన్ని ఉంచవచ్చు.
మరియు CSS3 అలాగే మీ నేపథ్యాలు కోసం మరిన్ని శైలులు జతచేస్తుంది. మీరు మీ చిత్రాలను ఏ పరిమాణ నేపథ్యంకు సరిపోయేలా లేదా మీ నేపథ్యంతో విండో పరిమాణంలో స్కేల్ చేయడానికి నేపథ్య చిత్రాన్ని సెట్ చేయవచ్చు . మీరు స్థానం మార్చవచ్చు మరియు తరువాత నేపథ్య చిత్రాన్ని క్లిప్పు చేయవచ్చు. కానీ CSS3 గురించి ఉత్తమ విషయాలు ఒకటి మీరు ఇప్పుడు మరింత క్లిష్టమైన ప్రభావాలు సృష్టించడానికి బహుళ నేపథ్య చిత్రాలను పొర చేయవచ్చు.
HTML5 శైలి చిత్రాలు సహాయపడుతుంది
HTML5 లో FIGURE మూలకం పత్రం లోపల ఒంటరిగా నిలబడటానికి ఏ చిత్రాలు చుట్టూ ఉంచాలి. దాని గురించి ఆలోచించడానికి ఒక మార్గం చిత్రం అనుబంధం లో కనిపిస్తే, అప్పుడు అది FIGURE మూలకం లోపల ఉండాలి. మీరు మీ చిత్రాలకు శైలులను జోడించడానికి ఆ మూలకాన్ని మరియు FIGCAPTION మూలకాన్ని ఉపయోగించవచ్చు.