Miten luoda CSS-nauha
Me puhumme CSS-nauhat web-suunnittelussa, kun a ruutuun (kutsutaan nauhaksi) käärii toisen laatikon. Se on melko käytetty suunnittelutekniikka koristele tekstiä, erityisesti otsikot. W3C: n verkkosivuilla voit tarkistaa, kuinka oikein käytetyt CSS-nauhat voivat auttaa rakenteen sisältö hienovaraisesti.
Joten tässä postissa aiomme nähdä miten luoda yksinkertainen CSS-nauha jota voit käyttää parantaa otsakkeita sivustossasi. Kiitokset CSS-muunnokset, voimme luoda tämän mallin entistä yksinkertaisemmalla koodikannalla.
Voit katsella viimeistä demoa alla.
HTML ja perustyylit
Ensinnäkin luomme a tunniste, jonka me merkitsemme .kortti- valitsin, joka edustaa a suorakulmion ruutu kietoa noin.
Asetimme myös perusmitat ja taustaväri CSS: n kanssa.
.kortti taustaväri: beige; korkeus: 300px; marginaali: 40px; leveys: 500px;
Nauhan keskiosa
Käytämme a CSS-muuttuja (jonka avulla voimme tallentaa ja käyttää uudelleen CSS-arvoa) --p että tallenna pehmusteen arvo. Arvon arvo täyte omaisuus käyttää var (- p) syntaksin nauhan vasemman ja oikean pehmusteen ollessa niin helposti laajennettavissa. --p muuttuja myöhemmin uudelleen; mikä tekee koodistamme joustavan.
.nauha - p: 15px; taustaväri: rgb (170, 170, 170); korkeus: 60px; pehmuste: 0 var (- p); leveys: 100%;
Alla olevassa kuvassa voit nähdä, miten demosi näyttää näyttävän tässä vaiheessa:
Keskitä nauha
Meidän on myös keskitä nauha. Me työnnä sitä vasemmalle pehmusteen koon mukaan (merkitty --p muuttuja) käyttäen suhteellista sijaintia.
.nauha - p: 15px; taustaväri: rgb (170, 170, 170); korkeus: 60px; pehmuste: 0 var (- p); asema: suhteellinen; oikea: var (- p); leveys: 100%;
Päivitetty demo:
Nauhan sivut
Nyt luomme vasemmalle ja oikealle puolelle sen pitäisi näennäisesti taivuttaa kortin reunaa. Tätä varten käytämme molempia :ennen ja :jälkeen pseudoelementit .nauha.
Molemmat pseudoelementit perivät taustavärin .nauha, ja me käytämme suodatin: kirkkaus (.5) sääntö pimeää niiden väri hieman. He ovat myös täysin sijoitettu niiden (suhteellisen sijoitetun) vanhemman sisällä.
Niiden leveyden on oltava sama kuin pehmusteen koko, ja asetamme ne nauhan vasemmalle ja oikealle puolelle käyttämällä vasen: 0 ja oikea: 0 tyylisäännöt.
.nauha: ennen, .ribbon: jälkeen taustaväri: peri; sisältö: "; näyttö: lohko; suodatin: kirkkaus (.5); korkeus: 100%; sijainti: absoluuttinen; leveys: var (- p); .ribbon: ennen left: 0; .ribbon: jälkeen oikea: 0;
Nyt nauha, jonka sivut olemme juuri lisänneet, näyttää seuraavalta:
Taivuta sivut
Voit tehdä nauhan sivut näyttää taivutetulta, meidän täytyy vinoa sivuja 45 °. muunnos: skewy () CSS-sääntö vinouttaa elementit pystysuunnassa.
.nauha: ennen vasen: 0; muunnos: skewy (45ast); .ribbon: jälkeen right: 0; muunnos: skewy (-45deg);
Kuten näet sivun reunat Älä kohdista muutoksen jälkeen, joten meidän täytyy vedä ne alas.
Kohdista sivut
jotta määrittää oikea pituus jonka avulla meidän on siirrettävä sivut alas, käännymme trigonometriaan. Meidän on löydettävä x, kuten y on sivujen leveys (sama kuin .nauha) ja kulma θ on 45 ° (vinon kulma).
Tuloksena on x sitten on puolitettava, sillä on myös vasen ja oikea puoli.
Jos käytät mitä tahansa CSS-esiprosessorin tarkistusta, jos sillä on a rusketus muuten viittaavat tangenttikaavioon tai laskimeen selvittää kulman tangenttiarvo. Olemme onnekkaita tan 45 ° on 1, mikä tarkoittaa, että arvo x vastaa y meidän tapauksessamme.
.nauha: ennen, .ribbon: jälkeen taustaväri: peri; sisältö: "; näyttö: lohko; suodatin: kirkkaus (.5); korkeus: 100%; sijainti: absoluuttinen; ylä: laskettu (var (- p) / 2); leveys: var (- p);
Siitä asti kun x oli puolitettava, käytämme laskettu () CSS-funktio suorittamaan --p muuttuja.
Lopuksi meidän täytyy kohdista sivut z-akselin suuntaan samoin, joten lisätään z-indeksi: -1 hallita puolia, jotta aseta ne nauhan keskiosan taakse.
.nauha: ennen, .ribbon: jälkeen taustaväri: peri; sisältö: "; näyttö: lohko; suodatin: kirkkaus (.5); korkeus: 100%; sijainti: absoluuttinen; ylä: laskettu (var (- p) / 2); leveys: var (- p); z- indeksi: -1;
Nyt kun sovitimme sivut, CSS-nauha on tehty.
Alla voit tarkistaa live-esittelyn uudelleen. Huomaa, että se käyttää myös joitakin muita muotoiluja.
