Hvordan lage Ribbons i CSS3

Den Cascading Style Sheets (CSS) mark-up språk har fått i CSS3 mange nye elementer som gjør at du rival i visuell visning gjennom programmering en nettside laget med bilder. CSS3 nye elementer inkluderer trekanter og avrundede hjørner, som før denne oppdateringen, var vanskelig å lage. Disse funksjonene gjør det enkelt å skape et bånd effekt selv for en nybegynner i mark-up. Et bånd er i hovedsak en til flere trekanter, en boks, og en drop-skygge effekt. Disse komponentene kobles sammen for å lage en 3D-bånd som du kan plassere over overskrifter, bannere, eller andre steder i websiden din.

Bruksanvisning

1 Lag en overskrift eller tittel tag. For eksempel, hvis du ønsker din første overskriften på siden din å si "Header" din mark-up vil vises som: "<h1> Header </ h1>." Lukk alltid en HTML-kode med en omvendt skråstrek.

2 Gi HTML kode stylings du vil med CSS. Ta med minst sin posisjon, størrelse og farge. For eksempel å registrere din <h1> tag, ville CSS mark-up ser slik ut:

h1
{
position: absolute;
bredde: 20%;
padding: 10px;
background-color: # 999;
}

Gjør hver linje av CSS påslag en egen linje. Begynne og avslutte hver setning med åpne og lukkede parentes. "Stilling: absolutt" menes stillingen av elementet er absolutte og endrer ikke uansett hva annet som skjer på siden. Bredden er satt til 20 prosent av skjermen eller bin h1 tag er satt inni, for eksempel en "div" eller "bord". Polstringen gir h1 tag litt ekstra pusterom. Den background-color setter farge rundt teksten.

3 Lag en trekantet "etter" pseudo-element for å legge til din overskriften koden. Den "etter" pseudo-element er nytt i CSS3 og lar deg plassere et element rett etter en annen. Gjør det til en trekant ved å sette mer enn en av sine grenser til gjennomsiktig. Din markup etter <h1> tag ville nå se slik ut:

h1: etter
{
position: absolute;

venstre: 0;
top: 100%;

border-width: 10px 10px;

border-style: solid;

border-color: # 666 # 666 gjennomsiktig gjennomsiktig;

}

Posisjonen og venstre stil setter trekanten nederst til venstre i h1-elementet. Topp- og kantlinjer angi størrelsen på trekanten. Grensen-color stil gjør blokken vises som en trekant og grense-fargene som vises er mørkere enn fargen på overskriften, og skaper en 3D-effekt, som om overskriften blokken er kraftig sammenleggbar bakover som et bånd.

4 Legg til flere effekter med trekant elementer for å fullføre bånd utseendet på spissen. Plasser disse siste trekantene i begynnelsen av overskriften og på slutten, slik at båndet har et flagg-lignende utseende. CSS påslag vises nå i helhet:

h1
{
position: absolute;
bredde: 20%;
padding: 10px;
background-color: # 999;
}

h1: etter
{
position: absolute;

venstre: 0px;
top: 100%;

border-width: 10px 10px;

border-style: solid;

border-color: # 666 # 666 gjennomsiktig gjennomsiktig;

}

h1: før

{

position: absolute;

høyre: 0px;

top: 0px;

border-color: transparent #fff gjennomsiktig gjennomsiktig;

}

h1: før

{

position: absolute;

venstre: -30px;

top: 12px;

border-width: 20px 10px;

border-color: # 999 # 999 # 999 gjennomsiktig;

}

Den første ": før" element danner en flagg-effekt på høyre side av spissen. Den andre ": før" element skaper et flagg stil på venstre droppet side av spissen.

Hint

  • Eksperimenter med forskjellige farger og steder for å gjøre dine bånd. Snarere enn å feste trekanter og drop-skygger til overskrifter, prøve dem på avsnitt, div-tallet, og andre tekstelementer.