html ഉദാഹരണങ്ങളിൽ വൃത്താകൃതിയിലുള്ള കോണുകളുള്ള ബ്ലോക്കുകൾ. ഫോട്ടോഷോപ്പിൽ ഒരു ഫോട്ടോയുടെ കോണുകൾ റൗണ്ട് ചെയ്യുന്നു

ആശംസകൾ, സുഹൃത്തുക്കളെ. ഈ ലേഖനം തികച്ചും സമർപ്പിതമാണ് ജനപ്രിയ വിഷയംപുതിയ വെബ്‌മാസ്റ്റർമാർക്കിടയിൽ - വൃത്താകൃതിയിലുള്ള CSS കോണുകൾ . ചിത്രങ്ങളൊന്നും ഉപയോഗിക്കാതെ CSS മാത്രം ഉപയോഗിച്ച് വെബ്‌സൈറ്റ് ഘടകങ്ങളുടെ വൃത്താകൃതിയിലുള്ള കോണുകൾ എങ്ങനെ നിർമ്മിക്കാം എന്നതാണ് ഞാൻ കവർ ചെയ്യാൻ ശ്രമിക്കുന്ന ചോദ്യങ്ങൾ.

IN ഈ രീതിഗുണവും ദോഷവും ഉണ്ട്. പ്രയോജനങ്ങൾ, തീർച്ചയായും, ഏതെങ്കിലും ഉപയോഗിച്ച് ചിത്രങ്ങൾ സൃഷ്ടിക്കേണ്ട ആവശ്യമില്ല എന്നതാണ് ഗ്രാഫിക്സ് എഡിറ്റർ, അവ സെർവറിലേക്ക് അപ്‌ലോഡ് ചെയ്യുക, തുടർന്ന് അവയെ ക്രമീകരിക്കുക CSS ഉപയോഗിക്കുന്നുആവശ്യമുള്ള ഇഫക്റ്റ് സൃഷ്ടിക്കാൻ ആവശ്യമായ സ്ഥലങ്ങളിലേക്ക്. ഈ സാഹചര്യത്തിൽ അത് സൃഷ്ടിക്കേണ്ടത് ആവശ്യമാണ് അധിക ഘടകങ്ങൾ HTML കോഡിൽ, കൂടാതെ എഴുതുക വ്യക്തിഗത പ്രോപ്പർട്ടികൾഓരോന്നിനും.

മൈനസുകളെ സംബന്ധിച്ചിടത്തോളം, ഒരു പ്രശ്നം ഇവിടെ ശ്രദ്ധിക്കാം - ഈ പ്രോപ്പർട്ടി എല്ലാ വെബ് ബ്രൗസറുകളും പിന്തുണയ്ക്കുന്നില്ല, പ്രത്യേകിച്ച് കാലഹരണപ്പെട്ട പതിപ്പുകൾവിവിധ ബ്രൗസറുകൾ.

എന്നിരുന്നാലും, CSS ഉപയോഗിച്ച് കോണുകൾ റൗണ്ട് ചെയ്യുന്നത് കൂടുതൽ ജനപ്രിയമായിക്കൊണ്ടിരിക്കുകയാണ്. നിങ്ങൾ ഇതിനകം മനസ്സിലാക്കിയിരിക്കാം, ഈ ലേഖനത്തിൽ ഞങ്ങൾ CSS 3-ൽ ലഭ്യമായ ഒരു പ്രോപ്പർട്ടി ഉപയോഗിക്കും.

CSS ഉപയോഗിച്ച് വൃത്താകൃതിയിലുള്ള കോണുകൾ.

ഉദാഹരണത്തിന്, ഞങ്ങൾ ബ്ലോക്ക് എടുക്കും DIV ഘടകംഅതിൻ്റെ മൂലകൾ ഉരുണ്ടതാക്കുക. ഉദാഹരണത്തിന്, സ്റ്റൈൽ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് HTML കോഡിൽ നേരിട്ട് ഒരു ബ്ലോക്ക് സൃഷ്ടിച്ച് അതിന് പ്രോപ്പർട്ടികൾ നൽകാം. ആദ്യം നമുക്ക് ഏത് നിറത്തിൻ്റെയും പശ്ചാത്തലം നിറഞ്ഞ ഒരു ബ്ലോക്ക് ഘടകം ഉണ്ട്:

വഴിയിൽ, നിങ്ങളുടെ വെബ്‌സൈറ്റിലോ മറ്റേതെങ്കിലും വെബ്‌സൈറ്റിലോ ഉള്ള കളർ കോഡ് എന്താണെന്ന് കണ്ടെത്തണമെങ്കിൽ, ഇത് ഉപയോഗപ്രദമാകും.

ഒരു വെബ് ബ്രൗസറിൽ നമ്മൾ ഇത് എങ്ങനെ കാണും:

ഇപ്പോൾ, കോണുകൾ ചുറ്റാൻ, ഞങ്ങൾ "ബോർഡർ-റേഡിയസ്" പ്രോപ്പർട്ടി ഉപയോഗിക്കും, അത് അതിർത്തിയുടെ ആരം ആയി വിവർത്തനം ചെയ്യാവുന്നതാണ്. അതെ, അത് പോലെ തന്നെ, പലരും കരുതുന്നതുപോലെയല്ല, ഇത് ഫ്രെയിമിൻ്റെ ആരം അല്ലെങ്കിൽ അവർ അതിനെ (അതിർത്തി) എന്ന് വിളിക്കുന്നു. ഈ പ്രോപ്പർട്ടി മൂലകത്തിൻ്റെ അതിരുകളുടെ ആരത്തിന് പ്രത്യേകമായി ഉത്തരവാദിയാണ്, അല്ലാതെ അതിൻ്റെ ഫ്രെയിമുകൾക്കോ ബോർഡറുകൾക്കോ അല്ല, അത് നിലവിലില്ലായിരിക്കാം. എന്നിരുന്നാലും, സ്വത്ത് ഇപ്പോഴും കൂടാതെ പ്രവർത്തിക്കും അതിർത്തി ഉപയോഗിക്കുന്നുമൂലകത്തിൽ. ഞാൻ പറയാൻ ആഗ്രഹിച്ചത് നിങ്ങൾക്ക് മനസ്സിലായി എന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു. ഈ വസ്തുവിൻ്റെ മൂല്യം ഏതെങ്കിലും ആണ് സംഖ്യാ മൂല്യങ്ങൾ, ശതമാനം, പിക്സലുകൾ (px), പോയിൻ്റുകൾ (pt) തുടങ്ങിയവ പോലെ CSS-ൽ ബാധകമാണ്. അതെ, അത് കണക്കിലെടുക്കണം ഈ സ്വത്ത്മൂലകത്തിൻ്റെ നാല് കോണുകളിലും ഒരേസമയം പ്രവർത്തിക്കുന്നു; കൂടാതെ, നിങ്ങൾക്ക് ഓരോ കോണിലും വ്യത്യസ്തമായ ആരം വ്യക്തമാക്കാൻ കഴിയും, എന്നാൽ പിന്നീട് അതിൽ കൂടുതൽ. ആദ്യം, നമ്മുടെ ദീർഘചതുരത്തിൻ്റെ കോണുകളുടെ ആരം സജ്ജമാക്കാം. ഇത് 5 പിക്സലുകൾക്ക് തുല്യമാകട്ടെ:

അപ്പോൾ ഘടകം ഇതുപോലെ കാണപ്പെടും:

ഇപ്പോൾ, ഓരോ കോണിലും നിങ്ങളുടെ സ്വന്തം ആരം വെവ്വേറെ ചേർക്കുന്നത് എങ്ങനെയെന്ന് കണ്ടുപിടിക്കാൻ ഞാൻ നിർദ്ദേശിക്കുന്നു. ഇത് ചെയ്യുന്നതിന്, ഓരോ കോണിലും പ്രത്യേകം പ്രയോഗിക്കാൻ കഴിയുന്ന ഒരു പ്രോപ്പർട്ടി ഉപയോഗിക്കാം. മുമ്പത്തെ ഉദാഹരണത്തെക്കുറിച്ച് നമ്മൾ സംസാരിക്കുകയാണെങ്കിൽ, പൂർണ്ണ രൂപത്തിൽ മൂലകത്തിൻ്റെ സവിശേഷതകൾ ഇതുപോലെ കാണപ്പെടും:

ബോർഡർ-മുകളിൽ-ഇടത്-റേഡിയസ്:5px; /* മുകളിൽ ഇടത് മൂല */ ബോർഡർ-മുകളിൽ-വലത്-റേഡിയസ്:5px; /* മുകളിൽ വലത് മൂല */ ബോർഡർ-താഴെ-വലത്-റേഡിയസ്:5px; /* താഴെ വലത് മൂല */ ബോർഡർ-ബോട്ടം-ഇടത്-റേഡിയസ്:5px; /* താഴെ ഇടത് കോണിൽ */

അതായത്, ഓരോ മൂലയും അതിൻ്റേതായ മൂല്യത്തിലേക്ക് സജ്ജീകരിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഞങ്ങൾക്ക് ഈ അവസരമുണ്ട്, ഇത് ഉറപ്പാക്കാൻ ഞങ്ങൾ ഇനിപ്പറയുന്ന കോഡ് എടുക്കുന്നു:

തുടർന്ന് നമുക്ക് ഈ ഫലം ലഭിക്കും:

നമുക്ക് കാണാനാകുന്നതുപോലെ, ഓരോ കോണിൻ്റെയും അതിർത്തിക്ക് അതിൻ്റേതായ റേഡിയസ് മൂല്യമുണ്ട്.
കൂടാതെ, ഫോമിലെ ഓരോ കോണിൻ്റെയും ബോർഡറിനായി ഒരു മൂല്യം സജ്ജമാക്കാൻ CSS ഞങ്ങളെ അനുവദിക്കുന്നു ചെറിയ കുറിപ്പ്, ഇത് ഇതുപോലെ കാണപ്പെടും:

ഈ ക്രമത്തിൽ മൂല്യങ്ങൾ എവിടെ പിന്തുടരും:

ബോർഡർ-റേഡിയസ്: 5px /* മുകളിൽ ഇടത് മൂല */ 10px /* മുകളിൽ വലത് മൂല */ 15px /* താഴെ വലത് മൂല */ 20px /* താഴെ ഇടത് മൂല */;

അതനുസരിച്ച്, മേൽപ്പറഞ്ഞവയെ അടിസ്ഥാനമാക്കി, അതേ രീതിയിൽ തന്നെ നമുക്ക് മൂന്ന് (ഒന്നോ രണ്ടോ) കോണുകൾക്ക് മാത്രമേ റേഡിയസ് അതിർത്തി സജ്ജീകരിക്കാൻ കഴിയൂ എന്ന് വ്യക്തമാകും:

ഒരു വെബ് ബ്രൗസറിൽ ഇത് ഇങ്ങനെയാണ് കാണപ്പെടുന്നത്:

നിങ്ങൾ ഇതുവരെ പൂർണ്ണമായും ആശയക്കുഴപ്പത്തിലല്ലെങ്കിൽ, നമുക്ക് തുടരാം. ഓരോ കോണിൻ്റെ അതിർത്തിയുടെയും ആരം ഞങ്ങൾ മുകളിൽ ചർച്ച ചെയ്തതുപോലെ ഒരു മൂല്യത്തിലല്ല, രണ്ടിൽ വ്യക്തമാക്കാം എന്നതാണ് വസ്തുത. അതായത്, ഓരോ കോണിനും രണ്ട് മൂല്യങ്ങൾ. ഈ സാഹചര്യത്തിൽ, ആദ്യ മൂല്യം കോണിൻ്റെ ആരം തിരശ്ചീനമായി സജ്ജമാക്കും, രണ്ടാമത്തെ മൂല്യം ആരം ലംബമായി സജ്ജമാക്കും. ആദ്യം ഒരു മൂലയിൽ നിന്ന് തുടങ്ങാം:

ഈ ഉദാഹരണത്തിൽ, മൂലകത്തിൻ്റെ മുകളിൽ ഇടത് കോണിൽ മാത്രമേ ഞങ്ങൾ ബാധിച്ചിട്ടുള്ളൂ:

നിങ്ങൾ മൂല്യങ്ങൾ വിപരീതമാക്കുകയാണെങ്കിൽ, ഘടകം ഇതുപോലെ കാണപ്പെടും:

അത് അവിടെ അവസാനിപ്പിക്കാമായിരുന്നുവെന്ന് തോന്നുന്നു, പക്ഷേ ഇല്ല. ഒരു ഉപായം കൂടിയുണ്ട്. ഒരു പ്രോപ്പർട്ടി മൂല്യത്തിൽ, മൂല്യങ്ങൾക്കിടയിൽ നമുക്ക് ഒരു സ്ലാഷ് (/) ഉപയോഗിക്കാം. മൂല്യങ്ങളെ മറ്റ് മൂല്യങ്ങളുമായി സംയോജിപ്പിക്കാൻ സ്ലാഷ് നമ്മെ സഹായിക്കും. പൊതുവേ, പറയുന്നതിനേക്കാൾ കാണിക്കാൻ എളുപ്പമാണ്. ലളിതമായ എന്തെങ്കിലും ഉപയോഗിച്ച് നമുക്ക് ആരംഭിക്കാം. നമുക്ക് തിരശ്ചീന ആരം 35 പിക്സലുകളും ലംബമായ ആരം 5 ഉം ആയിരിക്കണമെന്ന് നമുക്ക് അനുമാനിക്കാം. മാത്രമല്ല, ഈ മൂല്യങ്ങൾ എല്ലാ കോണുകളിലും ബാധകമായിരിക്കണം. അപ്പോൾ നമുക്ക് ഇങ്ങനെ എഴുതാം:

ഈ ഫലം നേടുക:

ഇപ്പോൾ കൂടുതൽ സങ്കീർണ്ണമായ ഒരു ഉദാഹരണം നോക്കാം:

IN ഈ സാഹചര്യത്തിൽസ്ലാഷ് ചിഹ്നത്തിന് മുമ്പുള്ള മൂല്യം (/) കോണിൻ്റെ തിരശ്ചീന ആരവുമായി ബന്ധപ്പെട്ടിരിക്കും, കൂടാതെ ചിഹ്നത്തിന് ശേഷം ലംബമായ ഒന്നുമായി ബന്ധപ്പെട്ടിരിക്കും. ഈ സാഹചര്യത്തിൽ, മൂല്യങ്ങൾ ഈ രീതിയിൽ പരസ്പരം ബന്ധപ്പെട്ടിരിക്കും:

ബോർഡർ-മുകളിൽ-ഇടത്-റേഡിയസ്: 20px 15px; ബോർഡർ-മുകളിൽ-വലത്-റേഡിയസ്: 10px 25px; ബോർഡർ-താഴെ-വലത്-റേഡിയസ്: 40px 15px; ബോർഡർ-ബോട്ടം-ഇടത്-റേഡിയസ്: 10px 25px;

ഫലം ഇതുപോലെയായിരിക്കും:

ലേഖനത്തിൻ്റെ അവസാനം, പിന്തുണയെക്കുറിച്ച് സംസാരിക്കാം വ്യത്യസ്ത ബ്രൗസറുകൾഈ വസ്തുവിൻ്റെ.

വിവിധ വെബ് ബ്രൗസറുകളിൽ കോണുകൾ റൗണ്ട് ചെയ്യുന്നു.

ഈ പ്രോപ്പർട്ടി എല്ലാ ബ്രൗസർ പതിപ്പുകളും പിന്തുണയ്ക്കുന്നില്ല എന്നത് ഇവിടെ ശ്രദ്ധിക്കേണ്ടതാണ്. IE9+, Firefox 4+, Chrome, Safari 5+, Opera എന്നിവയിൽ പ്രോപ്പർട്ടി പിന്തുണയ്ക്കുന്നു.
എന്നാൽ ഈ പ്രോപ്പർട്ടി പിന്തുണയ്‌ക്കാത്ത ചില ബ്രൗസർ പതിപ്പുകൾക്ക്, പ്രോപ്പർട്ടിയിലേക്ക് പ്രിഫിക്‌സ് അല്ലെങ്കിൽ പ്രിഫിക്‌സ് എന്ന് വിളിക്കപ്പെടുന്ന നിലവാരമില്ലാത്ത പ്രോപ്പർട്ടികൾ ഉണ്ട്.
പതിപ്പ് 4.0-ന് മുമ്പുള്ള Chrome, പതിപ്പ് 5.0-ന് മുമ്പുള്ള സഫാരി, iOS നിലവാരമില്ലാത്ത പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു -webkit-border-bottom-left-radius.
പതിപ്പ് 4.0-ന് മുമ്പുള്ള ഫയർഫോക്സ് നിലവാരമില്ലാത്ത പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു -moz-border-radius-bottomleft.
ഈ സാഹചര്യത്തിൽ, ഈ പ്രിഫിക്സുകൾ ഉപയോഗിച്ച് ഞങ്ങൾ പ്രോപ്പർട്ടി ഡ്യൂപ്ലിക്കേറ്റ് ചെയ്യേണ്ടിവരും. ഉദാഹരണത്തിന്, ഇടത് ബോർഡർക്കായി ഒരു പ്രോപ്പർട്ടി സജ്ജീകരിച്ചിട്ടുണ്ടെങ്കിൽ മുകളിലെ മൂലഅഞ്ച് പിക്സലുകൾക്ക് തുല്യമായ മൂല്യം:

ബോർഡർ-മുകളിൽ-ഇടത്-റേഡിയസ്: 5px;

അപ്പോൾ പ്രോപ്പർട്ടി, പ്രിഫിക്സുകൾ ഉപയോഗിച്ച് ഡ്യൂപ്ലിക്കേറ്റ് ചെയ്യുന്നത് ഇതുപോലെ കാണപ്പെടും:

വെബ്കിറ്റ്-ബോർഡർ-ബോട്ടം-ഇടത്-റേഡിയസ്:5px; -moz-border-radius-bottomleft:5px; ബോർഡർ-മുകളിൽ-ഇടത്-റേഡിയസ്: 5px;

എനിക്ക് എല്ലാം വ്യക്തമായി വിശദീകരിക്കാൻ കഴിഞ്ഞുവെന്നും CSS മാത്രം ഉപയോഗിച്ച് വൃത്താകൃതിയിലുള്ള കോണുകൾ എങ്ങനെ നിർമ്മിക്കാമെന്ന് നിങ്ങൾ ഇപ്പോൾ മനസ്സിലാക്കുമെന്നും ഞാൻ ശരിക്കും പ്രതീക്ഷിക്കുന്നു.
നിങ്ങൾക്ക് ആശംസകൾ!

CSS3 ഫ്രെയിംഅനുവദിക്കുന്ന പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് എലമെൻ്റ് ബോർഡറുകൾ ഫോർമാറ്റ് ചെയ്യാനുള്ള കഴിവ് പൂർത്തീകരിക്കുന്നു കോണുകൾക്ക് ചുറ്റുംഘടകം, കൂടാതെ ഉപയോഗം ചിത്രങ്ങൾമൂലകത്തിൻ്റെ അതിരുകൾ രൂപകൽപ്പന ചെയ്യാൻ.

വൃത്താകൃതിയിലുള്ള കോണുകളും ചിത്ര ഫ്രെയിമുകളും

1. ബോർഡർ-റേഡിയസ് ഉപയോഗിച്ച് വൃത്താകൃതിയിലുള്ള കോണുകൾ

ബ്രൗസർ പിന്തുണ

IE: 9.0
ഫയർഫോക്സ്: 4.0
ക്രോം: 4.0
സഫാരി: 5.0, 3.1 -വെബ്കിറ്റ്-
ഓപ്പറ: 10.5
iOS സഫാരി: 7.1
ഓപ്പറ മിനി: —
ആൻഡ്രോയിഡ് ബ്രൗസർ: 4.1
ക്രോം ആൻഡ്രോയിഡിനായി: 44

ചെറിയക്ഷരത്തിൻ്റെ കോണുകൾ റൗണ്ട് ചെയ്യാൻ പ്രോപ്പർട്ടി നിങ്ങളെ അനുവദിക്കുന്നു ബ്ലോക്ക് ഘടകങ്ങൾ. ഓരോ കോണിനുമുള്ള വക്രം അതിൻ്റെ ആകൃതി നിർവചിക്കുന്ന ഒന്നോ രണ്ടോ ആരം ഉപയോഗിച്ചാണ് നിർവചിച്ചിരിക്കുന്നത് - വൃത്തംഅഥവാ ദീർഘവൃത്തം. ഘടകത്തിന് ബോർഡർ ഇല്ലെങ്കിൽപ്പോലും, പശ്ചാത്തല-ക്ലിപ്പ് പ്രോപ്പർട്ടി ഉപയോഗിച്ച് സെക്കൻ്റിൻ്റെ കൃത്യമായ സ്ഥാനം നിർണ്ണയിക്കപ്പെടുന്നു.

ബോർഡർ-റേഡിയസ് പ്രോപ്പർട്ടി നിങ്ങളെ എല്ലാ കോണുകളും ഒരേസമയം റൗണ്ട് ചെയ്യാൻ അനുവദിക്കുന്നു, കൂടാതെ ബോർഡർ-മുകളിൽ-ഇടത്-റേഡിയസ്, ബോർഡർ-മുകളിൽ-വലത്-റേഡിയസ്, ബോർഡർ-താഴെ-വലത്-റേഡിയസ്, ബോർഡർ-ബോട്ടം-ഇടത്-റേഡിയസ് പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഓരോ കോണിലും പ്രത്യേകം റൗണ്ട് ചെയ്യാം.

ബോർഡർ-റേഡിയസ് പ്രോപ്പർട്ടിക്കായി നിങ്ങൾ രണ്ട് മൂല്യങ്ങൾ സജ്ജീകരിച്ചാൽ, ആദ്യ മൂല്യം റൗണ്ട് ചെയ്യും മുകളിൽ ഇടത്ഒപ്പം താഴെ വലത് മൂല, രണ്ടാമത്തേത് - മുകളിൽ വലത്ഒപ്പം താഴെ ഇടതുഭാഗത്ത്.

നിർവചിച്ച മൂല്യങ്ങൾ / നിർണ്ണയിക്കുക തിരശ്ചീനമായഒപ്പം ലംബമായ ആരങ്ങൾ. സ്വത്ത് പാരമ്പര്യമായി ലഭിച്ചതല്ല.

ഓപ്ഷനുകൾ

div (വീതി: 100px; ഉയരം: 100px; അതിർത്തി: 5px ഖര;).r1 (ബോർഡർ-റേഡിയസ്: 0 0 20px 20px;).r2 (ബോർഡർ-റേഡിയസ്: 0 10px 20px;).r3 (ബോർഡർ-റേഡിയസ്: 20px: 20px ;;); (ബോർഡർ-റേഡിയസ്: 50%;).r8 (ബോർഡർ-മുകളിൽ: ഒന്നുമില്ല; ബോർഡർ-ബോട്ടം: ഒന്നുമില്ല; ബോർഡർ-റേഡിയസ്: 30px/90px;).r9 (ബോർഡർ-ബോട്ടം-ലെഫ്റ്റ്-റേഡിയസ്: 100px;).r10 ( ബോർഡർ -റേഡിയസ്: 0 100%;).r11 (ബോർഡർ-റേഡിയസ്: 0 50% 50% 50%;).r12 (ബോർഡർ-മുകളിൽ-ഇടത്-ആരം: 100% 20px; ബോർഡർ-താഴെ-വലത്-റേഡിയസ്: 100% 20px ;)
അരി. 1. ഉദാഹരണങ്ങൾ വിവിധ ഓപ്ഷനുകൾറൗണ്ടിംഗ് ബ്ലോക്ക് കോണുകൾ

2. ബോർഡർ-ചിത്രം

ബ്രൗസർ പിന്തുണ

IE: 11.0
ഫയർഫോക്സ്: 15.0, 3.5 -moz-
ക്രോം: 16.0, 7.0 -വെബ്കിറ്റ്-
സഫാരി: 6.0, 3.0 -വെബ്കിറ്റ്-
ഓപ്പറ: 15.0, 11.0 -o-
iOS സഫാരി: 7.1
ഓപ്പറ മിനി: 8-o-
ആൻഡ്രോയിഡ് ബ്രൗസർ: 4.4, 4.1 -വെബ്കിറ്റ്-
Android-നുള്ള Chrome: 42

ഘടകത്തിൻ്റെ ഫ്രെയിമായി ഒരു ഇമേജ് സജ്ജമാക്കാൻ പ്രോപ്പർട്ടി നിങ്ങളെ അനുവദിക്കുന്നു. ചിത്രത്തിൻ്റെ പ്രധാന ആവശ്യകത അത് സമമിതി ആയിരിക്കണം എന്നതാണ്. സ്വത്ത് ഉൾപ്പെടുന്നു ഇനിപ്പറയുന്ന മൂല്യങ്ങൾ: (ബോർഡർ-ചിത്രം: വീതി ഉറവിട സ്ലൈസ് ആവർത്തന ഔട്ട്സെറ്റ്;) .

ഇതിൻ്റെ സഹായത്തോടെ ലളിതമായ ചിത്രംഒരു ഘടകത്തിനായി നിങ്ങൾക്ക് ഈ ഫ്രെയിമുകൾ ലഭിക്കും.

/* ഉദാഹരണം 1 */ div (വീതി: 260px; ഉയരം: 100px; ബോർഡർ-സ്റ്റൈൽ: സോളിഡ്; ബോർഡർ-ഇമേജ്-വീഡ്: 15px; ബോർഡർ-ഇമേജ്-ഉറവിടം: url(border_round.png); ബോർഡർ-ഇമേജ്-സ്ലൈസ്: 30 ; ബോർഡർ-ഇമേജ്-ആവർത്തനം: നീട്ടുക; ) /* ഉദാഹരണം 2 */ div (വീതി: 260px; ഉയരം: 100px; ബോർഡർ-സ്റ്റൈൽ: സോളിഡ്; ബോർഡർ-ഇമേജ്-വീതി: 15px; ബോർഡർ-ഇമേജ്-ഉറവിടം: url(border_round. png); ബോർഡർ-ഇമേജ്-സ്ലൈസ്: 30; ബോർഡർ-ഇമേജ്-ആവർത്തനം: റൗണ്ട്;)
അരി. 2. ഒരു ഇമേജ് ഉപയോഗിച്ച് ബ്ലോക്ക് അതിർത്തികൾ രൂപകൽപ്പന ചെയ്യുന്നതിനുള്ള ഒരു ഉദാഹരണം

കട്ട്സ് എ - ബി - സി - ഡി ഫ്രെയിമിൻ്റെ കോണുകൾ ഉണ്ടാക്കുന്നു, അവയ്ക്കിടയിൽ സ്ഥിതിചെയ്യുന്ന ഡിസൈനിൻ്റെ ഭാഗം ഫ്രെയിമിൻ്റെ ശേഷിക്കുന്ന ഇടം അനുസരിച്ച് പൂരിപ്പിക്കുന്നു നൽകിയ മൂല്യംബോർഡർ-ഇമേജ്-ആവർത്തന പ്രോപ്പർട്ടികൾ. ബോർഡർ-ഇമേജ്-സ്ലൈസ് പ്രോപ്പർട്ടി മൂല്യം ഉപയോഗിച്ച് കോർണർ ഭാഗത്തിൻ്റെ വലുപ്പം (ഈ ഉദാഹരണത്തിൽ നമ്പർ 30) സജ്ജീകരിച്ചിരിക്കുന്നു.

2.1 അതിർത്തി-ചിത്രത്തിൻ്റെ വീതി

ഘടകത്തിൻ്റെ ബോർഡറിനുള്ള ചിത്രത്തിൻ്റെ വീതി പ്രോപ്പർട്ടി വ്യക്തമാക്കുന്നു. വീതി വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ, അത് ഡിഫോൾട്ട് 1 ആയി മാറുന്നു.

അതിർത്തി-ചിത്രത്തിൻ്റെ വീതി
മൂല്യങ്ങൾ:
നീളം	ബോർഡർ വീതി നീളമുള്ള യൂണിറ്റുകളിൽ സജ്ജീകരിക്കുന്നു - px / em . നിങ്ങൾക്ക് ഒരു സമയം ഒന്ന് മുതൽ നാല് വരെ മൂല്യങ്ങൾ സജ്ജമാക്കാൻ കഴിയും. ഒരു മൂല്യം വ്യക്തമാക്കിയിട്ടുണ്ടെങ്കിൽ, ഫ്രെയിമിൻ്റെ എല്ലാ വശങ്ങളുടെയും വീതി ഒന്നുതന്നെയാണ്, രണ്ട് മൂല്യങ്ങൾ മുകളിൽ-താഴെയും വലത്-ഇടത്തേയും വീതി വ്യക്തമാക്കുന്നു.
നമ്പർ	ബോർഡർ-വിഡ്ത്ത് മൂല്യം ഗുണിക്കുന്ന സംഖ്യാ മൂല്യം.
%	ഘടകത്തിൻ്റെ ഫ്രെയിമിൻ്റെ വീതി ചിത്രത്തിൻ്റെ വലുപ്പവുമായി ബന്ധപ്പെട്ട് കണക്കാക്കുന്നു. വീതിയുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ തിരശ്ചീനമായി, ലംബമായി - ഉയരവുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു.
ഓട്ടോ	ബോർഡർ-ഇമേജ്-സ്ലൈസ് മൂല്യവുമായി പൊരുത്തപ്പെടുന്നു.
പ്രാഥമിക
അനന്തരാവകാശം

വാക്യഘടന

ഡിവ് (ബോർഡർ-ഇമേജ് വീതി: 30px;) ചിത്രം. 3. ഉപയോഗിച്ച് ഒരു ഇമേജ് ഫ്രെയിമിൻ്റെ വീതി ക്രമീകരിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം വിവിധ തരംമൂല്യങ്ങൾ

2.2 അതിർത്തി-ചിത്രം-ഉറവിടം

ബ്ലോക്കിൻ്റെ അതിരുകൾ അലങ്കരിക്കാൻ ഉപയോഗിക്കുന്ന ചിത്രത്തിലേക്കുള്ള പാത പ്രോപ്പർട്ടി വ്യക്തമാക്കുന്നു.

വാക്യഘടന

ഡിവി (ബോർഡർ-ഇമേജ്-സോഴ്സ്: url(border.png);)

2.3 ബോർഡർ-ഇമേജ്-സ്ലൈസ് ഘടകങ്ങൾ

മൂലകത്തിൻ്റെ അതിരുകൾ നിർവചിക്കാൻ ഉപയോഗിക്കുന്ന ചിത്രത്തിൻ്റെ ഭാഗങ്ങളുടെ വലുപ്പം പ്രോപ്പർട്ടി നിർണ്ണയിക്കുകയും ചിത്രത്തെ ഒമ്പത് ഭാഗങ്ങളായി വിഭജിക്കുകയും ചെയ്യുന്നു: നാല് കോണുകൾ, കോണുകൾക്കിടയിലുള്ള നാല് അരികുകൾ, ഒരു കേന്ദ്ര ഭാഗം.


മൂല്യങ്ങൾ:
നമ്പർ	ഒന്നോ രണ്ടോ മൂന്നോ നാലോ മൂല്യങ്ങൾ ഉപയോഗിച്ച് ഫ്രെയിം ഭാഗങ്ങളുടെ വലുപ്പം സജ്ജമാക്കാൻ കഴിയും. മൂലകത്തിൻ്റെ ഓരോ വശത്തും ഒരേ വലുപ്പമുള്ള ബോർഡറുകളെ ഒരു മൂല്യം സജ്ജമാക്കുന്നു. രണ്ട് മൂല്യങ്ങൾ: ആദ്യത്തേത് മുകളിലെ വലിപ്പം നിർണ്ണയിക്കുന്നു താഴ്ന്ന പരിധി, രണ്ടാമത്തേത് - വലത്തും ഇടത്തും. മൂന്ന് മൂല്യങ്ങൾ: ആദ്യത്തേത് മുകളിലെ അതിർത്തിയുടെ വലുപ്പം നിർണ്ണയിക്കുന്നു, രണ്ടാമത്തേത് - വലത്തോട്ടും ഇടത്തോട്ടും, മൂന്നാമത്തേത് - താഴെയുള്ള അതിർത്തി. നാല് മൂല്യങ്ങൾ: മുകളിൽ, വലത്, താഴെ, ഇടത് ബോർഡറുകളുടെ വലുപ്പങ്ങൾ നിർവചിക്കുന്നു. സംഖ്യാ മൂല്യം px-ൻ്റെ സംഖ്യയെ പ്രതിനിധീകരിക്കുന്നു.
%	ചിത്രത്തിൻ്റെ വലുപ്പവുമായി ബന്ധപ്പെട്ട് ബോർഡർ വലുപ്പങ്ങൾ കണക്കാക്കുന്നു. വീതിയുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ തിരശ്ചീനമായി, ലംബമായി - ഉയരവുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു.
പൂരിപ്പിക്കുക	മൂല്യം ഒരു സംഖ്യയോ ശതമാനമോ സഹിതം സൂചിപ്പിച്ചിരിക്കുന്നു. വ്യക്തമാക്കിയിട്ടുണ്ടെങ്കിൽ, ഫ്രെയിമിൻ്റെ ആന്തരിക അറ്റത്ത് ചിത്രം ഛേദിക്കപ്പെടുന്നില്ല, മാത്രമല്ല ഫ്രെയിമിനുള്ളിലെ പ്രദേശം നിറയ്ക്കുകയും ചെയ്യുന്നു.
പ്രാഥമിക	ഈ പ്രോപ്പർട്ടി അതിൻ്റെ ഡിഫോൾട്ട് മൂല്യത്തിലേക്ക് സജ്ജീകരിക്കുന്നു.
അനന്തരാവകാശം	പാരൻ്റ് എലമെൻ്റിൽ നിന്ന് ഈ വസ്തുവിൻ്റെ മൂല്യം അവകാശമാക്കുന്നു.

വാക്യഘടന

ഡിവ് (ബോർഡർ-ഇമേജ്-സ്ലൈസ്: 50 20;)
അരി. 4. ഇമേജ് ഫ്രെയിം സ്ലൈസുകൾ വ്യക്തമാക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം

2.4 അതിർത്തി-ചിത്രം-ആവർത്തനം

പ്രോപ്പർട്ടി നിയന്ത്രണങ്ങൾ പാഡിംഗ് പശ്ചാത്തല ചിത്രംഫ്രെയിമിൻ്റെ കോണുകൾക്കിടയിലുള്ള ഇടം. ഒരൊറ്റ മൂല്യം അല്ലെങ്കിൽ ഒരു ജോടി മൂല്യങ്ങൾ ഉപയോഗിച്ച് വ്യക്തമാക്കാം.

വാക്യഘടന

ഡിവ് (ബോർഡർ-ഇമേജ്-ആവർത്തനം: ആവർത്തിക്കുക;) ചിത്രം. 5. വ്യത്യസ്ത തരം മൂല്യങ്ങൾ ഉപയോഗിച്ച് ഒരു ഇമേജ് ഫ്രെയിമിൻ്റെ കേന്ദ്രഭാഗം ആവർത്തിക്കുന്നതിനുള്ള ഉദാഹരണം

2.5 അതിർത്തി-ചിത്രം-പുറം

ഘടകത്തിൻ്റെ അതിരുകൾക്കപ്പുറത്തേക്ക് ഒരു നിശ്ചിത ദൈർഘ്യത്തിൽ ഇമേജ് ഫ്രെയിം നീക്കാൻ പ്രോപ്പർട്ടി നിങ്ങളെ അനുവദിക്കുന്നു. ഒന്നോ നാലോ മൂല്യങ്ങൾ ഉപയോഗിച്ച് വ്യക്തമാക്കാം.

വാക്യഘടന

ഡിവി (ബോർഡർ-ഇമേജ്-ഔട്ട്സെറ്റ്: 10px;)
അരി. 6. വ്യത്യസ്ത തരം മൂല്യങ്ങൾ ഉപയോഗിച്ച് ഒരു ഇമേജ് ഫ്രെയിം മാറ്റുന്നതിനുള്ള ഒരു ഉദാഹരണം

3. പുറം ഫ്രെയിം ഓഫ്സെറ്റ് ഔട്ട്ലൈൻ-ഓഫ്സെറ്റ്

ബോർഡർ എലമെൻ്റിൻ്റെ ബോർഡറും ഔട്ട്‌ലൈൻ പ്രോപ്പർട്ടി ഉപയോഗിച്ച് സൃഷ്‌ടിച്ച ബാഹ്യ അതിർത്തിയും തമ്മിലുള്ള ദൂരം പ്രോപ്പർട്ടി വ്യക്തമാക്കുന്നു.

/*ചിത്രം 1:*/ img (ബോർഡർ: 1px സോളിഡ് പിങ്ക്; ഔട്ട്‌ലൈൻ: 1px ഡാഷ്ഡ് ഗ്രേ; ഔട്ട്‌ലൈൻ-ഓഫ്‌സെറ്റ്: 3px; ) /*ചിത്രം 2:*/ img (ബോർഡർ-വീതി: 1px 10px; ബോർഡർ-സ്റ്റൈൽ: സോളിഡ്; ബോർഡർ-നിറം: പിങ്ക്; ഔട്ട്‌ലൈൻ: 1px ഡാഷ്ഡ് ഗ്രേ; ഔട്ട്ലൈൻ-ഓഫ്സെറ്റ്: 3px; ) /*ചിത്രം 3:*/ img (ബോർഡർ: 3px ഇൻസെറ്റ് പിങ്ക്; ഔട്ട്ലൈൻ: 1px ഡാഷ്ഡ് ഗ്രേ; ഔട്ട്ലൈൻ-ഓഫ്സെറ്റ്: 1px; )

അരി. 7. ഒരു ബാഹ്യ ഫ്രെയിം ഉപയോഗിച്ച് ഒരു ചിത്രം അലങ്കരിക്കാനുള്ള ഒരു ഉദാഹരണം

4. ഗ്രേഡിയൻ്റ് ഫ്രെയിം

ബോർഡർ-ഇമേജിൻ്റെ മൂല്യം ഒരു ഇമേജ് മാത്രമല്ല, ഒരു ഗ്രേഡിയൻ്റ് ഫില്ലും ആകാം.

അർദ്ധസുതാര്യ ഫ്രെയിം

നിറങ്ങളിൽ ഒന്ന് സുതാര്യമാണ്. ഈ രീതിയിൽ, നിങ്ങൾക്ക് ഒരു മൂലകത്തിൻ്റെ എല്ലാ വശങ്ങൾക്കും ഒരേസമയം അല്ലെങ്കിൽ ഓരോ വശത്തിനും വെവ്വേറെ അതിരുകൾ സജ്ജമാക്കാൻ കഴിയും. ബോർഡറിൻ്റെ കനം നിയന്ത്രിക്കുന്നത് ബോർഡർ-വീഡ്ത്ത് പ്രോപ്പർട്ടിയാണ്.

* (box-sizing:border-box;).wrap (ഉയരം: 200px; പാഡിംഗ്: 25px; പശ്ചാത്തലം: #00E4F6; ) .ഗ്രേഡിയൻ്റ് (ഉയരം: 150px; വീതി: 50%; മാർജിൻ: 0 ഓട്ടോ; ബോർഡർ: 10px ഖര സുതാര്യം ;ബോർഡർ-ഇമേജ്: ലീനിയർ-ഗ്രേഡിയൻ്റ് (വലത്തേക്ക്, സുതാര്യമായ 0%, #ADF2F7 100%); ബോർഡർ-ഇമേജ്-സ്ലൈസ്: 1; )

തപാൽ കവർ

* (box-sizing:border-box;).wrap (ഉയരം: 200px; പാഡിംഗ്: 25px; ) .gradient (ഉയരം: 150px; വീതി: 50%; മാർജിൻ: 0 ഓട്ടോ; ബോർഡർ: 10px സോളിഡ് സുതാര്യം; ബോർഡർ-ചിത്രം: 10 ആവർത്തന-രേഖീയ-ഗ്രേഡിയൻ്റ് (45ഡിഗ്രി, #A7CECC, #A7CECC 10px, സുതാര്യമായ 10px, സുതാര്യമായ 20px, #F8463F 20px, #F8463F 30px, സുതാര്യമായ 30px, സുതാര്യം) 40px);

CTRL+N, അല്ലെങ്കിൽ "ഫയൽ" മെനുവിൽ നിന്ന് ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റിൽ "സൃഷ്ടിക്കുക" ഫംഗ്ഷൻ തിരഞ്ഞെടുക്കുക. അടുത്തതായി, അതേ ലിസ്റ്റിൽ നിന്ന്, "ഇറക്കുമതി" പ്രവർത്തനം തിരഞ്ഞെടുക്കുക അല്ലെങ്കിൽ CTRL+I കീ കോമ്പിനേഷൻ ഉപയോഗിച്ച് വിളിക്കുക. അടുത്തതായി, ഡയലോഗ് ബോക്സിൽ ഇമേജ് ഫയലിലേക്കുള്ള പാത വ്യക്തമാക്കുകയും "ഇറക്കുമതി" ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക. നിങ്ങളുടേത് ഇതിൽ പ്രദർശിപ്പിക്കും.

ടൂൾബാറിൽ, "നോഡ് എഡിറ്റർ" റോൾഔട്ട് കണ്ടെത്തി "ഷേപ്പ്" ടൂൾ തിരഞ്ഞെടുക്കുക. F10 കീ അമർത്തിയും ഈ ടൂൾ വിളിക്കാവുന്നതാണ്.

കോണിൻ്റെ വലതുവശത്ത് നിങ്ങൾ റൗണ്ട് ചെയ്യേണ്ടതുണ്ട്, ചിത്രത്തിൻ്റെ ബോർഡറിൽ ഇടത്-ക്ലിക്കുചെയ്യുക. പ്രത്യക്ഷപ്പെടും പുതിയ നോഡ്ചിത്രത്തിൽ, നാല് കോണുകൾ കൂടാതെ. അടുത്തതായി, നോഡ് എഡിറ്റർ പാനലിൽ Convert Line To Curve ഓപ്ഷൻ തിരഞ്ഞെടുക്കുക. പുതുതായി സൃഷ്ടിച്ച നോഡിൻ്റെ ഇടതുവശത്ത് റൗണ്ട് മാർക്കുകൾ ദൃശ്യമാകും.

കോണിൽ നിന്ന് ഒരേ അകലത്തിൽ, ചിത്രത്തിൻ്റെ ലംബ വശത്ത് ഒരു പുതിയ നോഡ് ചേർക്കുക. ഷേപ്പ് ടൂൾ മാറ്റാതെ, പ്രധാന കോർണർ നോഡിൽ ഇരട്ട-ക്ലിക്കുചെയ്യുക, അത് ഇല്ലാതാക്കപ്പെടും. ചിത്രത്തിൻ്റെ വൃത്താകൃതിയിലുള്ള മൂല ഉടൻ ശ്രദ്ധേയമാകും. കോർണർ ആരം മാറ്റാൻ നിങ്ങൾക്ക് നേർരേഖ ഗൈഡ് മാർക്കുകൾ ഉപയോഗിക്കാം.

വളരെ ലളിതമായ രീതിയിൽ(ഒരു വെക്റ്റർ ഒബ്ജക്റ്റ് ഉപയോഗിച്ച്) എന്തും സാധ്യമാണ് കോണുകൾഒരു ചതുരാകൃതിയിലുള്ള ചിത്രത്തിൽ. അവലംബിക്കാതെ മുകളിൽ വിവരിച്ച രീതിനോഡുകൾ എഡിറ്റുചെയ്യുക, ചതുരാകൃതിയിലുള്ള ഉപകരണം ഉപയോഗിച്ച് ഇറക്കുമതി ചെയ്ത ചിത്രത്തിന് അടുത്തായി അതേ വലുപ്പത്തിലുള്ള ഒരു ദീർഘചതുരം വരയ്ക്കുക അല്ലെങ്കിൽ F6 കീ ഉപയോഗിച്ച് ടൂളിനെ വിളിക്കുക.

നിങ്ങൾക്ക് ഇതിനകം പരിചിതമായ "ആകൃതി" ടൂൾ ഉപയോഗിച്ച്, ദീർഘചതുരത്തിൽ ക്ലിക്കുചെയ്‌ത് മൗസ് അതിൻ്റെ ഏതെങ്കിലും നോഡുകളിൽ ദീർഘചതുരത്തിലേക്ക് വലിച്ചിടുക. കോണുകൾ വൃത്താകൃതിയിലായിരിക്കും. അതേ ഉപകരണം ഉപയോഗിച്ച് വക്രതയുടെ ആരം ക്രമീകരിക്കാവുന്നതാണ്.
പിക്ക് ടൂളിൻ്റെ അമ്പടയാളം ഉപയോഗിച്ച് നിങ്ങളുടെ ചിത്രം അടയാളപ്പെടുത്തുക.
അടുത്തതായി, പ്രധാന മെനു ലിസ്റ്റിൽ, "ഇഫക്റ്റുകൾ" റോൾഔട്ട് കണ്ടെത്തി "പവർക്ലിപ്പ്" ഓപ്ഷനും ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റിൽ നിന്ന് "പ്ലേസ് ഇൻസൈഡ് കണ്ടെയ്നർ" ഫംഗ്ഷനും തിരഞ്ഞെടുക്കുക. വൃത്താകൃതിയിലുള്ള കോണുകൾ ഉപയോഗിച്ച് നിങ്ങൾ വരച്ച ദീർഘചതുരം ചൂണ്ടിക്കാണിക്കാൻ വിശാലമായ അമ്പടയാളം ഉപയോഗിക്കുക. നിങ്ങളുടെ ചിത്രം സ്ഥാപിക്കുന്ന ഫ്രെയിമായി ഇത് മാറും.

കുറിപ്പ്

നിങ്ങൾ ഒരു ഡോക്യുമെൻ്റിലേക്ക് ഒരു ചിത്രം ഇറക്കുമതി ചെയ്യുമ്പോൾ ദയവായി ശ്രദ്ധിക്കുക കോറൽ ഡ്രാ യഥാർത്ഥ ഫയൽചിത്രം മാറ്റിയിട്ടില്ല, അതിനാൽ വൃത്താകൃതിയിലുള്ള കോണുകളുടെ ഫലത്തിൽ നിങ്ങൾക്ക് സന്തോഷമില്ലെങ്കിൽ അതിൻ്റെ യഥാർത്ഥ രൂപത്തിൽ അത് ഉപയോഗിക്കാം.

സഹായകരമായ ഉപദേശം

PowerClip ഫംഗ്‌ഷൻ ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ഏറ്റവും വിചിത്രമായ ആകൃതിയിലുള്ള വിവിധ ഫ്രെയിമുകളിൽ ചിത്രങ്ങൾ സ്ഥാപിക്കാൻ കഴിയും.

ഉറവിടങ്ങൾ:

കോറൽ ഡ്രോയുടെ ഔദ്യോഗിക ഗൈഡ്, എം. മാത്യൂസ്, കെ. മാത്യൂസ്, 1997
എങ്ങനെ മിനുസപ്പെടുത്താം മൂർച്ചയുള്ള മൂലകൾ?

നിങ്ങൾക്ക് ആവശ്യമായി വരും

- കമ്പ്യൂട്ടർ
- അഡോബ് പ്രോഗ്രാംഫോട്ടോഷോപ്പ്
- ഫോട്ടോ

നിർദ്ദേശങ്ങൾ

റൈറ്റ് ക്ലിക്ക് ചെയ്യുക പശ്ചാത്തല പാളി, ഡ്യൂപ്ലിക്കേറ്റ് ലെയർ തിരഞ്ഞെടുത്ത് ശരി (അല്ലെങ്കിൽ Ctrl+J) ക്ലിക്ക് ചെയ്യുക. എന്നിട്ട് സൃഷ്ടിക്കുക പുതിയ പാളി(Ctrl+Shift+N), സ്‌ക്രീൻഷോട്ടിൽ കാണിച്ചിരിക്കുന്നതുപോലെ പശ്ചാത്തലത്തിനും അതിൻ്റെ പകർപ്പിനുമിടയിൽ സ്ഥാപിക്കുക (നിങ്ങൾക്ക് ഇത് കുറച്ച് നിറത്തിൽ പൂരിപ്പിക്കാം, ഉദാഹരണത്തിന് വെള്ള). ലോക്ക് ചെയ്ത പാളി പ്രവർത്തനരഹിതമാക്കുക (ഇടതുവശത്തുള്ള "കണ്ണിൽ" ക്ലിക്ക് ചെയ്യുക) അല്ലെങ്കിൽ അത് ഇല്ലാതാക്കുക.

ടൂൾ പാലറ്റിൽ, ദീർഘചതുരം (ദീർഘചതുരം ടൂൾ) ഉള്ള ബട്ടൺ കണ്ടെത്തി ഇടത് മൗസ് ബട്ടൺ ഉപയോഗിച്ച് അമർത്തിപ്പിടിക്കുക. പ്രത്യക്ഷപ്പെടും അധിക മെനുആവശ്യമുള്ളിടത്ത് (വൃത്താകൃതിയിലുള്ള ദീർഘചതുരം ഉപകരണം). സ്‌ക്രീൻഷോട്ടിലെന്നപോലെ മുകളിലെ ഭാഗത്തെ ക്രമീകരണങ്ങൾ സജ്ജമാക്കുക, കൂടാതെ റേഡിയസ് ഫീൽഡ് നിങ്ങളുടെ അഭിരുചിക്കനുസരിച്ച് മാറ്റുക (വലുത്, കോണുകൾ കൂടുതൽ വൃത്താകൃതിയിലായിരിക്കും, കൂടാതെ ചിത്രം ക്രോപ്പ് ചെയ്യപ്പെടും.

തുടർന്ന് നിങ്ങൾ ഉപയോഗിക്കാൻ ആഗ്രഹിക്കുന്ന ഫോട്ടോയുടെ ഭാഗം തിരഞ്ഞെടുക്കുക (ഉദാഹരണത്തിന്, അവതാർ ആയി). നിങ്ങൾ ഒരു തെറ്റ് ചെയ്താൽ, ക്ലിക്ക് ചെയ്യുക Esc കീകൂടാതെ തിരഞ്ഞെടുക്കൽ ആവർത്തിക്കുക. ശേഷം ആവശ്യമായ ശകലംഹൈലൈറ്റ് ചെയ്യും, അതിൽ ക്ലിക്ക് ചെയ്യുക വലത് ക്ലിക്കിൽമൗസ് തിരഞ്ഞെടുത്ത് തിരഞ്ഞെടുക്കൽ തിരഞ്ഞെടുക്കുക... ശരി ക്ലിക്കുചെയ്യുക.

പൂർത്തിയായി, നിങ്ങൾക്ക് വൃത്താകൃതിയിലുള്ള കോണുകളുള്ള ഒരു ഫോട്ടോ ലെയർ ഉണ്ട്. ഇപ്പോൾ ലെയർ 2 (പശ്ചാത്തലമായി വർത്തിക്കുന്ന ഒന്ന്) ഏത് നിറത്തിലും നിറയ്ക്കാം അല്ലെങ്കിൽ സുതാര്യമായി ഇടാം.

വിഷയത്തെക്കുറിച്ചുള്ള വീഡിയോ

കുറിപ്പ്

സുതാര്യമായ png ഫയലുകൾ - വലിയ ഫോർമാറ്റ്, എന്നിരുന്നാലും, എല്ലാ ഓൺലൈൻ സേവനങ്ങളും അല്ല ( സോഷ്യൽ മീഡിയ, ബ്ലോഗുകൾ മുതലായവ) സുതാര്യമായ png ഫയലുകളെ പിന്തുണയ്ക്കുന്നു. വൃത്താകൃതിയിലുള്ള കോണുകളുടെ പ്രഭാവം പ്രവർത്തിക്കുന്നില്ലെങ്കിൽ, മറ്റൊരു വഴിയുണ്ട്.

ഇതിനായി തിരഞ്ഞെടുക്കുക പശ്ചാത്തലം(ലെയർ 2) നിങ്ങൾ ഫോട്ടോ സ്ഥാപിക്കുന്ന പേജിലെ ഒരു സെറ്റിനോട് ഏറ്റവും അടുത്തുള്ള നിറമാണ്. എന്നിട്ട് ഫയൽ jpg ഫോർമാറ്റിൽ സേവ് ചെയ്യുക.

എല്ലാവർക്കും സുപ്രഭാതം, ഉച്ചയ്ക്ക്, വൈകുന്നേരം അല്ലെങ്കിൽ രാത്രി. ദിമിത്രി കോസ്റ്റിൻ വീണ്ടും വീണ്ടും നിങ്ങളോടൊപ്പമുണ്ട്. എങ്ങനെയൊക്കെയോ ഞാൻ നോക്കിക്കൊണ്ടിരുന്നു വ്യത്യസ്ത ചിത്രങ്ങൾഎന്നിട്ട് അവയിൽ ചിലത് എനിക്കിഷ്ടപ്പെട്ടു. വൃത്താകൃതിയിലുള്ള അരികുകളുള്ളതിനാൽ അവ ഇഷ്ടപ്പെട്ടു. ഇത് ഉടനടി കൂടുതൽ രസകരമായി തോന്നുന്നു. നിങ്ങൾക്ക് അങ്ങനെ തോന്നുന്നില്ലേ? അതുകൊണ്ടാണ് ഇന്നത്തെ പാഠത്തിൽ, ഫോട്ടോ കൂടുതൽ രസകരമാക്കാൻ ഫോട്ടോഷോപ്പിൽ കോണുകൾ എങ്ങനെ റൗണ്ട് ചെയ്യാമെന്ന് ഞാൻ നിങ്ങളോട് പറയാൻ ആഗ്രഹിക്കുന്നു.

ഫോട്ടോഷോപ്പിൽ ഞാൻ ഇഷ്ടപ്പെടുന്നത് പല സന്ദർഭങ്ങളിലും ഒരേ കാര്യം പല തരത്തിൽ ചെയ്യാൻ കഴിയും എന്നതാണ്. അതിനാൽ അത് ഇവിടെയുണ്ട്. നമുക്ക് നമ്മുടെ ഫോട്ടോഷോപ്പ് ആരംഭിക്കാം.

അതിരുകൾ ഉപയോഗിച്ച് സുഗമമാക്കുന്നു

ഈ രീതി മുമ്പത്തേതിന് സമാനമാണ്, പക്ഷേ ഇപ്പോഴും വളരെ വ്യത്യസ്തമാണ്. ഞങ്ങൾ എല്ലാം ഒരേ ഇമേജ് ഉപയോഗിച്ച് ചെയ്യും.

ഒരു രൂപം സൃഷ്ടിച്ചുകൊണ്ട്

മൂന്നാമത്തെ രീതി ഇതിനകം മുമ്പത്തെ രണ്ടിൽ നിന്ന് തികച്ചും വ്യത്യസ്തമാണ്. അതിനാൽ കുറച്ച് സെക്കൻഡ് ഇടവേള എടുത്ത് മുന്നോട്ട് പോകുക. ഞാൻ ചിത്രം മാറ്റില്ല, ഈ കാർ വീണ്ടും ഫോട്ടോഷോപ്പിലേക്ക് ലോഡ് ചെയ്യും.

നിങ്ങൾ എന്താണ് അവസാനിപ്പിച്ചതെന്ന് നിങ്ങൾ കാണുന്നുണ്ടോ? ചിത്രത്തിന് വൃത്താകൃതിയിലുള്ള അരികുകൾ ഉണ്ട്, എല്ലാം നമ്മുടെ വരച്ച വൃത്താകൃതിയിലുള്ള ദീർഘചതുരം ഉള്ളിടത്ത് മാത്രം പ്രദർശിപ്പിക്കുന്നതിനാൽ. എന്നാൽ ഇപ്പോൾ നിങ്ങൾക്ക് "ഫ്രെയിം" ടൂൾ ഉപയോഗിച്ച് അധിക ഫോട്ടോ ക്രോപ്പ് ചെയ്യാം, അല്ലെങ്കിൽ നിങ്ങൾക്ക് ഉടനടി ചിത്രം സംരക്ഷിക്കാം, നിങ്ങൾക്ക് ഇതിനകം തന്നെ ലഭിക്കും പ്രത്യേക ചിത്രംവൃത്താകൃതിയിലുള്ള കോണുകൾ.

എല്ലാം സ്വയം ചെയ്യാൻ ശ്രമിക്കുക, അതേ സമയം അവതരിപ്പിച്ച രീതികളിൽ ഏതാണ് നിങ്ങൾക്ക് കൂടുതൽ അഭികാമ്യമെന്ന് എന്നോട് പറയുക.

കൂടാതെ, നിങ്ങൾക്ക് ഫോട്ടോഷോപ്പിൽ വിടവുകളുണ്ടെങ്കിൽ അല്ലെങ്കിൽ അത് പൂർണ്ണമായി പര്യവേക്ഷണം ചെയ്യാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ എത്രയും പെട്ടെന്ന്, എങ്കിൽ നിങ്ങൾ ഒന്ന് കാണാൻ ഞാൻ വളരെ ശുപാർശ ചെയ്യുന്നു തുടക്കക്കാർക്കുള്ള മികച്ച ഫോട്ടോഷോപ്പ് കോഴ്സ്. കോഴ്‌സ് നന്നായി ചെയ്തു, എല്ലാം പറയുകയും കാണിക്കുകയും ചെയ്യുന്നു, കൂടാതെ ഓരോ മെറ്റീരിയലും വളരെ വിശദമായി ചർച്ചചെയ്യുന്നു.

ശരി, ഞാൻ ഇന്നത്തെ പാഠം പൂർത്തിയാക്കുകയാണ്. പുതിയ ലേഖനങ്ങൾക്കായി സബ്‌സ്‌ക്രൈബ് ചെയ്യാനും ഇത് നിങ്ങളുടെ സുഹൃത്തുക്കളുമായി പങ്കിടാനും മറക്കരുത്. നിങ്ങളെ എൻ്റെ ബ്ലോഗിൽ കണ്ടതിൽ സന്തോഷം. ഞാൻ വീണ്ടും നിങ്ങൾക്കായി കാത്തിരിക്കുന്നു. ബൈ ബൈ.

ആശംസകളോടെ, ദിമിത്രി കോസ്റ്റിൻ

വെബ്സൈറ്റ് ഡിസൈനിലെ പരമ്പരാഗത ചതുരാകൃതിയിലുള്ള കോണുകളിൽ എല്ലാവരും വളരെക്കാലമായി മടുത്തു. വൃത്താകൃതിയിലുള്ള കോണുകൾ ഫാഷനിലാണ്, അവ ചിത്രങ്ങൾ ഉപയോഗിച്ചല്ല നിർമ്മിച്ചിരിക്കുന്നത്, എന്നാൽ ബോർഡർ-റേഡിയസ് പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്ന ശൈലികളിലൂടെയാണ്. ഈ പ്രോപ്പർട്ടിക്ക് ഒന്നോ രണ്ടോ മൂന്നോ നാലോ മൂല്യങ്ങൾ ഒരു സ്‌പെയ്‌സ് ഉപയോഗിച്ച് വേർതിരിക്കാനാകും, അത് എല്ലാ കോണുകളുടെയും അല്ലെങ്കിൽ ഓരോന്നിൻ്റെയും ആരം നിർണ്ണയിക്കുന്നു.

പട്ടികയിൽ 1 നൽകി വ്യത്യസ്ത അളവുകൾമൂല്യങ്ങളും ഈ കേസിൽ ലഭിക്കുന്ന ബ്ലോക്കിൻ്റെ തരവും.

കോഡ്	വിവരണം	കാണുക
div (ബോർഡർ-റേഡിയസ്: 10px;)	എല്ലാ കോണുകൾക്കും ഒരേസമയം റൗണ്ടിംഗ് ആരം.
div (ബോർഡർ-റേഡിയസ്: 0 10px; )	ആദ്യ മൂല്യം മുകളിൽ ഇടത്, താഴെ വലത് കോണുകളുടെ ആരം സജ്ജീകരിക്കുന്നു, രണ്ടാമത്തെ മൂല്യം മുകളിൽ വലത്തോട്ടും താഴെ ഇടത്തോട്ടും ആരം സജ്ജമാക്കുന്നു.
div (ബോർഡർ-റേഡിയസ്: 20px 10px 0;)	ആദ്യ മൂല്യം മുകളിൽ ഇടത് കോണിൻ്റെ ആരം സജ്ജമാക്കുന്നു, രണ്ടാമത്തേത് - മുകളിൽ വലത്, താഴെ ഇടത്, മൂന്നാമത്തെ മൂല്യം - താഴെ വലത്.
div (ബോർഡർ-റേഡിയസ്: 20px 10px 5px 0;)	മുകളിൽ ഇടത്, മുകളിൽ വലത്, താഴെ വലത്, താഴെ ഇടത് കോണുകളുടെ ആരം ക്രമാനുഗതമായി സജ്ജമാക്കുന്നു.

വൃത്താകൃതിയിലുള്ള കോണുകളുള്ള ഒരു ബ്ലോക്ക് എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് ഉദാഹരണം 1 കാണിക്കുന്നു.

ഉദാഹരണം 1. ഒരു ബ്ലോക്കിൻ്റെ കോണുകൾ

HTML5 CSS3 IE 9+ Cr Op Sa Fx

ആരം

ഐ എന്ന ആക്ഷേപ കേസിൻ്റെ അനുബന്ധ രൂപമാണ് ഞാൻ.

ഫലമായി ഈ ഉദാഹരണംചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 1.

അരി. 1. വൃത്താകൃതിയിലുള്ള കോണുകൾ ഉപയോഗിച്ച് തടയുക

വൃത്താകൃതിയിലുള്ള ആരം മൂലകത്തിൻ്റെ പകുതി ഉയരത്തിലും വീതിയിലും കൂടുതലായി സജ്ജമാക്കിയാൽ രസകരമായ ഒരു പ്രഭാവം ലഭിക്കും. ഈ സാഹചര്യത്തിൽ, നിങ്ങൾക്ക് ഒരു സർക്കിൾ ലഭിക്കും. ഒരു ചിത്രത്തിനൊപ്പം ഒരു റൗണ്ട് ബട്ടൺ എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് ഉദാഹരണം 2 കാണിക്കുന്നു.

ഉദാഹരണം 2: റൗണ്ട് ബട്ടൺ

HTML5 CSS3 IE 9+ Cr Op Sa Fx

ബട്ടൺ