Share
Cu câteva zile în urmă, am primit invitația mea la Google Music. În timpul navigării în aplicație, am observat un truc minuscul, dar curat pe care îl folosesc pentru a crea file și diagonală a frontierelor cu CSS simplu. Îți arăt cum să faci la fel în proiectele tale astăzi!
Începem cu un simplu marcaj.
Demo Muzică nouăSalutare tuturor!
Lorem ipsum dolor este așezat în amonte, în funcție de timpul de aderare, de la locul de muncă temporar la locul de muncă și de la alte persoane. Ut enim ad minim veniam, quis exerciții de muncă ultima lucrătoare aliquip ex a commodo consequat. Duis aute irure dolor în republicarea în voluptate comandă esse cillum dolore eu fugiat nulla pariatur. Cu excepția cazului în care nu există un prozident, sunt în culpa qui officia deserted molit anim id est laborum.
Vom păstra acest demo cât mai simplu posibil posibil.
Apoi, numai pentru aspect, să aplicăm o culoare de fundal și un pic de spațiere la corp element.
corp fundal: # e3e3e3; font-family: sans-serif; lățime: 400px; margine: 100 pixeli automat;
Acum, vom schimba eticheta de ancorare într-o anumită măsură - aplicați o culoare nouă, faceți-o îndrăzneață, adăugați niște margini etc.
o padding: 10px; text-decoration: nici unul; culoare albă; font-weight: bold; afișare: bloc; frontal-dreapta: 30 pixeli roșii solide; frontieră-fund: 30px solid # 4c4c4c;
Observați cum, atunci când stabiliți lățimi mari de margini, în punctul în care se intersectează două, creează o linie diagonală? Mă întreb dacă putem folosi intersecția ca margine? Să încercăm să reducem înălţime la zero.
o padding: 10px; text-decoration: nici unul; culoare albă; font-weight: bold; afișare: bloc; frontal-dreapta: 30 pixeli roșii solide; frontieră-fund: 30px solid # 4c4c4c; înălțime: 0;
Se apropie! Poate că dacă ajustăm acum înălțimea liniei etichetei de ancorare, putem face ca textul să se potrivească cu acea cutie!
o padding: 10px; text-decoration: nici unul; culoare albă; font-weight: bold; afișare: bloc; frontal-dreapta: 30 pixeli roșii solide; frontieră-fund: 30px solid # 4c4c4c; înălțime: 0; linia-înălțime: 50px;
Suntem acolo! Dar, cu siguranță, nu avem nevoie de granița aceea urâtă roșie pe dreapta. Există o modalitate de a specifica că ar trebui să primească corpculoarea fundalului fără a reda valoarea hex? Da! Noi folosim transparent cuvinte cheie în acest scop.
o padding: 10px; text-decoration: nici unul; culoare albă; font-weight: bold; afișare: bloc; frontieră-dreapta: 30px solid transparent; frontieră-fund: 30px solid # 4c4c4c; înălțime: 0; linia-înălțime: 50px;
Problema evidentă, în acest moment, este că pare ciudat, când fundalul se întinde pe întreaga lățime a containerului. Instinctul natural ar putea fi actualizarea afişa la in linie. Cu toate acestea, după cum arată imaginea de mai jos, aceasta nu va funcționa.
Avem nevoie de elementele care să-i păstreze bloc-ca natura pentru a onora 0 înălţime. Răspunsul la această dilemă este de a folosi afișare: inline-block;, sau la pluti eticheta de ancorare și apoi clar elementele care o urmează. Vom folosi primul.
o padding: 10px; text-decoration: nici unul; culoare albă; font-weight: bold; afișare: inline-block; frontieră-dreapta: 30px solid transparent; frontieră-fund: 30px solid # 4c4c4c; înălțime: 0; linia-înălțime: 50px;
Mult mai bine!
În cele din urmă, hai să stil div sub ea un pic, și vom fi aproape terminat!
div graniță: 1px solid # 4c4c4c; frontieră-sus: 3px solid # 4c4c4c; padding: 20px;
În Safari 
În Firefox Uh oh. Avem o problema. Se pare că Firefox și Webkit nu sunt de acord exact cu privire la modul de a face elemente cu înălțimi zero și afișează inline-block.
Într-o notă obișnuită, aceasta mi-a făcut un pic cam încurcată. Fără a recurge la hacks, nu am putut să-i fac pe Firefox și Chrome să facă exact aspectul. Dacă găsiți o cale, spuneți-mi în comentariile! Actualizați - consultați comentariile pentru o lucrare.
Există modalități de a direcționa browserele Webkit cu CSS, dar este important să remarcăm că aceste trucuri ar trebui folosite numai în situații de ultimă instanță. Cu alte cuvinte, nu încercați acest lucru la domiciliu kiddos (cu excepția cazului în care trebuie să). În situația noastră, se pare că ar fi mai inteligent de utilizat plutipentru a realiza acest aspect. Cu toate acestea, hai să fim periculoși și să experimentăm unele tehnici alternative.
Mulți nu știu că interogările media pot fi folosite pentru a viza browserele Webkit. Urmăriți ce se întâmplă atunci când folosim o proprietate specifică webkit ca condiție pentru interogarea media?
Ecranul @media și (-webkit-animație) a margin-bottom: -4px;
Ta da! Functioneaza. Amintiți-vă, totuși - ajungeți doar la acest truc dacă nu aveți altă opțiune!
Este o tehnică suficient de simplă, dar, totuși, una pe care ar trebui să o avem toți în centurile noastre de unelte. Ai folosit niște trucuri cum ar fi asta în proiectele tale? Anunță-mă în comentariile!
Accentsconagua