Kā izveidot CSS lenti

Mēs arī noteicām pamatdimensi un fona krāsa ar CSS.

 .karte fona krāsa: bēša; augstums: 300px; starpība: 40px; platums: 500px;  

Lentes vidējā daļa

Mēs izmantosim a CSS mainīgais (ļauj mums saglabāt un atkārtoti izmantot CSS vērtību) --p uz saglabājiet polsterējuma vērtību. Vērtība polsterējums īpašums izmanto var (- p) sintakse lentes kreisajam un labajam spilventiņam, lai tā varētu būt viegli paplašināms. The --p mainīgais vēlāk būs atkārtoti izmantot vairākas reizes; kas padara mūsu kodu elastīgu.

 .lente - p: 15px; fona krāsa: rgb (170,170,170); augstums: 60px; polsterējums: 0 var (- p); platums: 100%;  

Tālāk redzamajā ekrānuzņēmumā jūs varat redzēt, kā jūsu demo izskatās šajā brīdī:

Lentes centrēšana

Mums arī vajag centrējiet lenti. Mēs spiediet to pa kreisi no polsterējuma izmēra (atzīmēts ar --p mainīgo), izmantojot relatīvo pozicionēšanu.

 .lente - p: 15px; fona krāsa: rgb (170,170,170); augstums: 60px; polsterējums: 0 var (- p); pozīcija: relatīvais; pa labi: var (- p); platums: 100%;  

Atjauninātā demonstrācija:

Lentes malas

Tagad mēs izveidojam lentes kreisajā un labajā pusē tas, šķiet, jāturpina ap kartes malu. Lai to izdarītu, mēs izmantojam gan : pirms un : pēc pseidoelementi .lente.

Abi pseidoelementi mantos fona krāsu .lente, un mēs izmantojam filtrs: spilgtums (.5) noteikums, lai mazinātu to krāsu nedaudz. Tie ir arī absolūti novietots viņu (salīdzinoši novietotā) vecākiem.

To platumam jābūt tāds pats kā polsterējuma izmērs, un mēs tos novietojam lentes kreisajā un labajā pusē izmantojot pa kreisi: 0 un pa labi: 0 stila noteikumi.

 .lente: pirms, .ribbon: pēc fona krāsa: pārmantot; saturs: "; displejs: bloks; filtrs: spilgtums (.5); augstums: 100%; stāvoklis: absolūts; platums: var (- p); .ribbon: pirms pa kreisi: 0; .ribbon: pēc  pa labi: 0; 

Tagad lente ar malām, ko tikko pievienojām, izskatās šādi:

Nolieciet malas

Padarīt lentes malas izskatās saliekti, mums vajag izliekiet sānus par 45 °. The pārveidot: skewy () CSS noteikums sagriež elementus vertikāli.

 .lente: pirms pa kreisi: 0; transformācija: skewy (45deg);  .ribbon: pēc right: 0; transformācija: skewy (-45deg);  

Kā redzat malas malām nesakrīt pēc transformācijas, tāpēc mums ir nepieciešams velciet tos.

Saskaņojiet malas

Uz noteikt pareizo garumu ar kuru mums ir jāpārvieto puses uz leju, mēs vēršamies pie trigonometrijas. Mums ir jāatrod x, kā y ir sānu platums (vienāds ar. \ t .lente) un leņķi θ ir 45 ° (šķērsvirziena leņķis).

Rezultātā x tad ir jāsamazina uz pusi, jo ir arī kreisā un labā puse.

Ja izmantojat jebkuru CSS priekšapstrādes pārbaudi, ja tai ir a iedegums citādi atsaukties uz pieskares diagrammu vai kalkulatoru uz uzzināt leņķa pieskares vērtību. Mēs esam laimīgi iedegums 45 ° ir 1, tas nozīmē, ka x vienāds ar y mūsu gadījumā.

 .lente: pirms, .ribbon: pēc fona krāsa: pārmantot; saturs: "; displejs: bloks; filtrs: spilgtums (.5); augstums: 100%; stāvoklis: absolūti; augšā: kalibrēts (var (- p) / 2); platums: var (- p); 

Kopš tā laika x bija jāsamazina uz pusi, mēs izmantojam calc () CSS funkcija, lai veiktu --p mainīgais.

Visbeidzot mums ir nepieciešams izlīdziniet malas gar z-asi arī, tāpēc pievienosim z-indekss: -1 valdīt uz sāniem, lai novietojiet tos aiz lentes vidus daļas.

 .lente: pirms, .ribbon: pēc fona krāsa: pārmantot; saturs: "; displejs: bloks; filtrs: spilgtums (.5); augstums: 100%; stāvoklis: absolūti; augšā: kalibrēts (var (- p) / 2); platums: var (- p); z- indekss: -1; 

Tagad, kad mēs saskaņojām sānu malas, mūsu CSS lente tiek veikta.

Zemāk jūs vēlreiz varat apskatīt tiešo demonstrāciju, lūdzu, ņemiet vērā, ka tā izmanto arī dažus papildu veidus.