Kysymys: Muoto + sileät kulmat
Hyvää päivää, hyvät foorumin käyttäjät, auttakaa minua tässä kysymyksessä: puhtaan CSS:n avulla sinun on luotava seuraava kuusikulmio, mutta tasoittuneilla kulmilla.
Olisin kiitollinen kaikesta avusta, varsinkin nopeasta.
Vastaus:
Viesti joltakin Pimeässä
Spirt Tesla, kiitos vastauksesta, mutta itse hahmon rakentamisessa ei ole ongelmia, olen jo keksinyt sen, mutta kulmien tasoitus on jo ongelma, kerro minulle - koodissasi, mitkä parametrit ovat vastuussa tämä hahmon ominaisuus?
Yleensä border-radius on vastuussa antialiasingista
Kysymys: Suorat kulmat
Auta minua tekemään suorat kulmat,Tässä on koodi
/rs- tilin nollaus;
missä on /rs Minulla on tämä teksti pyöristetyssä kehyksessä ja miten kehykseen tehdään suorat kulmat?
Vastaus:
Auta minua tekemään suorat kulmat
Uskon, että vaikka etsit Googlesta kolme päivää, et löydä mitään. Kokeile etsiä taaksepäin, etsi kuinka tehdä pyöristetyt kulmat, jos onnistut, opit tekemään neliömäisiä.
Kysymys: Kuinka tehdä tällaiset kulmat diville
Hyvää iltapäivää
Kuinka tehdä tällaiset kulmat diville.
Esimerkki:
Kiitos!
Vastaus: Pseudoelementti kanssa annetut mitat esimerkiksi, mutta varjoilla on helpompi leikkiä, jos haluat tehdä kaikki 4 kulmaa tällä tavalla.
laatikkovarjo: X Y 0 -S #fff; - kaksi ensimmäistä parametria ovat siirtymiä x:ssä ja y:ssä, kolmannen sumennuksen, sen pitäisi olla tässä nollassa, ja neljäs parametri vastaa varjon pakkaamisesta miinuksella (jotta siitä tulee pieni). Viimeinen on varjon väri.
Vaikka jos div itsessään on suorakaiteen muotoinen ja varjo on neliö, niin ilmeisesti on järkevää tehdä läpinäkyvä pseudoelementti, jonka mitat ovat varjon kaltaiset, ja X:n ja Y:n siirrokset hajottamaan sen 4 varjoa div. Tässä tapauksessa box-shadow ominaisuuden neljäs parametri on myös 0, muuta vain kaksi ensimmäistä.
Kysymys: (JS) Selvitä jaon todellinen kiertokulma
Tervehdys foorumin jäsenet.
Tiedän matriisi(bla-bla) sinit ja kosinit.
Oletus: Selain "tietää" elementin kiertojen lukumäärän, jos kulma on suurempi kuin 360 astetta - ilmeisesti kokemuksesta.
Kysymys: Onko mahdollista erottaa tämä todellinen kiertokulma?
Vastaus: Esitin tietyn kysymyksen:
kuinka purkaa sivu komentosarjan avulla käytön aikana täysi merkitys kiertokulma diva.
Samat 390 astetta, jotka on määritetty css:ssä.
Kysymys: aseta yksi kuva toisen päälle tietyssä kulmassa
samanlainen tehtävä kuin viulussa. sinun on asetettava yksi kuva toisen päälle huolimatta siitä, että alempi kuva on vinossa. En vain saa sitä asettumaan tasaisesti Yritin käyttää perspektiiviä CSS:ssä, matriisissa ja muissa muunnoksissa, mutta kuvien kulmat eivät aina liiku. tässä tapauksessa vain yksi kulma ei välttämättä ole sama. onko yhtään yksinkertaisia tapoja, vai voiko versioni korjata?
| HTML5 | ||
|
||
| CSS | ||
|
||
Vastaus: Tein sen ennen kuin näytit, ja näen myös, että se toimii viulussa, mutta vaikka kuinka paljon yritän sivustolla, mikään ei toimi. yläkulmat pysyvät samalla tasolla, voitko suositella jotain?
Lisätty 15 minuutin kuluttua
kiitos, selvisi
img
{
sijainti: absoluuttinen;
}
se oli ongelma
Kysymys: Multiscroll-laajennus, painike vasemmalla olevan valikon avaamiseksi yläkulma onko animaatiota vain firefoxissa?
verkkosivusto wsfox.ru
Multiscroll-laajennus
Miksi valikkopainikkeessa vasemmassa yläkulmassa on vain animaatio Firefoxissa?
Vastaus:
Viesti joltakin Mashka_mulashka
Voitko myös kertoa minulle, miksi vasemman yläkulman valikkopainikkeessa on animaatio vain Firefoxissa?
Ehkä annan sinulle vihjeen, mutta se animoituu hyvin myös Chromessa
Lisätty 7 minuutin kuluttua
Yleensä näyttää siltä, että avainkehysten nimi on kirjoitettu eteen ja omasi loppuun, ehkä siksi se ei toimi IE:ssä, mutta en ole varma
| CSS-koodi | ||
|
||
Kysymys: Määritä kulma kanvasviivojen avulla
Katso kuvakaappausta, sinun on löydettävä kulma "C". Missä def.X/defY on aseen suun nykyinen sijainti (no, musta ammus on ylhäällä) ja nowX/nowY on hiiren kohdistimen nykyinen sijainti. Ei tarvitse kirjoittaa, että minulla on 2 geometriassa, minulla on 5. Ongelma on erilainen, kuinka voin kirjoittaa tämän oikein JS:ssä?
Vastaus: Onko sinulla hiiren koordinaatit (nämä ovat suorakulmaisen kolmion sivut)
Jäljelle jää vain selvittää, kuinka löytää kulma tietäen kahden jalan pituuden
ja mihin tangenttia käytetään trigonometriassa?
| Viesti joltakin Vopub |
| Ei tarvitse kirjoittaa, että minulla on 2 geometriassa, |
On olemassa mielipide, että olet tyhmä ja ratkaiset edessäsi olevan ongelman väärin. he kertoivat sinulle vektorista
Kysymys: Pyöristetyt kulmat ylälohkossa ja sijoittelu lapsielementtejä
Hyvää päivää
On kaksi ongelmaa.
1. Kulmien pyöristys ei toimi vihreässä lohkossa. Vaikka täsmälleen sama koodi toimii valikkolohkossa
| CSS | ||
|
||
Miksi tämä voi olla?
2. Beige lohko on vihreän lohkon päällä, ja niiden on oltava vierekkäin ja niiden välillä tulee olla raja. Tässä on koodi:
| CSS | ||
|
||
Vastaus: Kiitos. Selvitin virheeni
Lisätty 25 minuutin kuluttua
Itse asiassa virhe oli se, että asetin kulmat yläelementtiin. Mutta lopulta päätin luopua niistä.
En erottanut lohkoja, lisäsin uuden class.right koko oikealle puolelle sisällön kanssa ja korostin sen valkoisella. Siksi visuaalisesti näyttää siltä, että lohkoja on 2 ja että ne ovat erillisiä
| CSS | ||
|
||
Kysymys: Kuvan liukusäädin päällä puhdas JavaScript
Kaverit, pyydän todella apua. Selitä minulle sormillasi puhtaan JS:n liukusäätimen logiikka. Internet on täynnä liukusäätimiä, mutta ne ovat kaikki JQueryssä tai erittäin monimutkaisia. Tarvitsen yksinkertaisen liukusäätimen, nuolen vasemmalle - edellinen kuva tulee näkyviin, oikealle - seuraava, ilman kelloja ja pillejä. Olen vasta äskettäin oppinut JS:ää, joten en oikein ymmärrä, kuinka tämä voidaan toteuttaa, enkä ymmärrä monimutkaisten liukusäätimien koodia kokemuksen puutteen vuoksi. Olisin erittäin kiitollinen avustasi.
Vastaus: Deimon 26, katso täältä, kaikki on puhtaassa js-muodossa kommentein
Box-shadow-ominaisuus lisää elementtiin yhden tai useamman varjon. Varjo on kopio elementistä, joka on siirretty määritetyn etäisyyden verran. Varjot voivat olla ulkoisia tai sisäisiä, epäselviä tai tasaisia, ja ne voivat seurata pyöristetyillä kulmilla varustettujen lohkojen ääriviivoja. Käyttämällä avainsana upotettu luo varjot elementin sisään, mikä tekee elementistä visuaalisesti suuren tai painavan.
Kuinka tehdä laatikkovarjo käyttämällä box-shadow -ominaisuutta
Selaimen tuki
IE: 9.0
Reuna: 12.0
Firefox: 4.0, 3.5 -moz-
Kromi: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Ooppera: 11.5
iOS Safari: 5.1, 3.1 -webkit-
Android-selain: 4.0, 2.1 -webkit-
1. Box-shadow-ominaisuuden syntaksi
Jokainen varjo voi valita yhdestä viiteen parametriin: vaakasuuntainen siirtymä, pystysuuntainen siirtymä, sumennuksen säde (valinnainen), leviämissäde (valinnainen) ja varjon väri. Varjot eivät vaikuta asetteluun ja voivat tukkia viereisiä elementtejä tai niiden varjoja. Omaisuutta ei ole peritty.
Riisi. 1. Box-shadow-ominaisuuden syntaksi | Arvot: | |
| x-offset | Vaadittu arvo. Varjon vaakasuora siirtymä suhteessa lohkoon. Se voi ottaa sekä positiivisia että negatiivisia arvoja, positiivinen siirtää varjon lohkon oikealle, negatiivinen - vasemmalle. |
| y-offset | Vaadittu arvo. Varjon pystypoikkeama suhteessa lohkoon. Voi ottaa sekä positiivisia että negatiivisia arvoja, positiivinen siirtää varjon alas, negatiivinen siirtää varjoa ylöspäin. |
| hämärtää | Valinnainen arvo. Määrittää varjon sumeussäteen. Miten suurempi säde, sitä epäselvämpi varjo on. Vain positiivisia arvoja voidaan käyttää. |
| venyttely | Valinnainen, laajentaa varjoa paksuntamalla välissä olevaa kiinteää osaa epäselviä reunoja. Hyväksyy sekä positiiviset että negatiiviset arvot pituusyksiköissä - px jne. |
| väri | Valinnainen arvo. Oletuksena varjo on musta. Voit määrittää arvon, jota voit käyttää seuraavat muodot värimerkinnät: #RRGGBB, rgb(punainen, vihreä, sininen) , rgba(punainen, vihreä, sininen, alfa) . Safaria varten varjon väri on määritettävä. |
| upotettu | Luo varjon lohkon sisään. |
| ei mitään | Oletusarvo tarkoittaa, ettei varjoa. |
| alkukirjain | Asettaa ominaisuuden arvon oletusarvoon. |
| periä | Perii ominaisuuden arvon emoelementiltä. |
2. Esimerkkejä lohkovarjoista
2.1. Sisäinen varjo
.example-shadow-1 ( tausta: #e6e3df; tekstin tasaus: keskellä; ) .example-shadow-1 span ( marginaali: 50px; korkeus: 100px; leveys: 200px; näyttö: inline-block; box-shadow: upotettu 2px 2px 5px rgba(154, 147, 140, 0,5), 1px 1px 5px rgba(255, 255, 255, 1);
2.2. Tasainen varjo toisella puolella
tasainen
tasainen
.example-shadow-2 ( tausta: beige; tekstin tasaus: keskellä; ) .example-shadow-2 a ( näyttö: inline-block; reunuksen säde: 5px; täyte: 15px 35px; font-koko: 22px; marginaali : 20px: tausta: #55acee 0 .example-shadow-2 a:hover;SISÄÄN tämä oppitunti luomme käpristyneiden kulmien vaikutelman ilman kuvia tai lisämerkintöjä. Se toimii erinomaisesti kaikissa nykyaikaisissa selaimissa ja sopii hyvin verkkosivustojen suunnitteluun yksinkertaisilla väriteemoilla.
Tätä tehostetta käytettiin demossa oppitunnille "Useita taustoja ja viivoja käyttäen CSS2:ta". Lisäksi käpristyneiden kulmien käyttö todellisen verkkosivuston suunnittelussa näkyy Yiibu-esimerkissä. Mutta Yiibu-sivusto käyttää kuvia, ja me käytämme pseudoelementtejä ja CSS:ää.
alkaa
Ei mitään monimutkaista. Kuka tahansa tekee elementtiä eikä lisämerkintöjä tarvita. Kaikki alkaa yksinkertaisesta maalatusta suorakulmiosta. Selaimet, jotka eivät tue pseudoelementtejä (IE6 ja IE7), tuottavat sen myös.
Lisäämällä sijainti:suhteellinen ominaisuus mahdollistaa sen absoluuttinen paikannus pseudoelementtejä.
Huomautus ( sijainti: suhteellinen; leveys: 30 %; täyte: 1 em 1,5 em; marginaali: 2 em automaattinen; väri: #fff; tausta: # 97C02F; )
Taitettu kulma luodaan pseudoelementillä, joka on sijoitettu suorakulmion yläkulmaan. Pseudoelementillä ei ole leveyttä tai korkeutta, mutta siinä on paksu viiva. Muutamalla vedon paksuutta muutamme taitetun kulman kokoa.
SISÄÄN tässä esimerkissä Viivan ylä- ja oikealla puolella on värit, jotka vastaavat ylätason suorakulmion taustaväriä. Vedon vasemmassa ja alaosassa on enemmän tumma väri tai vaaleampi kuin suorakulmion taustaväri.
Huomautus:ennen (sisältö:""; sijainti:absoluuttinen; ylhäällä: 0; oikea: 0; reunan leveys: 0 16px 16px 0; reunuksen tyyli: kiinteä; reunan väri:#658E15 #fff; )
Siinä on kaikki mitä sinun tarvitsee luoda yksinkertainen vaikutus taitettu kulma, samanlainen kuin Yiibu-sivustolla käytetty kulma.
Firefox 3.0 ei salli pseudoelementtien sijoittamista. Voit korjata tämän tässä selaimessa muutaman ominaisuuden avulla.
Huomautus:ennen ( ... näyttö:lohko; leveys:0; )
Vaalean varjon lisääminen
Kulman ulkonäköä voidaan hieman parantaa lisäämällä pseudo-elementtiin box-shadow-ominaisuus (niille selaimille, jotka tukevat sitä). Ylivuoto:hidden -ominaisuuden asettaminen elementtiluokkaan piilottaa osan varjosta, mikä rikkoo kiharavaikutelman.
Huomautus:before ( ... -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 rgba(0,0,0,0,2):0 1px 1px rgba(0,0,0,0,3), -1px 1px; 1px rgba(0,0,0,0,2);
Pyöristetyt kulmat
Tätä tekniikkaa on myös suhteellisen helppo käyttää pyöristetyissä kulmissa. Valitettavasti kaikki moderni selain on jonkinlainen border-radius-ominaisuuteen liittyvä virhe (mukaan lukien ne, jotka käyttävät ominaisuutta ilman etuliitettä). Tämä tilanne tarkoittaa lisätyön tarvetta.
Vain Webkit-selaimet voivat tehdä sen pyöristetyt kulmat pseudoelementeille, jos niissä on vain kaksitahtisia osia. Opera 11 ja Firefox 3.6 luovat silmiä hivelevän sotkun. Lisäksi Opera 11 on suurin virhe tässä prosessissa.
Kaikkien neljän puolen käyttäminen poistaa ongelmat Opera 11:ssä ja Firefox 3.6:ssa. Mutta tätä menetelmää ratkaisu aiheuttaa virheen Safari 5:ssä, joka johtaa rosoiseen lävistäjäviivaan. Ohittaa Tämä ongelma voit asettaa värin ainakin yhdelle viivan osan läpinäkyväksi.
Taustaväri näkyy läpinäkyvän ääriviivan läpi. Ihannetapauksessa tämä lähestymistapa luo tehosteen ja sisältää vähintään koodia. Mutta Opera 11 näyttää taustaväri läpinäkyvän viivan kautta vain, jos border-radius-ominaisuus on asetettu.
Huomautus pyöristetty:ennen ( content:""; position:absolute; top:0; right:0; border-width:8px; border-color:#fff #fff läpinäkyvä; tausta:#658E15; -webkit-border- bottom-left-radius:5px -moz-border-radius:0 0 5px:0 0 5px;
Esittelysivun CSS-tiedosto sisältää kommentteja, jotka ovat hyödyllisiä työskentelyssä. Jokaisella selaimella on omat omituisuutensa käytettäessä border-radius-ominaisuutta tai reunuselementtejä ilman leveyttä tai korkeutta.
Lopullinen koodi
Alla on kaikki CSS-koodi, joka tarvitaan kiertyneen kulmatehosteen luomiseen hienovaraisilla varjoilla käyttämällä vain yhtä HTML-elementtiä.
Sijainti:suhteellinen; leveys: 30%; pehmuste: 1em 1,5em; marginaali: 2em auto; väri:#fff; tausta:#97C02F; ylivuoto piilotettu; ) .note:before ( content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style: solid; border-color:#fff #ffff #658E15 #658E15 tausta:#658E15 -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2); 0,0,3), -1px 1px 1px rgba(0,0,0,0,2); 0.2); display:block width:0; /* Firefox 3.0:n rajoitusten poistaminen note.rounded:befor ( border-width: 8px; border-color:#fff #fff läpinäkyvä; -webkit-border-bottom-left-radius:5px; -moz-border- radius:0 0 0 5px; border- säde: 0 0 0 5px)
Johtopäätös
Esittelysivulla on esimerkkejä eri väreistä tehosteen helppokäyttöisyyden varmistamiseksi.
Se on otettava huomioon tätä tekniikkaa toimii huonommin käytettäessä kuvaa elementin taustana kuin käytettäessä yksinkertaista väriä. Mutta myös muilla taivutettujen kulmien järjestämismenetelmillä on tällaisia rajoituksia.
Tässä artikkelissa, kuten edellisessä, tehoste on rakennettu pseudoelementillä :jälkeen. Ymmärtääksesi olemuksen, voit lukea kyseisen artikkelin, jossa selitin kaavamaisesti, kuinka se toimii, en toista sitä tässä. Yleensä kaikki tehdään hyvin yksinkertaisesti ja voidaan konfiguroida erilaisia tyyppejä tehosteita. Alla olevassa esimerkissä voit nähdä, kuinka olen järjestänyt 3 erilaista mutkaa minimaalisilla muutoksilla koodiin.
Aloitetaan järjestyksessä ensimmäisestä, se on alkeellisin, ja kaikki loput tehdään sen perusteella. Aloitaksesi sinun on päätettävä, mille lohkolle annetaan tehoste, epätavallinen varjo. Meidän tapauksessamme tämä on lohko - block_shadow.
Varjo :50px:50px -webkit-box-shadow:0 0 25px rgba(0,0,0,0.3 -moz-box-shadow:0 0,0,0,0.3); shadow:0 0 25px rgba(0,0,0,0.3); -moz-border-radius:200px / 50px;
Kuvaan nyt, mikä tarkalleen luo tämän lookin. Ensin lohkolle määritettiin paikannus suhteellinen, sitten leveys, korkeus ja aina tausta, vaikka se olisi valkoinen. Sitten määritämme pseudoelementin :jälkeen. Sitä varten on asetettu seuraavat parametrit:
- asema- määrittää paikannus - ehdoton.
- z-indeksi- Aseta se arvoon miinus -1 piilottaaksesi sen lohkon taakse.
- ylhäällä:0;alhaalla:0;- etäisyys ylhäältä ja alhaalta on 0 pikseliä, eli varjo on näkyvissä. Jos asetat arvoksi - alkuun-50%, silloin ylempi varjo piiloutuu lohkon taakse ja saat esimerkin kolmannen lohkon ilmeen. Jos varten - pohja asetettu arvoon 50%, alempi varjo katoaa. 50% on vain esimerkki, voit asentaa jotain omaa etkä piilota varjoa tarvittaessa.
- vasen:50px;oikea:50px;- tämä on sisennys reunoista. Astuimme taaksepäin 50 pikseliä piilottaaksemme varjon sivuilla. Mennään eteen tekemään tehosteen toinen versio, kun varjo on sivuilla, sinun tarvitsee vain muuttaa arvoja. Aseta sivut 0:ksi ja ylä- ja alareunaksi 50 pikseliä. Arvo on 50, voit tietysti muuttaa sitä, joten muutat varjon kokoa.
- laatikko-varjo- Tämä on varjo, täällä kaikki on selvää. Aseta varjon väri, läpinäkyvyys ja sumeuskoko, nyt 25 pikseliä.
- raja-säde- Tämä on varjon pyöristys saman taivutusvaikutelman luomiseksi. ensimmäinen arvo on 200 pikseliä, vaakasäde on puolet päälohkomme leveydestä - 400 pikseliä. 50 on pystysäde. Toisen esimerkin - varjon sivuilla - toteuttamiseksi sinun on varmistettava, että toinen arvo on suurempi kuin ensimmäinen. Kaikki riippuu lohkon koosta. Meidän tapauksessamme toisen esimerkin suhde on 10px / 50px.
Voit mukauttaa kaikkia parametreja itsellesi, voit muuttaa niitä haluamallasi tavalla, tärkeintä ei ole liioitella sitä, jotta et menetä realistista ilmettä.
Ensimmäisessä selityksessä kuvasin periaatteessa kaiken, joten esitän vain esimerkin toisen lohkon valmiita tyylejä, jotta voit nähdä ja tehdä sen selkeämmin.
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; border-radius:10px / 50px )
Kolmannen esimerkin lohkolle kuvailin myös, mitä on tehtävä, ja annan myös yksinkertaisesti valmiin koodin.
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); :200px / 50px; reunan säde:200px / 50px)
Muuttamalla tyylejä, mukauttamalla niitä itsellesi sopiviksi, voit saavuttaa erilaisia tuloksia ja täysin uusia tehosteita, ei vain niitä, jotka näytin esimerkissä. Määrittämällä prosenttiarvot voit automaattisesti venyttää varjon koko lohkon korkeuteen tai leveyteen, jos lohkolla ei ole vakiokokoa. Kokeile ja paranna, niin sivustostasi tulee epätavallinen ulkoasu.
Siinä kaikki, kiitos huomiosta. 🙂
