ComputereProgrammering

Hvordan CSS trekant: de mest praktiske måder

Meget ofte smukke moderne websider indeholder mange attraktive grafik. Blandt dem den simpleste anvender en sådan geometrisk form som en trekant, som anvendes til at designe en flerhed af elementer. For eksempel bliver de brugt som en pegepind til et objekt på siden for at den besøgende vendte sin opmærksomhed mod ham. Selvfølgelig er den vigtigste funktion af trekanten - er et dekorativt, som blokke, der indeholder dem, bliver mere moderne og attraktiv.

Ikke alle ved, hvordan man skaber sådan en figur gennem Cascading Style Sheets, og overvejer, hvordan man laver en trekant i CSS.

Ansøgning i design af websites

I webdesign trekanter overalt. De er lavet ud tips, menuer, forskellige UI elementer. Nogle gange bliver de brugt til at skabe en indikator af boot processen. Og hvis tidligere var det muligt at undvære dem, men nu er det umuligt, og udviklerne er forpligtet til at tilpasse sig sådanne krav. Efter alt, i dag skabt i CSS trekant - en vigtig del i opbygningen af sammenkobling dele af brugerfladen og flette ind i en enkelt enhed.

Mange web-designere er forvirret, når det kommer til det layout, hvis udformning er meget ofte trekanter. Efter alt, ingen egenskaber, der ville direkte skabe denne geometrisk figur. I virkeligheden er der flere metoder til at gøre dette.

En metode til at skabe rammen ved hjælp

Den første metode gør det muligt at skabe en trekant i CSS - grænsen. Han bruger frames. På trods af, at de grænser, der er skabt ved hjælp af grænsen ejendommen ikke er direkte relateret til den trekant, er det bruges oftest til dette formål.

Ved indstilling nul højde og bredde af objektet, samt montering af en tyk kant, kan man se pladsen, som er opdelt i fire lige store trekanter. Tricket er, at du skal holde kun den nødvendige grænse, og de andre til at gøre gennemsigtig. Og nu viser det sig, en trekant tegnet i CSS rigtige retning og farve.

Opret vinkler ved hjælp af egenskaberne "ramme" er praktisk, fordi der ikke er behov for at tegne billeder ved hjælp af enhver redigering. trekant parametre kan altid ændres i koden. Og det sparer tid udvikler. Ved at kombinere de forskellige bredden af rammen er det let nok at komme figuren. For at forstå hvordan det virker, kan du blot oprette et tomt element med et nul bredde, højde, og meget tyk ramme en anden farve på hver side. Så gør de tre sider af de fire transparente trekanter er af forskellige typer:

  • trekant, ser til venstre, hvis sider er ens;
  • trekant, looking left og fladtrykt;
  • en aflang trekant, mod venstre;
  • vinklet trekant, hvis venstre til højre vinkel;
  • trekant ser nedad;
  • trekant ser op;
  • trekant, ser til højre, og mange andre arter.

Brug psevdoedementov

Med disse teknikker, kan du oprette vinkler i pop-up instruktioner og tips. For at vedhæfte via CSS trekant til enheden, for det meste programmører bruger såsom en pseudo-efter og før. Hvis du bruger dem sammen, er det muligt at trække i CSS trekant at få et slagtilfælde.

Ved at kombinere dem, udviklerne skabe en bred vifte af smukke shooter, påføre ejendom position: relative til den overordnede element. Dette gøres for at pseudo-ikke flyttet ud af deres pladser.

Plus brugen af CSS rammer for at skabe trekanter er:

  • hurtig og nem redigering af størrelser og farver ved hjælp af ejendomme;
  • understøtte alle browsere.

ulemper:

  • fordi den bruger rammen, er der ingen mulighed for at anvende forløb, skygger;
  • nogle gange, når brugeren ser på side af Firefox-browseren, alfa-værdi kan ikke arbejde, og dette vil forvrænge billedet.

Ved hjælp af færdiglavede billeder

Den følgende metode til at skabe trekanter - er brugen af kodede billeder. Trekanten er tegnet på forhånd i et billedredigeringsprogram og omdannet til en særlig kode med specialiserede tjenester.

Fordelen ved denne metode er, at du kan gøre en meget smukt design med skygger, forløb og stel og så bare indkode det hele. Men ulempen er, at ikke alle er flydende i grafikprogrammer. Hertil kommer, at hvis billedet er meget stor, er den linje kode opnået ved simpelthen enorm. Det er ubelejligt for udvikleren.

En særskilt post værd brugen af browsere Internert Explorer gamle versioner. I dem, metoden simpelthen ikke virker.

Metode inverteret firkant

En måde er at skabe et middel til CSS omvendt kvadrat. Der er to grundlæggende enhed. Men nogle mennesker bruger pseudo.

Først skal du oprette et kvadrat. Det bliver indholdet af den roterende del. Så implementere det ved 45 grader, så det lignede en diamant. Derefter skift-up og en ekstern enhed skjult af ejendommen overløb: skjult. Denne løsning er heller ikke en cross-browser, og nogle gange billedet vises ikke som ønsket.

resultater

Så der er mange metoder til at skabe en trekant. Kun det ikke bliver tabt i alle disse CSS egenskaber? Henvisning i dette tilfælde vil altid hjælpe. Den beskriver alle funktioner i Cascading Style Sheets.

For dem, der ikke ønsker at gå ind i programmeringen og se CSS-vejledning, der er online redaktører, der genererer trekanter rigtige størrelser og farver. I den visuelle editor, vælger brugeren og konfigurerer alle indstillinger figur. Omregnet til CSS kode generator trekant placeret i et separat vindue i farten. Derefter genererede kode simpelthen indsat i stylesheet og at passe med designet af siden.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 da.delachieve.com. Theme powered by WordPress.