Hoe maak je een tabblad aan de zijkant in CSS

Een tabblad aan de zijkant van een webpagina gaat vaak gepaard met een script dat wordt uitgevoerd wanneer de gebruiker op het zoals een pull-out formulier voor inloggen of delen op een sociaal netwerk. Alvorens u dat doen kunt, moet u echter het tabblad zelf maken. Met de eigenschap "transformatie" in CSS niveau 3 (CSS3) kunt u een mooie tabblad uit een link maken en draai het zijwaarts. Hoewel dit CSS3 code is is er zelfs een Internet Explorer-filter, dat op zes versies tot en met acht werkt.

• Open uw webpagina in een editor-Kladblok werken – en het toevoegen van een nieuwe div net na de opening""label:

  
  Tabblad pagina
  

  Geef het div-element een ID-naam zoals "lusje" en plaats tekst voor het tabblad binnen de "

  "tags. De tekst klikbare maken door deze binnen een paar ankertags te plaatsen. Vervang het hekje in het voorbeeld met een URL moet u de koppeling naar een andere webpagina verwijzen.

• Uw tabblad stijl in de CSS waardoor het een achtergrondkleur, de tekststijl en de grenzen die passen bij de pagina's ontwerp:

  tabblad een {}

  achtergrondkleur: lichtblauwe;
  kleur: donkerblauwe;
  rand: 2px solide donkerblauwe;
  lettertype-familie: Arial, sans-serif;
  font-weight: bold;
  padding: 20px;
  }

  Deze stijlregel geldt de stijlen voor het ankertags om te houden van het hele tabblad aanklikbaar. Als u een opvulling aan alleen het tabblad div-element zelf toegevoegd, zou minder van het tabblad gebied aanklikbaar.

• De kromme van de twee bovenste hoeken van het tabblad als u wilt, met behulp van de "border-radius" eigendom:

  grens-boven-links-radius: 20px;
  border-top-rechts-radius: 20px;

  Deze twee coderegels geplaatst, wanneer toegevoegd aan de "#tab een" stijl van de regel, zal het maken van de top van uw tabblad afgerond.

• Het tabblad draaien zodat het wordt zijdelings:

  transformeren: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transformatie: rotate(-90deg);
  -o-transformatie: rotate(-90deg);
  -ms-transformatie: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

  De eerste regel hierboven is de standaardmethode van de CSS3 voor het draaien van een HTML-element. Vanaf September 2011 moeten meeste browsers vastgestelde code. De voorvoegsels opgeven een browser met uitzondering van "-webkit" die effecten zowel Chrome en Safari. Eerdere versies van Internet Explorer gebruik van het filter, laatste weergegeven. Alle deze code moet gaan in de "#tab een" regel.

• Plaats van het tabblad aan de zijkant van de uiterst links van de browserscherm en maak het stok in één plaats wanneer de gebruiker naar beneden de pagina schuift:

  positie: vast te stellen;
  links: 0;
  Top: 50%;
  margin-top:-100px;

  Terwijl u niet hoeft een positie vanaf de bovenkant van het scherm instellen, laat doen zo je bepaalt u de verticale positie van de tab. Als u gaf uw tabblad een bepaalde breedte, dan die breedte in tweeën gesneden en zorg dat aantal negatieve te komen met een waarde voor "marge-top." Instellen van deze negatieve marge met een "top" positie van 50 procent, zal het tabblad op het scherm verticaal centreren.