1. #1
    FurtiveDuck's Avatar
    Registered
    04/10/03
    Location
    9000
    Posts
    3,755
    iTrader
    14 (100%)
    Mentioned
    0 Post(s)
    Reputation
    5/35

    Gradient op achtergrond.

    Dag iedereen,

    Ik ben momenteel bezig met een ontwerp voor een website voor een schoenenwinkel. Bij het omzetten naar HTML & CSS stuit ik, zoals gewoonlijk bij mij, op een probleem dat ik niet onmiddellijk kan oplossen. Het is dan ook al een tijdje geleden dat ik echt codeerwerk heb moeten verrichten en ben dan ook totaal niet mee met CSS3.

    Op het internet kan je tal van websites vinden die een radial gradient of dergelijke gebruiken om wat diepte te creeëren. Nu, dit wil ik ook doen en heb het al enkele keren geprobeerd maar ik bereik nooit het gewenste resultaat.

    Even concreet. Ik heb dus een achtergrond met een pattern dat de volledige webpagina beslaat. Als je de pagina uitrekt of kleiner maakt vult alles zich mooi op. Echter heb ik achter de header een radial gradient met blending mode "overlay" die de achtergrond met pattern deels verlicht. Enkel rond de header, maar toch wel een groot deel. De simpelste oplossing is natuurlijk om van het deel die de gradient beslaat één grote afbeelding te maken, maar dan komt het andere deel van de achtergrond niet netjes uit met het deel rond de header en vice versa. Als je de website dan verder uitrekt krijg je hier en daar nog eens een half stuk pattern die vanachter de grote afbeelding tevoorschijn komt, je snapt het wel.

    Hoe kan ik dit het best oplossen?
    Last edited by FurtiveDuck; 20-06-2012 at 20:16.
    no votes  

  2. #2

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    probleem dat en pattern dat vanachter ... (just so you know )

    Het is nog niet volledig duidelijk wat je wilt. Afbeelding/voorbeeld/test case?
    no votes  

  3. #3
    W0utR's Avatar
    Registered
    16/04/08
    Location
    Hong Kong
    Posts
    1,989
    iTrader
    6 (100%)
    Mentioned
    0 Post(s)
    Reputation
    7/9
    Een transparante PNG van je gradient is geen optie?
    Desnoods wat spelen met opacity en andere kleurtinten om die overlay te simuleren.
    no votes  

  4. #4
    Scissor's Avatar
    Registered
    14/09/02
    Posts
    1,088
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Heb je voorbeeld online? Ben zeker dat er wel een betere oplossing moet zijn.

    Edit: wat staat er in je header allemaal? Een optie is om van die header volledig een afbeelding te maken, maar hangt beetje af natuurlijk van wat er in moet.
    no votes  

  5. #5
    Design 311's Avatar
    Registered
    22/02/12
    Location
    Schoten, Antwerpen
    Posts
    11
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Dit is perfect mogelijk met CSS3, kijk hier eens:
    Speed Up with CSS3 Gradients | CSS-Tricks
    no votes  

  6. #6
    FurtiveDuck's Avatar
    Registered
    04/10/03
    Location
    9000
    Posts
    3,755
    iTrader
    14 (100%)
    Mentioned
    0 Post(s)
    Reputation
    5/35
    Verdorie, had een reply getypt maar niet gepost.

    Quote Originally Posted by BramVroy View Post
    This quote is hidden because you are ignoring this member. Show
    probleem dat en pattern dat vanachter ... (just so you know )

    Het is nog niet volledig duidelijk wat je wilt. Afbeelding/voorbeeld/test case?
    Bedankt, heb het aangepast. Hier kan je duidelijk zien wat ik wil bereiken. Gewoon hetzelfde effect, maar in de plaats van egaal oranje is het een achtergrond met pattern.

    Quote Originally Posted by W0utR View Post
    This quote is hidden because you are ignoring this member. Show
    Een transparante PNG van je gradient is geen optie?
    Desnoods wat spelen met opacity en andere kleurtinten om die overlay te simuleren.
    Dat heb ik reeds geprobeerd, maar dat trekt op niets. Het gewenste effect bereik 'k niet.
    no votes  

  7. #7

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Code van je header en de css die je gebruikt en het pattern?
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in