Mga bloke na may mga bilugan na sulok sa mga halimbawa ng html. Pag-ikot sa mga sulok ng isang larawan sa Photoshop

Pagbati, Mga Kaibigan. Ang artikulong ito ay lubos na nakatuon sikat na paksa sa mga baguhang webmaster - bilugan Mga sulok ng CSS . Ang mga tanong na susubukan kong sagutin ay kung paano gumawa ng mga bilugan na sulok ng mga elemento ng website gamit lamang ang CSS nang hindi gumagamit ng anumang mga imahe.

SA ang pamamaraang ito may mga kalamangan at kahinaan. Ang mga pakinabang, siyempre, ay hindi na kailangang lumikha ng mga imahe gamit ang anuman graphics editor, i-upload ang mga ito sa server, at pagkatapos ay ayusin ang mga ito gamit ang gamit ang CSS sa mga kinakailangang lugar upang lumikha ng nais na epekto. Sa kasong ito ito ay kinakailangan upang lumikha karagdagang elemento sa HTML code, at magsulat din mga indibidwal na katangian para sa bawat isa sa kanila.

Tulad ng para sa mga minus, isang problema ang maaaring mapansin dito - ang ari-arian na ito ay hindi suportado ng lahat ng mga web browser, lalo na para sa mga lumang bersyon iba't ibang mga browser.

Gayunpaman, ang mga rounding corner gamit ang CSS ay nagiging mas at mas sikat. Tulad ng maaaring naunawaan mo na, sa artikulong ito ay gagamit kami ng property na available sa CSS 3.

Mga bilugan na sulok gamit ang CSS.

Kaya halimbawa kukuha kami ng block DIV elemento at gawing bilugan ang mga sulok nito. Halimbawa, gumawa tayo ng block at magtalaga ng mga katangian dito nang direkta sa HTML code gamit ang style attribute. Una mayroon kaming isang elemento ng bloke na puno ng background ng anumang kulay:

Sa pamamagitan ng paraan, kung kailangan mong malaman kung anong color code ang mayroon ka sa iyong website o sa anumang iba pang website, ito ay magiging kapaki-pakinabang.

At ito ay kung paano natin ito makikita sa isang web browser:

Ngayon, upang ikot ang mga sulok, gagamitin namin ang "border-radius" na pag-aari, na maaaring isalin bilang radius ng hangganan. Oo, eksaktong ganyan, at hindi tulad ng iniisip ng marami, na ito ang radius ng frame o kung ano ang tawag nila dito (border). Partikular na responsable ang property na ito para sa radius ng mga hangganan ng elemento, at hindi para sa mga frame o hangganan nito, na maaaring wala. Gayunpaman, gagana pa rin ang ari-arian nang wala gamit ang hangganan sa elemento. Sana naintindihan mo ang gusto kong sabihin. Ang halaga para sa property na ito ay anuman mga numerong halaga, na naaangkop sa CSS, tulad ng mga porsyento, mga pixel (px), mga puntos (pt) at iba pa. Oo, at dapat itong isaalang-alang ari-arian na ito gumagana sa lahat ng apat na sulok ng elemento nang sabay-sabay bilang karagdagan, maaari mong tukuyin ang ibang radius para sa bawat sulok, ngunit higit pa sa susunod. Una, itakda natin ang radius ng mga sulok ng ating parihaba. Hayaan itong maging katumbas ng 5 pixels:

Pagkatapos ang elemento ay magiging ganito:

Ngayon, iminumungkahi kong malaman kung paano magdagdag ng iyong sariling radius para sa bawat sulok nang hiwalay. Para magawa ito, maaari tayong gumamit ng property na maaaring ilapat sa bawat anggulo nang hiwalay. Kung pinag-uusapan natin ang nakaraang halimbawa, kung gayon sa buong anyo ang mga katangian para sa elemento ay magiging ganito:

Border-top-left-radius:5px; /* kaliwang sulok sa itaas */ border-top-right-radius:5px; /* kanang sulok sa itaas */ border-bottom-right-radius:5px; /* kanang sulok sa ibaba */ border-bottom-left-radius:5px; /* kaliwang sulok sa ibaba */

Iyon ay, kung gusto naming itakda ang bawat sulok sa sarili nitong halaga, mayroon kaming pagkakataong ito, at upang matiyak na ito ay kinuha namin ang sumusunod na code:

At pagkatapos ay makuha namin ang resultang ito:

Tulad ng nakikita natin, ang hangganan ng bawat sulok ay may sariling halaga ng radius.
Bilang karagdagan, pinapayagan kami ng CSS na magtakda ng halaga para sa hangganan ng bawat sulok sa form maikling tala, na magiging ganito:

Kung saan ang mga halaga ay susunod sa ganitong pagkakasunud-sunod:

Border-radius: 5px /* kaliwang sulok sa itaas */ 10px /* kanang sulok sa itaas */ 15px /* kanang sulok sa ibaba */ 20px /* kaliwang sulok sa ibaba */;

Alinsunod dito, batay sa itaas, nagiging malinaw na sa parehong paraan maaari nating itakda ang hangganan ng radius para lamang sa tatlo (isa o dalawang) sulok:

Ito ang hitsura sa isang web browser:

Kung hindi ka pa ganap na nalilito, pagkatapos ay magpatuloy tayo. Ang katotohanan ay ang radius para sa bawat hangganan ng sulok ay maaaring tukuyin hindi sa isang halaga, tulad ng tinalakay natin sa itaas, ngunit sa dalawa. Iyon ay, dalawang halaga para sa bawat anggulo. Sa kasong ito, ang unang halaga ay magtatakda ng radius para sa sulok nang pahalang, at ang pangalawang halaga ay magtatakda ng radius nang patayo. Magsimula muna tayo sa isang sulok:

Sa halimbawang ito, naapektuhan lang namin ang itaas na kaliwang sulok ng elemento:

Kung babaligtarin mo ang mga halaga, ang elemento ay magiging ganito:

Para bang doon na lang natapos, pero hindi. May isa pang trick. Sa isang value ng property, maaari tayong gumamit ng slash (/) sa pagitan ng mga value. Ang slash ay maaaring makatulong sa amin na pagsamahin ang mga halaga sa iba pang mga halaga. Sa pangkalahatan, mas madaling ipakita kaysa sabihin. Magsimula tayo sa isang bagay na simple. Ipagpalagay natin na kailangan natin ang horizontal radius na 35 pixels at ang vertical radius ay 5. Bukod dito, ang mga value na ito ay dapat na nalalapat sa lahat ng sulok. Pagkatapos ay maaari tayong sumulat ng ganito:

At makuha ang resultang ito:

Ngayon tingnan natin ang isang mas kumplikadong halimbawa:

SA sa kasong ito ang halaga bago ang slash sign (/) ay mauugnay sa pahalang na radius ng sulok, at pagkatapos ng sign sa patayo. Sa kasong ito, ang mga halaga ay magkakaugnay sa bawat isa sa ganitong paraan:

Border-top-left-radius: 20px 15px; border-top-right-radius: 10px 25px; border-bottom-right-radius: 40px 15px; border-bottom-left-radius: 10px 25px;

At ang resulta ay magiging ganito:

At sa dulo ng artikulo, pag-usapan natin ang tungkol sa suporta iba't ibang mga browser ng ari-arian na ito.

Paikot-ikot na sulok sa iba't ibang web browser.

Ito ay nagkakahalaga na tandaan dito na ang property na ito ay hindi suportado ng lahat ng mga bersyon ng browser. Sinusuportahan ang property sa IE9+, Firefox 4+, Chrome, Safari 5+, at Opera.
Ngunit para sa ilang bersyon ng browser na hindi sumusuporta sa property na ito, may mga hindi karaniwang property na nagdaragdag ng tinatawag na prefix o prefix sa property.
Chrome bago ang bersyon 4.0, Safari bago ang bersyon 5.0, ginagamit ng iOS ang hindi karaniwang pag-aari -webkit-border-bottom-left-radius.
Ginagamit ng Firefox bago ang bersyon 4.0 ang hindi karaniwang pag-aari -moz-border-radius-bottomleft.
Sa kasong ito, kakailanganin naming i-duplicate ang property gamit ang mga prefix na ito. Halimbawa, kung mayroon kaming set ng property para sa kaliwang hangganan itaas na sulok isang halaga na katumbas ng limang pixel:

Border-top-left-radius: 5px;

Pagkatapos, ang property, na nagdo-duplicate nito gamit ang mga prefix, ay magiging ganito:

Webkit-border-bottom-left-radius:5px; -moz-border-radius-bottomleft:5px; border-top-left-radius: 5px;

Inaasahan ko talaga na naipaliwanag ko nang malinaw ang lahat at naiintindihan mo na ngayon kung paano gumawa ng mga rounded corner gamit lamang ang CSS.
Good luck sa iyo!

CSS3 frame pinupunan ang kakayahang mag-format ng mga hangganan ng elemento na may mga katangiang nagbibigay-daan ikot sa mga sulok elemento, at gamitin din Mga imahe upang idisenyo ang mga hangganan ng elemento.

Mga bilugan na sulok at picture frame

1. Rounding corners na may border-radius

Suporta sa browser

IE: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome para sa Android: 44

Nagbibigay-daan sa iyo ang property na bilugan ang mga sulok ng lowercase at mga elemento ng block. Ang curve para sa bawat anggulo ay tinukoy gamit ang isa o dalawang radii na tumutukoy sa hugis nito − bilog o ellipse. Ang radius ay nalalapat sa buong background, kahit na ang elemento ay walang hangganan, ang eksaktong posisyon ng secant ay tinutukoy gamit ang background-clip property.

Binibigyang-daan ka ng border-radius property na bilugin ang lahat ng sulok nang sabay-sabay, at gamit ang border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius na katangian mo maaaring paikutin ang bawat sulok nang hiwalay.

Kung magtatakda ka ng dalawang value para sa border-radius property, ang unang value ay ipapaikot ang kaliwang itaas At kanang sulok sa ibaba, at ang pangalawa - kanang itaas At babang kaliwa.

Ang mga halaga ay tinukoy sa pamamagitan ng / tinutukoy pahalang At patayong radii. Ang ari-arian ay hindi minana.

Mga pagpipilian

Div (lapad: 100px; taas: 100px; border: 5px solid;).r1 (border-radius: 0 0 20px 20px;).r2 (border-radius: 0 10px 20px;).r3 (border-radius: 10px 20px). ;) .r4 (border-radius: 10px/20px;). border-radius: 50%;).r8 (border-top: none; border-bottom: none; border-radius: 30px/90px;).r9 (border-bottom-left-radius: 100px;).r10 (border -radius: 0 100%;).r11 (border-radius: 0 50% 50% 50%;).r12 (border-top-left-radius: 100% 20px; border-bottom-right-radius: 100% 20px ;)
kanin. 1. Mga halimbawa iba't ibang mga pagpipilian pabilog na mga sulok ng bloke

2. Border-image

Suporta sa browser

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Chrome: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android Browser: 4.4, 4.1 -webkit-
Chrome para sa Android: 42

Binibigyang-daan ka ng property na magtakda ng larawan bilang frame ng elemento. Ang pangunahing kinakailangan para sa imahe ay dapat itong simetriko. Kasama sa ari-arian sumusunod na mga halaga: (border-image: width source slice repeat outset;) .

Sa tulong nito simpleng imahe Makukuha mo ang mga frame na ito para sa isang elemento.

/* Halimbawa 1 */ div ( width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: stretch; ) /* Halimbawa 2 */ div ( width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round. png); border-image-slice: 30;
kanin. 2. Isang halimbawa ng pagdidisenyo ng mga hangganan ng bloke gamit ang isang imahe

Ang mga cut A - B - C - D ay bumubuo sa mga sulok ng frame, at ang bahagi ng disenyo na matatagpuan sa pagitan ng mga ito ay pumupuno sa natitirang espasyo ng frame alinsunod sa binigay na halaga border-image-repeat properties. Ang laki ng bahagi ng sulok (sa halimbawang ito ang numero 30) ay itinakda gamit ang halaga ng border-image-slice property.

2.1. hangganan-larawan-lapad

Tinutukoy ng property ang lapad ng larawan para sa hangganan ng elemento. Kung ang lapad ay hindi tinukoy, ito ay magiging default sa 1.

border-image-width
Mga halaga:
haba	Itinatakda ang lapad ng hangganan sa mga yunit ng haba - px / em . Maaari kang magtakda ng isa hanggang apat na halaga sa isang pagkakataon. Kung ang isang halaga ay tinukoy, kung gayon ang lapad ng lahat ng panig ng frame ay pareho, ang dalawang halaga ay tumutukoy sa lapad ng tuktok-ibaba at kanan-kaliwa, atbp.
numero	Ang numeric na halaga kung saan pinaparami ang halaga ng lapad ng hangganan.
%	Ang lapad ng hangganan ng elemento ay kinakalkula kaugnay sa laki ng larawan. Pahalang na may kaugnayan sa lapad, patayo - may kaugnayan sa taas.
sasakyan	Tumutugma sa halaga ng border-image-slice.
inisyal
magmana

Syntax

Div (border-image-width: 30px;) Fig. 3. Isang halimbawa ng pagtatakda ng lapad ng isang frame ng larawan gamit iba't ibang uri mga halaga

2.2. border-image-source

Tinukoy ng property ang landas patungo sa larawan na gagamitin upang palamutihan ang mga hangganan ng bloke.

Syntax

Div (border-image-source: url(border.png);)

2.3. mga elemento ng border-image-slice

Tinutukoy ng property ang laki ng mga bahagi ng larawan na ginamit upang tukuyin ang mga hangganan ng elemento at hinahati ang larawan sa siyam na bahagi: apat na sulok, apat na gilid sa pagitan ng mga sulok, at isang gitnang bahagi.


Mga halaga:
numero	Ang laki ng mga bahagi ng frame ay maaaring itakda gamit ang isa, dalawa, tatlo o apat na halaga. Itinatakda ng isang halaga ang mga hangganan na magkapareho ang laki sa bawat panig ng elemento. Dalawang halaga: tinutukoy ng una ang laki ng tuktok at mababang limitasyon, ang pangalawa - kanan at kaliwa. Tatlong halaga: tinutukoy ng una ang laki ng hangganan sa itaas, ang pangalawa - ang kanan at kaliwa, at ang pangatlo - ang hangganan sa ibaba. Apat na halaga: Tinutukoy ang mga sukat ng itaas, kanan, ibaba, at kaliwang mga hangganan. Ang numeric na halaga ay kumakatawan sa bilang ng px.
%	Ang mga laki ng hangganan ay kinakalkula kaugnay ng laki ng larawan. Pahalang na may kaugnayan sa lapad, patayo - may kaugnayan sa taas.
punan	Ang halaga ay ipinahiwatig kasama ng isang numero o porsyento. Kung tinukoy, ang imahe ay hindi pinuputol ng panloob na gilid ng frame, ngunit pinupuno din ang lugar sa loob ng frame.
inisyal	Itinatakda ang property na ito sa default na value nito.
magmana	Inherits ang value ng property na ito mula sa parent element.

Syntax

Div (border-image-slice: 50 20;)
kanin. 4. Isang halimbawa ng pagtukoy ng mga hiwa ng frame ng larawan

2.4. border-image-repeat

Kinokontrol ng property ang padding larawan sa background puwang sa pagitan ng mga sulok ng frame. Maaaring tukuyin gamit ang alinman sa isang halaga o isang pares ng mga halaga.

Syntax

Div (border-image-repeat: repeat;) Fig. 5. Halimbawa ng pag-uulit sa gitnang bahagi ng isang frame ng larawan gamit ang iba't ibang uri ng mga halaga

2.5. border-image-outset

Binibigyang-daan ka ng property na ilipat ang frame ng larawan sa kabila ng mga hangganan ng elemento sa pamamagitan ng isang tinukoy na haba. Maaaring tukuyin gamit ang isa o apat na halaga.

Syntax

Div (border-image-outset: 10px;)
kanin. 6. Isang halimbawa ng paglilipat ng frame ng larawan gamit ang iba't ibang uri ng mga halaga

3. Outer frame offset outline-offset

Tinutukoy ng property ang distansya sa pagitan ng border ng elemento ng border at ng panlabas na border na ginawa gamit ang outline property.

/*Figure 1:*/ img ( border: 1px solid pink; outline: 1px dashed gray; outline-offset: 3px; ) /*Figure 2:*/ img ( border-width: 1px 10px; border-style: solid; kulay ng hangganan: pink na outline: 1px na guhit na kulay abo;

kanin. 7. Isang halimbawa ng dekorasyon ng isang imahe na may panlabas na frame

4. Gradient na frame

Ang halaga ng border-image ay maaaring hindi lamang isang imahe, kundi pati na rin isang gradient fill.

Translucent na frame

Ang isa sa mga kulay ay transparent. Sa ganitong paraan, maaari kang magtakda ng mga hangganan para sa lahat ng panig ng isang elemento nang sabay-sabay o hiwalay para sa bawat panig. Ang kapal ng hangganan ay kinokontrol ng property na lapad ng hangganan.

* (box-sizing:border-box;).wrap ( height: 200px; padding: 25px; background: #00E4F6; ) .gradient ( height: 150px; width: 50%; margin: 0 auto; border: 10px solid transparent ; border-image: linear-gradient(pakanan, transparent 0%, #ADF2F7 100%);

Postal na sobre

* (box-sizing:border-box;).wrap ( height: 200px; padding: 25px; ) .gradient ( height: 150px; width: 50%; margin: 0 auto; border: 10px solid transparent; border-image: 10 repeating-linear-gradient(45deg, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px, transparent 30px, transparent 40px )

CTRL+N, o piliin ang function na “Lumikha” sa drop-down na listahan mula sa menu na “File”. Susunod, mula sa parehong listahan, piliin ang "Import" na operasyon o tawagan ito gamit ang CTRL+I key na kumbinasyon. Susunod, tukuyin ang landas sa file ng imahe sa dialog box at i-click ang pindutang "I-import". Ang sa iyo ay ipapakita sa isang ito.

Sa toolbar, hanapin ang rollout na "Node Editor" at piliin ang tool na "Hugis". Ang tool na ito ay maaari ding tawagan sa pamamagitan ng pagpindot sa F10 key.

Sa kanan ng sulok kailangan mong bilugan, mag-left-click sa hangganan ng larawan. lalabas bagong node sa larawan, bilang karagdagan sa apat na sulok. Susunod, piliin ang opsyon na Convert Line To Curve sa panel ng Node Editor. Lilitaw ang mga round mark sa kaliwa ng bagong likhang node.

Sa parehong distansya mula sa sulok, magdagdag ng bagong node sa perpendikular na bahagi ng larawan. Nang hindi binabago ang tool na Hugis, i-double click ang pangunahing node ng sulok, tatanggalin ito. Ang bilugan na sulok ng imahe ay agad na magiging kapansin-pansin. Maaari mong gamitin ang mga marka ng gabay sa tuwid na linya upang baguhin ang radius ng sulok.

napaka sa simpleng paraan(gamit ang vector object) kahit ano ay posible mga anggulo sa isang hugis-parihaba na imahe. Nang walang resorting sa ang pamamaraang inilarawan sa itaas pag-edit ng mga node, gumuhit ng parihaba na may parehong laki sa tabi ng na-import na imahe gamit ang Rectangle Tool o tawagan ang tool gamit ang F6 key.

Gamit ang tool na "Hugis" na pamilyar sa iyo, mag-click sa parihaba at i-drag ang mouse sa alinman sa mga node nito patungo sa parihaba. Ang mga sulok ay bilugan. Ang radius ng curvature ay maaaring iakma gamit ang parehong tool.
Markahan ang iyong larawan gamit ang arrow ng Pick Tool.
Susunod, sa listahan ng pangunahing menu, hanapin ang rollout na "Mga Epekto" at piliin ang opsyong "PowerClip" at ang function na "Place Inside Container" mula sa drop-down na listahan. Gumamit ng malawak na arrow upang ituro ang parihaba na iyong iginuhit gamit ang mga bilugan na sulok. Ito ang magiging frame kung saan ilalagay ang iyong larawan.

tala

Pakitandaan na kapag nag-import ka ng isang imahe sa isang dokumento Corel Draw orihinal na file Ang imahe ay hindi nabago, kaya maaari mo itong gamitin sa orihinal nitong anyo kung hindi ka nasisiyahan sa resulta ng mga bilugan na sulok.

Nakatutulong na payo

Gamit ang PowerClip function, maaari kang maglagay ng mga larawan sa iba't ibang mga frame ng pinakakakaibang mga hugis.

Mga Pinagmulan:

Opisyal na Gabay sa Corel Draw, M. Matthews, K. Matthews, 1997
Paano magpakinis matutulis na sulok?

Kakailanganin mong

- kompyuter
- Programa ng Adobe Photoshop
- larawan

Mga tagubilin

I-right click sa Layer ng background, piliin ang Duplicate Layer at i-click ang OK (o Ctrl+J). Pagkatapos ay lumikha bagong layer(Ctrl+Shift+N), ilagay ito sa pagitan ng background at kopya nito gaya ng ipinapakita sa screenshot (maaari mo itong punan ng ilang kulay, halimbawa puti). Huwag paganahin ang naka-lock na layer (i-click ang "mata" sa kaliwa) o tanggalin ito.

Sa tool palette, hanapin ang button na may rectangle (Rectangle Tool) at hawakan ito gamit ang kaliwang pindutan ng mouse. lalabas dagdag na menu kung saan kinakailangan (Rounded Rectangle Tool). Itakda ang mga setting sa itaas na bahagi sa kapareho ng sa screenshot, at baguhin ang patlang ng Radius sa iyong panlasa (mas malaki, mas magiging bilog ang mga sulok, at mas mai-crop ang imahe.

Pagkatapos ay piliin ang bahagi ng larawan na gusto mong gamitin (halimbawa, bilang isang avatar). Kung nagkamali ka, i-click Esc key at ulitin ang pagpili. Pagkatapos kinakailangang fragment ay mai-highlight, i-click ito i-right click mouse at piliin ang Make Selection... at i-click ang OK.

Tapos na, mayroon kang layer ng larawan na may mga bilugan na sulok. Ngayon ang Layer 2 (ang nagsisilbing background) ay maaaring punan ng anumang kulay o iwanang transparent.

Video sa paksa

tala

Mga transparent na png file - mahusay na format, gayunpaman, hindi lahat ng online na serbisyo ( Social Media, mga blog, atbp.) ay sumusuporta sa mga transparent na png file. Kung ang epekto ng mga bilugan na sulok ay hindi gumagana, mayroong isa pang paraan.

Pumili para sa background(Layer 2) ay ang kulay na pinakamalapit sa isang set sa page kung saan mo inilalagay ang larawan. Pagkatapos ay i-save ang file sa jpg na format.

Magandang umaga, hapon, gabi o gabi sa lahat. Si Dmitry Kostin ay kasama mo nang paulit-ulit. Kahit papaano ay nakatingin ako iba't ibang larawan at pagkatapos ay nagustuhan ko ang ilan sa kanila. At nagustuhan nila ang mga ito dahil bilugan ang mga gilid nito. Agad itong mukhang mas kawili-wili. Hindi mo ba iniisip? At iyon ang dahilan kung bakit sa aralin ngayon nais kong sabihin sa iyo kung paano mag-ikot sa mga sulok sa Photoshop upang gawing mas kawili-wili ang larawan.

Ang gusto ko sa Photoshop ay na sa maraming kaso ang parehong bagay ay maaaring gawin sa maraming paraan. Kaya ito ay dito. Magsimula tayo sa ating photoshop.

Antialiasing gamit ang mga gilid

Ang pamamaraang ito ay katulad ng nauna, ngunit ibang-iba pa rin. Gagawin namin ang lahat na may parehong imahe.

Sa pamamagitan ng paglikha ng isang hugis

Ang ikatlong paraan ay radikal na naiiba mula sa naunang dalawa. Kaya magpahinga ng ilang segundo at magpatuloy. Hindi ko babaguhin ang larawan at ilo-load muli ang kotseng ito sa Photoshop.

Nakikita mo ba kung ano ang natapos mo? Ang larawan ay may mga bilugan na gilid, at lahat dahil ito ay ipinapakita lamang kung saan ang aming iginuhit na bilog na parihaba. Ngunit maaari mo na ngayong i-crop ang karagdagang larawan gamit ang tool na "Frame", o maaari mong i-save kaagad ang larawan at magkakaroon ka na hiwalay na imahe may mga bilugan na sulok.

Subukang gawin ang lahat sa iyong sarili, at sa parehong oras sabihin sa akin kung alin sa mga ipinakita na pamamaraan ang mas kanais-nais sa iyo.

At sa pamamagitan ng paraan, kung mayroon kang mga gaps sa Photoshop o nais mo lamang na ganap na tuklasin ito sa madaling panahon, pagkatapos ay lubos kong inirerekumenda na manood ka ng isa mahusay na kurso sa photoshop para sa mga nagsisimula. Ang kurso ay mahusay na ginawa, ang lahat ay sinabi at ipinapakita lamang mahusay, at ang bawat materyal ay tinalakay sa mahusay na detalye.

Well, tinatapos ko ang aking aralin para sa araw na ito. Huwag kalimutang mag-subscribe para sa mga bagong artikulo at ibahagi ito sa iyong mga kaibigan. Natutuwa akong makita ka sa aking blog. Hinihintay na naman kita. Paalam.

Pinakamahusay na pagbati, Dmitry Kostin

Matagal nang pagod ang lahat sa tradisyonal na mga hugis-parihaba na sulok sa disenyo ng website. Ang mga bilugan na sulok ay nasa uso, na ginawa hindi gamit ang mga imahe, ngunit sa pamamagitan ng mga estilo, kung saan ginagamit ang pag-aari ng border-radius. Ang ari-arian na ito ay maaaring magkaroon ng isa, dalawa, tatlo o apat na halaga na pinaghihiwalay ng isang puwang, na tumutukoy sa radius ng lahat ng sulok o bawat isa nang paisa-isa.

Sa mesa 1 binigay iba't ibang dami mga halaga at ang uri ng bloke na nakuha sa kasong ito.

Code	Paglalarawan	Tingnan
div ( border-radius: 10px; )	Rounding radius para sa lahat ng sulok nang sabay-sabay.
div ( border-radius: 0 10px; )	Itinatakda ng unang halaga ang radius ng kaliwang itaas at kanang sulok sa ibaba, ang pangalawang halaga ay nagtatakda ng radius para sa kanang itaas at kaliwang ibaba.
div ( border-radius: 20px 10px 0; )	Itinatakda ng unang halaga ang radius ng kaliwang sulok sa itaas, ang pangalawa - parehong kanang itaas at kaliwang ibaba, at ang pangatlong halaga - ang kanang ibaba.
div ( border-radius: 20px 10px 5px 0; )	Sunud-sunod na itinatakda ang radius ng kaliwang itaas, kanang itaas, kanang ibaba at kaliwang sulok.

Ipinapakita ng Halimbawa 1 kung paano lumikha ng isang bloke na may mga bilugan na sulok.

Halimbawa 1. Mga sulok ng isang bloke

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Radius

Ang Me ay ang pandagdag na anyo ng accusative case ng I.

Resulta halimbawang ito ipinapakita sa Fig. 1.

kanin. 1. I-block na may mga bilugan na sulok

Ang isang kawili-wiling epekto ay maaaring makuha kung itatakda mo ang rounding radius na mas malaki sa kalahati ng taas at lapad ng elemento. Sa kasong ito, makakakuha ka ng isang bilog. Ipinapakita ng Halimbawa 2 kung paano gumawa ng round button na may larawan.

Halimbawa 2: Round button

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Pindutan