Tanong: Hugis + makinis na sulok
Magandang araw, mahal na mga gumagamit ng forum Mangyaring tulungan ako sa tanong na ito: gamit ang purong CSS kailangan mong lumikha ng sumusunod na hugis hexagon, ngunit may mga makinis na sulok.
Magpapasalamat ako sa anumang tulong, lalo na sa mga maagap.
Sagot:
Mensahe mula kay Sa dilim
Spirt Tesla, Salamat sa iyong tugon, ngunit walang mga problema sa pagbuo ng figure mismo, naisip ko na ito, ngunit ang pagpapakinis ng mga sulok ay isang problema na, Mangyaring sabihin sa akin - sa iyong code, kung anong mga parameter ang may pananagutan ang katangiang ito ng pigura?
Sa pangkalahatan, ang border-radius ay responsable para sa anti-aliasing
Tanong: Mga tamang anggulo
Tulungan akong gumawa ng mga tamang anggulo,Narito ang code
/rs- pag-reset ng account;
nasaan ang /rs mayroon akong tekstong ito sa isang bilugan na frame, ngunit paano ko gagawing may mga kanang sulok ang frame?
Sagot:
Tulungan akong gumawa ng mga tamang anggulo
Sa tingin ko, kahit na maghanap ka sa Google sa loob ng tatlong araw, wala kang makikita. Subukang maghanap pabalik, hanapin kung paano gumawa ng mga bilog na sulok, kung magtagumpay ka, matututunan mo kung paano gumawa ng mga parisukat.
Tanong: Paano gumawa ng mga naturang sulok para sa isang div
Magandang hapon
Paano gumawa ng gayong mga sulok para sa isang div.
Halimbawa:
Salamat!
Sagot: Pseudo-element na may ibinigay na mga sukat, halimbawa, ngunit mas madaling maglaro ng mga anino kung gusto mong gawin ang lahat ng 4 na sulok sa ganitong paraan.
box-shadow: X Y 0 -S #fff; - ang unang dalawang parameter ay mga offset sa x at y, ayon sa pagkakabanggit, ang pangatlong blur, dapat itong nasa zero, at ang ikaapat na parameter ay responsable para sa pag-compress ng anino kapag may minus (gusto mong maging maliit). Ang huli ay ang kulay ng anino.
Bagaman, kung ang iyong div mismo ay hugis-parihaba, at ang anino ay parisukat, kung gayon, tila, makatuwiran na gumawa ng isang transparent na pseudo-element na may mga sukat tulad ng anino, at nag-offset sa X at Y upang ikalat ang 4 na anino nito sa mga sulok ng ang div. Sa kasong ito, ang ika-apat na parameter ng box-shadow property ay magiging 0 din, baguhin lamang ang unang dalawa.
Tanong: (JS) Alamin ang tunay na anggulo ng pag-ikot ng div
Pagbati, mga miyembro ng forum.
Alam ko ang tungkol sa matrix(bla-bla) sines at cosine.
Postulate: "Alam" ng browser ang bilang ng mga pag-ikot ng isang elemento kung ang anggulo ay higit sa 360 degrees - malinaw naman mula sa karanasan.
Tanong: Posible bang kunin ang tunay na anggulo ng pag-ikot na ito?
Sagot: Nagtanong ako ng isang tiyak na tanong:
kung paano kunin ang isang pahina gamit ang isang script sa panahon ng operasyon buong kahulugan rotation angle diva.
Ang parehong 390 degrees na tinukoy sa css.
Tanong: ipatong ang isang larawan sa isa pa sa isang tiyak na anggulo
isang gawaing katulad ng sa fiddle. kailangan mong i-superimpose ang isang larawan sa isa pa, sa kabila ng katotohanan na ang ilalim na larawan ay nakatagilid. Hindi ko lang ito ma-line up ng maayos Sinubukan kong gumamit ng perspective sa CSS, matrix at iba pang mga pagbabago, ngunit ang mga sulok ng mga larawan ay palaging hindi tumatakbo. sa kasong ito, isang anggulo lamang ang maaaring hindi magkatugma. meron ba mga simpleng paraan, o maaari bang itama ang aking bersyon?
| HTML5 | ||
|
||
| CSS | ||
|
||
Sagot: Ginawa ko ito dati tulad ng ipinakita mo, at nakikita ko rin na gumagana ito sa fiddle, ngunit kahit gaano ko subukan sa site, walang gumagana. ang mga tuktok na sulok ay nananatili sa parehong antas, mayroon ka bang mairerekomenda?
Idinagdag pagkatapos ng 15 minuto
salamat, naisip ko
img
{
posisyon:ganap;
}
iyon ang problema
Tanong: Multiscroll plugin, button para tawagan ang menu sa kaliwa itaas na sulok may animation lang ba sa firefox?
website wsfox.ru
Multiscroll plugin
Bakit ang pindutan ng menu sa kaliwang sulok sa itaas ay mayroon lamang animation sa Firefox?
Sagot:
Mensahe mula kay Mashka_mulashka
Maaari mo rin bang sabihin sa akin kung bakit ang pindutan ng menu sa kaliwang sulok sa itaas ay may animation lamang sa Firefox?
Siguro bibigyan kita ng pahiwatig, ngunit mahusay din itong nag-animate sa Chrome
Idinagdag pagkatapos ng 7 minuto
Sa pangkalahatan, tila ang pangalan ng mga keyframe ay nakasulat sa harap, at sa iyo sa dulo, marahil iyon ang dahilan kung bakit hindi ito gumagana sa IE, ngunit hindi ako sigurado para sa
| CSS code | ||
|
||
Tanong: Tukuyin ang anggulo gamit ang mga linya ng canvas
Tingnan ang screenshot, kailangan mong hanapin ang anggulo na "C". Kung saan ang def.X/defY ay ang kasalukuyang posisyon ng baril ng baril (well, ang itim na shoot ay nakataas) at ngayonX/nowY ang kasalukuyang posisyon ng mouse cursor. Hindi na kailangang isulat na mayroon akong 2 sa geometry, mayroon akong 5 sa geometry. Iba ang problema, paano ko ito maisusulat nang tama sa JS?
Sagot: Mayroon ka bang mga coordinate ng mouse (ito ang mga gilid ng isang kanang tatsulok)
Ang natitira lamang ay upang malaman kung paano makahanap ng isang anggulo na alam ang haba ng dalawang binti
at ano ang gamit ng tangent sa trigonometry?
| Mensahe mula kay Vopub |
| Hindi na kailangang isulat na mayroon akong 2 sa geometry, |
May isang opinyon na ikaw ay tanga at hindi tama ang paglutas ng problemang kinakaharap mo. sinabi na nila sa iyo ang tungkol sa vector
Tanong: Mga bilugan na sulok sa parent block at pagpoposisyon elemento ng bata
Magandang araw
May dalawang problema.
1. Ang mga rounding corner ay hindi gumagana sa green block. Bagama't gumagana ang eksaktong parehong code sa bloke ng menu
| CSS | ||
|
||
Bakit kaya ganito?
2. Ang beige block ay nasa berdeng bloke, at dapat silang magkatabi at dapat may hangganan sa pagitan nila. Narito ang code:
| CSS | ||
|
||
Sagot: Salamat. Inisip ang aking mga pagkakamali
Idinagdag pagkatapos ng 25 minuto
Sa katunayan, ang pagkakamali ay itinakda ko ang mga sulok sa elemento ng magulang. Ngunit sa huli ay nagpasya akong isuko sila.
Hindi ko pinaghiwalay ang mga bloke, nagdagdag ako ng bagong class.right para sa buong kanang bahagi na may nilalaman at na-highlight ito sa puti. Samakatuwid, sa paningin ay tila mayroong 2 mga bloke at na sila ay hiwalay
| CSS | ||
|
||
Tanong: Naka-on ang slider ng larawan purong JavaScript
Guys, humihingi talaga ako ng tulong. Mangyaring ipaliwanag sa akin ang lohika ng slider sa purong JS. Ang Internet ay puno ng mga slider, ngunit lahat sila ay nasa JQuery, o napakakomplikado. Kailangan ko ng isang simpleng slider, isang arrow sa kaliwa - ang nakaraang imahe ay lilitaw, sa kanan - ang susunod, nang walang anumang mga kampanilya at sipol. Kamakailan lang ay natutunan ko ang JS, kaya hindi ko lubos na naiintindihan kung paano ito maipapatupad, at hindi ko maintindihan ang code ng mga kumplikadong slider dahil sa kakulangan ng karanasan. Ako ay lubos na nagpapasalamat sa iyong tulong.
Sagot: Demonyo26, tingnan mo dito, puro js lahat, may comments
Ang katangian ng box-shadow ay nagdaragdag ng isa o higit pang mga anino sa isang elemento. Ang anino ay isang kopya ng elemento na na-offset ng tinukoy na distansya. Ang mga anino ay maaaring panlabas o panloob, malabo o patag, at maaaring sundin ang mga balangkas ng mga bloke na may mga bilugan na sulok. Sa pamamagitan ng paggamit keyword Ang inset ay lumilikha ng mga anino sa loob ng elemento, na ginagawang visually voluminous o depress ang elemento.
Paano gumawa ng box shadow gamit ang box-shadow property
Suporta sa browser
IE: 9.0
gilid: 12.0
Firefox: 4.0, 3.5 -moz-
Chrome: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Opera: 11.5
iOS Safari: 5.1, 3.1 -webkit-
Android Browser: 4.0, 2.1 -webkit-
1. Box-shadow property syntax
Ang bawat anino ay tumatagal ng isa hanggang limang parameter: horizontal offset, vertical offset, blur radius (opsyonal), spread radius (opsyonal), at kulay ng anino. Ang mga anino ay hindi nakakaapekto sa layout at maaaring makabara mga kalapit na elemento o ang kanilang mga anino. Ang ari-arian ay hindi minana.
kanin. 1. Box-shadow property syntax | Mga halaga: | |
| x-offset | Kinakailangang halaga. Ang pahalang na offset ng anino na nauugnay sa block. Maaari itong tumagal ng parehong positibo at negatibong mga halaga, ang isang positibo ay inilipat ang anino sa kanan ng bloke, isang negatibo - sa kaliwa. |
| y-offset | Kinakailangang halaga. Ang patayong offset ng anino na nauugnay sa block. Maaari itong tumagal ng parehong positibo at negatibong mga halaga, positibong nagpapababa sa anino, negatibong nagpapagalaw sa anino pataas. |
| lumabo | Opsyonal na halaga. Tinutukoy ang blur radius ng anino. Paano mas malaking radius, mas malabo ang anino. Ang mga positibong halaga lamang ang maaaring gamitin. |
| lumalawak | Opsyonal, pinapalawak ang anino sa pamamagitan ng pagpapalapot ng solidong bahagi sa pagitan malabong mga gilid. Tumatanggap ng parehong positibo at negatibong mga halaga, na tinukoy sa mga yunit ng haba - px, atbp. |
| kulay | Opsyonal na halaga. Bilang default, ang anino ay itim. Upang itakda ang halaga na maaari mong gamitin sumusunod na mga format mga entry ng kulay: #RRGGBB , rgb(pula, berde, asul) , rgba(pula, berde, asul, alpha) . Para sa Safari, dapat tukuyin ang kulay ng anino. |
| inset | Lumilikha ng anino sa loob ng bloke. |
| wala | Ang default na halaga ay nangangahulugang walang anino. |
| inisyal | Itinatakda ang value ng property sa default na value. |
| magmana | Inherits ang property value mula sa parent element. |
2. I-block ang mga halimbawa ng anino
2.1. panloob na anino
.example-shadow-1 ( background: #e6e3df; text-align: center; ) .example-shadow-1 span ( margin: 50px; taas: 100px; lapad: 200px; display: inline-block; box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
2.2. Patag na anino sa isang gilid
patag
patag
.example-shadow-2 ( background: beige; text-align: center; ) .example-shadow-2 a ( display: inline-block; border-radius: 5px; padding: 15px 35px; font-size: 22px; margin : 20px; kulay: puti; background: #55acee;SA ang araling ito lilikha kami ng epekto ng mga kulot na sulok nang hindi gumagamit ng mga larawan o karagdagang mga marka. Gumagana ito nang mahusay sa lahat ng modernong browser at angkop para sa mga disenyo ng website na may mga simpleng scheme ng kulay.
Ginamit ang epektong ito sa demo para sa aralin na "Maramihang background at stroke gamit ang CSS2". Bilang karagdagan, ang paggamit ng mga kulot na sulok sa disenyo ng isang tunay na website ay makikita sa halimbawa ng Yiibu. Ngunit ang site ng Yiibu ay gumagamit ng mga larawan, at gumagamit kami ng mga pseudo-element at CSS.
Magsimula
Walang kumplikado. Kahit sino ay gagawin elemento at walang karagdagang markup ang kinakailangan. Nagsisimula ang lahat sa isang simpleng pininturahan na parihaba. Ang mga browser na hindi sumusuporta sa mga pseudo-element (IE6 at IE7) ay maglalabas din nito.
Ang pagdaragdag ng posisyon:relative property ay ginagawang posible ganap na pagpoposisyon pseudo-elemento.
Tandaan ( posisyon: kamag-anak; lapad:30%; padding:1em 1.5em; margin:2em auto; kulay:#fff; background:#97C02F; )
Ang isang nakatiklop na sulok ay ginawa gamit ang isang pseudo-element na nakaposisyon sa tuktok na sulok ng parihaba. Ang pseudo element ay walang lapad o taas, ngunit mayroon itong makapal na stroke. Sa pamamagitan ng pagbabago ng kapal ng stroke, babaguhin namin ang laki ng nakatiklop na sulok.
SA sa halimbawang ito Ang itaas at kanang bahagi ng stroke ay may mga kulay na tumutugma sa kulay ng background ng parent rectangle. Ang kaliwa at ibabang bahagi ng stroke ay may higit pa madilim na kulay o mas magaan kaysa sa kulay ng background ng parihaba.
Note:before ( content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#658E15 #fff; )
Iyon lang ang kailangan mong likhain simpleng epekto nakatiklop na sulok, katulad ng ginamit sa site ng Yiibu.
Hindi pinapayagan ng Firefox 3.0 ang pagpoposisyon ng mga pseudo-element. Maaari kang gumamit ng ilang property para ayusin ito sa browser na ito.
Tandaan:bago ( ... display:block; width:0; )
Pagdaragdag ng isang liwanag na anino
Ang hitsura ng sulok ay maaaring bahagyang mapabuti sa pamamagitan ng pagdaragdag ng isang box-shadow property (para sa mga browser na sumusuporta dito) sa pseudo-element. Ang pagtatakda ng overflow:hidden property sa klase ng elemento ay nagtatago ng bahagi ng anino, na sumisira sa curl effect.
Tandaan:bago ( ... -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); 1px rgba(0,0,0,0.2);
Mga bilugan na sulok
Madali ring gamitin ang diskarteng ito kasabay ng mga bilugan na sulok. Sa kasamaang palad, lahat modernong browser ay may ilang uri ng bug na nauugnay sa border-radius property (kabilang ang mga gumagamit ng property na walang prefix). Ang sitwasyong ito ay nangangahulugan ng pangangailangan para sa karagdagang trabaho.
Mga Webkit browser lang ang makakagawa bilugan na sulok para sa mga pseudo-element kung mayroon lamang silang 2 stroke na bahagi. Lumilikha ang Opera 11 at Firefox 3.6 ng nakakatuwang gulo. Bukod dito, mayroon ang Opera 11 maximum na error sa prosesong ito.
Ang paggamit ng lahat ng apat na panig ay nag-aalis ng mga problema sa Opera 11 at Firefox 3.6. Pero ang pamamaraang ito solusyon ay nagreresulta sa isang error sa Safari 5 na nagreresulta sa isang tulis-tulis na dayagonal na linya. Bypass itong problema Maaari mong itakda ang kulay para sa hindi bababa sa isang bahagi ng stroke sa transparent.
Ang kulay ng background ay makikita sa pamamagitan ng transparent na outline. Sa isip, ang diskarte na ito ay bubuo ng isang epekto at naglalaman ng isang minimum na code. Ngunit ang Opera 11 ay nagpapakita kulay ng background sa pamamagitan ng isang transparent stroke lamang kung ang border-radius property ay nakatakda.
Note-rounded:before ( content:""; position:absolute; top:0; right:0; border-width:8px; border-color:#fff #fff transparent transparent; background:#658E15; -webkit-border- bottom-left-radius:5px; -moz-border-radius:0 0 0 5px;
Ang CSS file para sa pahina ng demo ay naglalaman ng mga komento na kapaki-pakinabang para sa pagtatrabaho. Ang bawat browser ay may sariling quirks kapag ginagamit ang border-radius property o mga elementong may hangganan na walang lapad o taas.
Panghuling code
Nasa ibaba ang lahat ng CSS code na kailangan upang lumikha ng curled corner effect na may banayad na mga anino gamit lamang ang isang HTML na elemento.
Posisyon:kamag-anak; lapad:30%; padding:1em 1.5em; margin:2em auto; kulay:#fff; background:#97C02F; overflow:hidden; ) .note:before ( content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#fff #fff #658E15 #658E15 ; background:#658E15; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); 0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0, 0.2); display:block; note.rounded:before ( border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border- radius:0 0 0 5px; border- radius:0 0 0 5px )
Konklusyon
Ang pahina ng demo ay naglalaman ng mga halimbawa gamit ang iba't ibang kulay upang matiyak na ang epekto ay madaling gamitin.
Dapat itong isaalang-alang pamamaraang ito mas malala ang pagganap kapag gumagamit ng isang imahe bilang background para sa isang elemento kaysa kapag gumagamit ng isang simpleng kulay. Ngunit ang iba pang mga paraan ng pag-aayos ng mga baluktot na sulok ay mayroon ding mga limitasyon.
Sa artikulong ito, tulad ng sa naunang isa, ang epekto ay binuo gamit ang isang pseudo-element :pagkatapos. Upang maunawaan ang kakanyahan, maaari mong basahin ang artikulong iyon, doon ko ipinaliwanag sa eskematiko kung paano ito gumagana, hindi ko na ito uulitin dito. Sa pangkalahatan, ang lahat ay ginagawa nang napakasimple at maaaring i-configure iba't ibang uri epekto. Sa halimbawa sa ibaba, makikita mo kung paano ko inayos ang 3 iba't ibang liko na may kaunting pagbabago sa code.
Magsimula tayo sa pagkakasunud-sunod sa una, ito ang pinakapangunahing, at lahat ng iba pa ay ginagawa batay dito. Upang makapagsimula, kailangan mong magpasya kung aling bloke ang bibigyan ng epekto, isang hindi pangkaraniwang anino. Sa aming kaso, ito ay magiging isang bloke - block_shadow.
Block_shadow( position:relative; width:400px; height:150px; background:#f7f7f7; ) .block_shadow:after( content:""; position:absolute; z-index:-1; top:0; bottom:0; left :50px; kanan:50px; -webkit-box-shadow:0 0 25px rgba(0,0,0,0.3); anino:0 0 25px rgba(0,0,0,0.3);
Ilalarawan ko ngayon kung ano ang eksaktong lumilikha ng hitsura na ito. Una, ang bloke ay itinalaga ng isang pagpoposisyon kamag-anak, pagkatapos ay ang lapad, taas, at palaging ang background, kahit na ito ay puti. Pagkatapos ay itinalaga namin ang pseudo element :pagkatapos. Para dito, nakatakda ang mga sumusunod na parameter:
- posisyon- magtalaga ng pagpoposisyon - ganap.
- z-index- itakda ito sa minus -1 upang itago ito sa likod ng bloke.
- itaas:0;ibaba:0;- ang distansya mula sa itaas at ibaba ay 0 pixels, ibig sabihin, nakikita ang anino. Kung itatakda mo ang halaga sa - itaas-50%, pagkatapos ay ang itaas na anino ay magtatago sa likod ng bloke at magkakaroon ka ng hitsura sa ikatlong bloke ng halimbawa. Kung para sa- ibaba nakatakda sa 50%, mawawala ang mas mababang anino. Ang 50% ay isang halimbawa lamang, maaari kang mag-install ng iyong sarili at hindi ganap na itago ang anino kung kinakailangan.
- kaliwa:50px;kanan:50px;- ito ang indentation mula sa mga gilid. Umatras kami ng 50 pixels para itago ang anino sa mga gilid. Pumunta tayo sa harap, upang gawin ang pangalawang bersyon ng epekto, kapag ang anino ay nasa mga gilid, kailangan mo lamang baguhin ang mga halaga. Itakda ang mga gilid sa 0, at ang itaas at ibaba sa 50 pixels. Ang halaga ay 50, siyempre maaari mong baguhin ito, kaya baguhin mo ang laki ng anino.
- kahon-anino- ito ay isang anino, ang lahat ay malinaw dito. Itakda ang kulay, transparency at laki ng blur ng anino, ngayon ay 25 pixels.
- hangganan-radius- ito ang pag-ikot ng anino upang lumikha ng parehong epekto ng baluktot. ang unang value ay 200 pixels, ang horizontal radius ay kalahati ng aming pangunahing block width - 400 pixels. Ang 50 ay ang patayong radius. Upang ipatupad ang pangalawang halimbawa - anino sa mga gilid, kailangan mong tiyakin na ang pangalawang halaga ay mas malaki kaysa sa una. Ang lahat ay depende sa laki ng bloke. Sa aming kaso, ang pangalawang halimbawa ay may ratio na 10px / 50px.
Maaari mong ipasadya ang lahat ng mga parameter para sa iyong sarili, maaari mong baguhin ang mga ito hangga't gusto mo, ang pangunahing bagay ay hindi labis na luto ito, upang hindi mawala ang makatotohanang hitsura.
Sa unang paliwanag, karaniwang inilarawan ko ang lahat, kaya para sa pangalawang bloke sa halimbawa, ipapakita ko lang mga istilong handa, para makita mo at maging mas malinaw.
Block_shadow:after( content:""; position:absolute; z-index:-1; top:25px; bottom:25px; left:0; right:0; -webkit-box-shadow:0 0 25px rgba(0, 0,0,0.3); -moz-box-shadow:0 0 25px rgba(0,0,0,0.3); / 50px;
Para sa block sa ikatlong halimbawa, inilarawan ko rin kung ano ang kailangang gawin at ibibigay din ang natapos na code.
Block_shadow:after( content:""; position:absolute; z-index:-1; top:50%; bottom:0; left:50px; right:50px; -webkit-box-shadow:0 0 25px rgba(0 ,0,0,0.3); -moz-box-shadow:0 0 25px rgba(0,0,0,0.3); :200px / 50px na hangganan-radius:200px / 50px )
Sa pamamagitan ng pagpapalit ng mga istilo, pag-customize ng mga ito upang umangkop sa iyo, makakamit mo ang iba't ibang mga resulta at ganap na bagong mga epekto, hindi lamang ang mga ipinakita ko sa halimbawa. Sa pamamagitan ng pagtukoy ng mga halaga ng porsyento, maaari mong awtomatikong i-stretch ang anino sa buong taas o lapad ng bloke kung ang bloke ay walang pare-parehong laki. Subukan at pagbutihin at ang iyong site ay magkakaroon ng hindi pangkaraniwang hitsura.
Iyon lang, salamat sa iyong pansin. 🙂
