Het creëren van een schitterende kleurverloop , zoals wanneer kleuren wisselen van donker naar licht in oplopende of aflopende volgorde op de achtergrond van uw website , kan nogal een opvallend effect. Afhankelijk van de inhoud , kan de weergave van de kleuren sterk verbeteren van teksten of afbeeldingen op de pagina , of de aandacht vestigen op bepaalde informatie . Er zijn een paar manieren om dit effect te programmeren , waarbij slechts een paar eenvoudige stukjes HTML -code en Cascading Style Sheets ( CSS ) . Wat je nodig hebt
Grafisch programma
tekst editor programma
Toon Meer Aanwijzingen verkopen Simple HTML -formaat
1 Open uw favoriete grafisch programma , zoals Gimp , Photoshop of Paintshop en maak een nieuw beeld , dat is 5 pixels hoog en 760 pixels over het gebruik van een 800 - pixel resolutie . Voor een 1024 - pixel resolutie , maakt de afbeelding 984 pixels breed , in plaats daarvan . Kopen van 2 Selecteer uw verfpot en de Gradient effect , en kies je twee kleuren , een uit het beginpunt van het verloop , en de andere om het eindpunt .
3 Sla dit bestand in een JPG-formaat in van uw website image map online en voeg de volgende in het bijzonder pagina 's HTML-code , waarbij de ; deel begint : plaatsvervanger
" name.jpg " voor uw bestand . Uw webpagina zal nu een verloop achtergrond .
Met behulp van Cascading Style Sheets in HTML
4 Maak een cascading style sheet of CSS methode van een gradiënt achtergrond voor uw webpagina pagina met afbeelding van een gradiënt eerste maken zoals in het vorige voorbeeld , maar deze keer het maken van de afbeelding 1 pixel breed en 800 pixels hoog . De standaard voor het bekijken op de meeste schermen is 800 pixels . Sla de afbeelding op als JPG naar uw website image map .
5 openen en te scannen via uw CSS-code met behulp van uw favoriete tekstverwerker . Het bestand zal worden gevestigd in uw website directory met het achtervoegsel " . Css " . Voeg de volgende code toe aan je CSS lichaam sectie : lichaam
{ background : url ( images /name.jpg ) 0 % 0 % repeat - x ; color: # 000000 ; height : 800px ; padding : 5px ; }
de " achtergrond : " statement bevat uw image-bestand en het pad , en de " repeat - x " en " 0 % 0 % " vertelt de browser de uitgangspositie van het beeld op de xy -as , in dit geval op 0,0 , of op de bovenste , meest linkse punt van het scherm , en vervolgens om de afbeelding te herhalen langs de x - as , of over de pagina .
6 Controleer of uw afbeelding is korter dan het scherm wanneer u naar beneden scrollen de pagina . Als dat zo is , moet je een achtergrondkleur toe te voegen aan de ' achtergrond ' verklaring in uw CSS- code die de onderkant van het beeld past . Zodoende zal bij de helling op is , wordt de achtergrond overeenkomen met de bodem van de gradiënt
Indien bijvoorbeeld de onderkant van het beeld gradiënt zwarte , zou de code als volgt : .
body { background : # 000000 url ( images /name.jpg ) 0 % 0 % repeat - x ; color: # 000000 ; height : 800px ; padding : 5px }
de ' # 000000 ' is de hexadecimale interpretatie voor de kleur zwart . De " achtergrond " in deze verklaring zal de URL commando overschrijven . Dus , als de afbeelding is te kort , zal de achtergrond waar het beeld eindigt zijn zwart .
U kunt de hexadecimale code voor uw kleur te lokaliseren door het openen van uw afbeelding in uw grafisch programma , en het selecteren van het gereedschap Pipet en wijst de onderste set van pixels . Als u ervoor kiest de kleur en selecteer deze in uw gereedschap , kunt u de code te vinden .
|
