Kā izveidot izgriezuma robežu dizainu ar CSS
Ar izgrieztā robeža mēs varam parādīt lietotājiem to, ko var atrast zem HTML elementa pierobežas zonas. Šo uzdevumu parasti atrisina divus vai vairākus bloku elementus (vairumā gadījumu divs) dažāda lieluma viens otram. Vispirms tas šķiet viegls risinājums, bet tas kļūst vairāk nomākts, ja vēlaties atkārtoti izmantot izkārtojumu vairākas reizes, pārvietoties pa elementiem, optimizēt mobilo dizainu vai saglabāt kodu.
Šajā amatā es jums parādīšu elegantu CSS risinājumu, kas izmanto tikai viens HTML elements lai sasniegtu to pašu efektu. Šī metode ir lieliska arī pieejamības ziņā ielādē fona attēlu CSS, atdalīta no HTML.
Pēc šī ziņojuma beigām jūs zināt, kā to izdarīt attēlot fona attēlu pierobežas apgabalā lai izveidotu izgrieztā robeža jūs varat redzēt zemāk. Es arī parādīšu, kā jūs varat padarīt dizainu atsaucīgu izmantojot Viewport vienības.
Sākotnējais kods
Vienīgā prasība HTML priekšpusē ir a bloka elements:
Mums būs nepieciešams atkārtota izmantošana izmēri (platums un augstums) un robežas platuma vērtības. \ t div, tāpēc es tos iepazīstu kā CSS mainīgie. Mainīgais lielums --w apzīmē platums no .cb bloka elements, --h norāda tā augstums, --b attiecas uz robežu platums, un --b2 par robežu platumu, kas reizināts ar 2. Mēs vēlāk redzēsim pēdējā mainīgā lieluma izmantošanu.
Es izmēru Vienība Uzlabosim iepriekš minēto kodu, pievienojot fonu un nosakot robežu, augstumu un platumu izmantojot mūsu iepriekš definētos CSS mainīgos. Kā redzams, demo izskatās tieši tagad: Mums ir vajadzīgs fona attēls aptver visu Ja vēlaties piešķirt fona attēlu fiksētam izmēram, tikai pārliecinieties, ka lielums, ko jūs dodat, dod iespēju segt. \ T The fona attēla platums [ Līdzīgi fona attēla augstums [ Tādā veidā mēs esam iestatījuši fona attēlu apgabalā, kas ir vienāds ar izmēru The Piezīme: Ja jūs pievienojat polsterējumu Tas ir tas, kas mums šobrīd ir: Tagad, kad esam iekļāvuši robežu iekļaujošu apgabalu ar fona attēlu, viss, kas paliek, ir aptver robežas iekšējo laukumu (bez robežas) ar cietu krāsu, par kuru mēs sasniedzam a Horizontālā ēna ar vērtību Demonstrējumā Codepen redzams, ka ap attēlu ir redzama balta apmale. Ir slavens triks izmantojot kastes ēnas, lai izveidotu vairākas robežas-mēs varam izmantot to pašu tehniku pievienot vienu vai vairākas cietas krāsas robežas mūsu dizainam. Atjaunināts The Manā galīgajā Codepen demonstrācijā esmu ievietojis fona attēla un kastes ēnu krāsas kodu atsevišķā klasē. Tas ir neobligāti, bet var būt ļoti noderīgi, ja vēlaties atkārtoti izmantot izgrieztā robežu dizaina izkārtojumu vairākos elementos un katram elementam pievienojiet estētiku (fona attēlu + krāsu). Esmu pievienojis nosaukto klasi Kopš tā laika Lai iestatītu. \ T Tā kā izmēri ir vienībā Piezīme: Neaizmirstiet pievienojiet skatu loga metatagu uz savu HTML lapu, ja esat nolēmis to optimizēt mobilajam skatījumam.vw vienība (ja vēlaties, varat izmantot fiksētas vienības). .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: calc (var (- b) * 2);
Ātrais skaidrojums -
vw un vh vienībāmvw ir 1/100th skata platuma platumu. Piemēram, 50vw ir 50 skatītāju platuma daļas sagriezta vertikāli 100 vienādās daļās, kamēr 50vh ir 50 skatu laukuma daļas sagrieztu horizontāli 100 vienādās daļās. .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: calc (var (- b) * 2); fons: url (bg.jpg); robeža: var (- b) cieta caurspīdīga; augstums: var (- h); platums: var (- w);
Izmēru fona attēlu
fona vērtība, ko es dodu: .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: calc (var (- b) * 2); fons: url (bg.jpg) centrs / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); robeža: var (- b) cieta caurspīdīga; augstums: var (- h); platums: var (- w);
aprēķināts (var (- w) + var (- b2))] ir summa div [var (- w)] un kreisās un labās malas platums [var (- b2)].calc (var (- h) + var (- b2))] ir summa div. augstums [var (- h)] un augšējās un apakšējās robežas platums [var (- b2)].div (ieskaitot pierobežas apgabalu).centrs atslēgvārdu izlīdzina fona attēlu uz. \ t div.div, atceries ietveriet polsterējuma zonu fona izmēram, tāpat kā pierobežas apgabalā.
Aptveriet ekskluzīvo robežu
kastes ēna ieliktnis. .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: calc (var (- b) * 2); fons: url (bg.jpg) centrs / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); robeža: var (- b) cieta caurspīdīga; kastes ēna: ieliktnis var (- w) 0 0 rgba (0,120,237, .5); augstums: var (- h); platums: var (- w);
var (- w) aptver visu platumu div. Pielietojums rgba pieļauj krāsu funkcija zināmu pārredzamību lai pievienotu maisījumam, tomēr varat izmantot arī necaurspīdīgu krāsu, ja vēlaties pilnībā nosegt centrālo zonu.
Pievienojiet papildu robežu ar
kastes ēnakastes ēna vērtība ir: .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: calc (var (- b) * 2); fons: url (bg.jpg) centrs / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); robeža: var (- b) cieta caurspīdīga; kastes ēna: ieliktnis var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 aprēķināts (var (- b) / 2) balts; augstums: var (- h); platums: var (- w);
calc (var (- b) / 2) funkcija rada ēnas ēnu pusi no robežas platuma.
Pēc izvēles: atsevišķs izkārtojums un estētika
.plakāts1 uz .plakāts1 --tbgc: rgba (0,120,237, .5); fona attēls: url ("http://bit.ly/2eQBij2"); fona ir stenogrāfisks īpašums, tā ilgstošas īpašības var tikt ignorētas / iestatītas individuāli. Tādējādi mēs varam noteikt fona attēls iekšā .plakāts1, un noņemiet URL vērtību no fona īpašums .cb.kastes ēna, mēs varam izmantot cits CSS mainīgais. The --tbgc mainīgais tur krāsu vērtību mēs gribam dot kastes ēnai (gaiši zilā krāsā demo), tāpēc starp stila noteikumiem .cb mēs nomainiet krāsas krāsu kastes ēna īpašums ar var (- tbgc). .cb --w: 35vw; --h: 40vw; - b: 4vw; - b2: calc (var (- b) * 2); fons: centrs / aprēķins (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); robeža: var (- b) cieta caurspīdīga; box-shadow: ieliktnis var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) balts; augstums: var (- h); platums: var (- w);
Portreta režīma kods
vw, tā būs izskatās pārāk mazs ja skatāties dizainu portreta režīmā (mazāks platums attiecībā pret augstumu), kurā visas mobilās ierīces atrodas pēc noklusējuma. Lai atrisinātu šo problēmu, slēdzis vw ar vh, un mainīt izmērus kā redzat piemērotu portreta režīmiem. @media (orientācija: portrets) .cb --w: 35vh; --h: 40vh; - b: 4vh;
