Hoe een CSS-lint te maken
Wij praten over CSS-linten in webontwerp wanneer een strook van doos (lint genoemd) sluit een andere doos. Het is een redelijk gebruikte ontwerptechniek om versier tekst, vooral koppen. Op de website van W3C kunt u bekijken hoe correct gebruikte CSS-linten kunnen helpen structuur inhoud op een subtiele manier.
Dus in dit bericht zullen we zien hoe een eenvoudig CSS-lint te maken die je kunt gebruiken om verbeter de koppen op uw website. Dankzij CSS-transformaties, we kunnen dit ontwerp maken met een veel eenvoudiger codebasis dan voorheen.
Je kunt een kijkje nemen bij de laatste demo hieronder.
HTML & basisstijlen
Eerst maken we een tag we markeren met de .kaart selector die staat voor a rechthoekdoos zal het lint wikkelen in de omgeving van.
We hebben ook de basisafmetingen en de Achtergrond kleur met CSS.
.kaart achtergrondkleur: beige; hoogte: 300 px; marge: 40px; breedte: 500 px;
Het middendeel van het lint
We gebruiken een CSS-variabele (laat ons een CSS-waarde opslaan en opnieuw gebruiken) genaamd --p naar bewaar de opvulwaarde. De waarde van de vulling property gebruikt de var (- p) syntaxis voor de linker en rechter paddings van het lint, zodat het kan zijn gemakkelijk verbreed. De --p variabele later zal zijn meerdere keren hergebruikt; dat maakt onze code flexibel.
.lint --p: 15px; achtergrondkleur: rgb (170,170,170); hoogte: 60 px; opvulling: 0 var (- p); breedte: 100%;
Op de onderstaande schermafbeelding kunt u zien hoe uw demo er op dit moment uitziet:
Het lint centreren
We moeten ook centreer het lint. Wij duw het naar links door de opvulgrootte (gemarkeerd door de --p variabele) met behulp van relatieve positionering.
.lint --p: 15px; achtergrondkleur: rgb (170,170,170); hoogte: 60 px; opvulling: 0 var (- p); positie: relatief; rechts: var (- p); breedte: 100%;
De bijgewerkte demo:
De zijkanten van het lint
Nu maken we de linker- en rechterkant van het lint dat zou rond de rand van de kaart moeten buigen. Om dit te doen, gebruiken we beide :voor en :na pseudo-elementen van .lint.
Beide pseudo-elementen nemen de achtergrondkleur van over .lint, en we gebruiken de filter: helderheid (.5) regel om hun kleur een beetje donkerder te maken. Zij zijn ook absoluut gepositioneerd binnen hun (relatief gepositioneerde) ouder.
Hun breedte moet de zijn hetzelfde als de padding-maat, en we plaatsen ze aan de linker- en rechterkant van het lint de ... gebruiken links: 0 en rechts: 0 stijlregels.
.lint: voor, .ribbon: na background-color: inherit; inhoud: "; weergave: blok; filter: helderheid (.5); hoogte: 100%; positie: absoluut; breedte: var (- p); .ribbon: before left: 0; .ribbon: after rechts: 0;
Nu ziet het lint met de zijkanten die we zojuist hebben toegevoegd er zo uit:
Schuin de zijkanten
Om de zijkanten van het lint te maken kijk gebogen, we moeten scheef de zijkanten 45 °. De transformeren: skewy () CSS-regel scheeft elementen verticaal uit.
.lint: voor links: 0; transform: skewY (45deg); .ribbon: after right: 0; transform: skewY (-45deg);
Zoals je de randen van de zijkanten kunt zien niet uitlijnen na de transformatie, dus dat moeten we doen trek ze naar beneden.
Lijn de zijkanten uit
Naar bepaal de juiste lengte waardoor we de zijkanten naar beneden moeten verplaatsen, wenden we ons tot trigonometrie. Wat we moeten vinden is X, zoals Y is de breedte van de zijkanten (is gelijk aan de padding-afmeting van .lint) en de hoek θ is 45 ° (de hoek van de skew).
Het resultaat X dan moet worden gehalveerd, want er zijn ook een linker- en een rechterkant.
Als u een CSS preprocessor gebruikt, controleer dan of deze een bruinen functie, anders verwijzen naar een tangensgrafiek of een rekenmachine naar ontdek de tangenswaarde van de hoek. We hebben geluk als tan 45 ° is 1, wat betekent dat de waarde van X is gelijk aan Y in ons geval.
.lint: voor, .ribbon: na background-color: inherit; inhoud: "; weergave: blok; filter: helderheid (.5); hoogte: 100%; positie: absoluut; top: calc (var (- p) / 2); width: var (- p);
Sinds X moest worden gehalveerd, we gebruiken de calc () CSS-functie om de verdeling van de --p veranderlijk.
Eindelijk moeten we dat doen lijn de zijkanten langs de z-as uit zo goed, dus laten we het toevoegen z-index: -1 regel aan de zijkanten om plaats ze achter het middengedeelte van het lint.
.lint: voor, .ribbon: na background-color: inherit; inhoud: "; display: block; filter: brightness (.5); height: 100%; position: absolute; top: calc (var (- p) / 2); width: var (- p); z- index: -1;
Nu we de zijkanten hebben uitgelijnd, is ons CSS-lint klaar.
Hieronder kun je de live demo opnieuw bekijken, houd er rekening mee dat er ook een aantal extra stijlen worden gebruikt.
