De Cascading Style Sheets ( CSS ) mark - up taal heeft opgedaan in CSS3 vele nieuwe elementen die laat je rivaal in visuele indicatie door het programmeren van een website gemaakt met beelden . Nieuwe elementen CSS3 's zijn driehoeken en afgeronde hoeken , die vóór deze update , waren moeilijk te maken . Deze eigenschappen maken het eenvoudig om een lint effect te creëren , zelfs voor een beginner in mark - up . Een lint is in wezen een tot meerdere driehoeken , een doos en een druppel - schaduweffect . Deze componenten met elkaar te verbinden tot een 3D- lint die je kunt plaatsen op headers , banners , of ergens anders in uw webpagina te creëren . Instructies
1 Maak een koptekst of titel tag . Bijvoorbeeld , als u wilt dat uw eerste koptekst op uw pagina om te zeggen " Header ", je mark - up zou verschijnen als : " . Header < /h1 > " Sluit altijd een HTML -tag met een backslash . kopen van 2 Geef uw HTML -tag de stylings je wilt met CSS . Ten minste zijn positie , grootte en kleur . Bijvoorbeeld , verwijst uw tag , uw CSS mark - up zou uitzien : h1
{ position: absolute ; width: 20 % ; padding : 10px ; background-color : # 999 ; } < br > Maak elke regel CSS mark - up een aparte regel . Beginnen en eindigen elke verklaring met haakjes openen en sluiten . " Position : absolute ": de positie van het element absoluut is en ongeacht wat anders aan de hand in de pagina verandert niet . De breedte is ingesteld op 20 procent van het scherm of de bak de h1 -tag is ingesteld binnenkant van , zoals een " div " of " tafel. " De padding geeft de h1 -tag wat extra ademruimte . De achtergrond - kleur bepaalt de kleur rond de tekst .
3 Maak een driehoekig " na " pseudo - element te voegen aan uw header-tag . De " after" pseudo - element is nieuw in CSS3 en laat je een element plaatst direct na een andere. Maak er een driehoek door het instellen van meer dan een van zijn grenzen te doorzichtig . Je markup na uw tag zou nu als volgt uitzien : h1
: na { position: absolute ; left: 0 ; top : 100 % ; border - width : 10px 10px ; border - style : solid , border -color : # 666 # 666 transparent ; }
de positie en de linker stijl zet de driehoek in de linkerbenedenhoek van het h1 element . De bovenkant en de grens stijlen de grootte van de driehoek . De border-color stijl maakt het blok verschijnen als een driehoek en de grens - kleuren die verschijnen zijn donkerder dan de kleur van de header , het creëren van een 3D-effect , alsof het blok header is scherp vouwen achteruit als een lint .
< br > 4 Voeg meer effecten met driehoek elementen om het lint uiterlijk van je kop af . Positioneer deze laatste driehoeken aan het begin van je kop en aan het einde , zodat het lint heeft een vlag - achtige look . Uw CSS mark - up verschijnt nu in zijn geheel als : h1
{ position: absolute ; width: 20 % ; padding : 10px ; background-color : # 999 ; } h1
: na { position: absolute ; left: 0px ; top : 100 % ; border - width : 10px 10px ; border - style : solid ; border -color : # 666 # 666 transparent ; } h1
: vóór {position : absoluut; rechts : 0px ; top : 0px ; border -color : # fff transparant transparant transparant ; h1 }
: vóór { position: absolute ; left: - 30px ; top : 12px ; border - width : 20px 10px , border -color : # 999 # 999 # 999 transparant ; }
de eerste " : vóór " element creëert een vlag - effect op de rechterkant van de header . De tweede " : vóór " . Element creëert een vlag stijl op de linker gedaald zijkant van de kop
|
