gradient voor schaduw <hr>

Status
Niet open voor verdere reacties.

wuzzie13

Gebruiker
Lid geworden
15 jul 2015
Berichten
10
hallo

Ik heb een <hr> onder mijn "navbar" geplaatst die een transparante gradient heeft (dus naar links toe verdwijnt) Als ik een schaduw toevoeg wordt die echter niet mee transparant. Hoe los ik dit op zodat de schaduw mee verdwijnt? Dit is de code die ik heb gebruikt.


html:

<hr id=hrshadow>

css:

#hrshadow {
weight:20px;
border: 0;
height: 2px;
background-image: linear-gradient(to right, rgba(240, 240, 240, 0), rgba(255, 255, 255, 0), rgba(240, 240, 240, 0.5), rgba(240, 240, 240, 0.75));
box-shadow: 2px 2px 2px rgba(65, 65, 65, 0.75)
}


Ik heb ook al geprobeerd de shadow-box in een aparte <div> te zetten, maar dat geeft geen verschil. Hoe kan ik die linear-gradient toepassen op de schadow-box?

Alvast bedankt
 
Wow, dit is een uitdaging maar volgens mij kan het niet op een elegante manier met puur css. Dit is het beste wat ik kon bedenken, alleen is het niet responsive.
Code:
<div class="hr-gradient"></div>
<div class="hr-shadow"></div>

.hr-gradient, .hr-shadow {
    width: 100%;
    height: 20px;
}
.hr-gradient {
    background-image: linear-gradient(
        90deg,
        rgba(255, 0, 0, 0.0),
        rgba(255, 0, 0, 0.1),
        rgba(255, 0, 0, 0.2),
        rgba(255, 0, 0, 0.4),
        rgba(255, 0, 0, 0.8)
    );
}
.hr-shadow {
    background-image: linear-gradient(
        3deg,
        rgba(64, 64, 64, 0.0),
        rgba(64, 64, 64, 0.1),
        rgba(64, 64, 64, 0.2),
        rgba(64, 64, 64, 0.3),
        rgba(64, 64, 64, 0.6)
    );
}
Suc6. Laat het hier even weten als je een oplossing hebt.
 
bijna

Het geeft inderdaad een beetje een schaduweffect (bij height:2px toch, niet bij 20px), maar eigenlijk zet je gewoon 2 gradientlijnen onder elkaar. De schaduwlijn is nogal hard en fade niet uit. Ook rechts stoppen ze op dezelfde plaats (door de width:100%). Dit kan ik oplossen door een fixed width in te geven. Mijn wrapper div is bvb 1200px, dus ik kan de .hr-gradient op 1198px zetten. ik kan ook een margin-top instellen die bij de .hr-shadow 2px hoger ligt. Als ik nu een fliter:blur(1px) toepas, komen we in de buurt :)

Het zou er dan zo uitzien (met background-color: #555555)

Code:
<body>
<div id="wrapper">
<h1>Er staat een lijn onder mij met een schaduw</h1>
<div class="hr-gradient"></div>
<div class="hr-shadow"></div>
</div>
</body>

body{
     background-color:#555555;
}
#wrapper{
    width:1200px;
    height:1000px;
    border:0px;
}
.hr-gradient, .hr-shadow {
        height:2px;
}
.hr-gradient {
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.0),
        rgba(255, 255, 255, 0.0),
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0.8)
    );
    margin-top:20px;
    width:1198px;   
}
.hr-shadow {
    background-image: linear-gradient(
        3deg,
        rgba(64, 64, 64, 0.0),
        rgba(64, 64, 64, 0.0),
        rgba(64, 64, 64, 0.2),
        rgba(64, 64, 64, 0.3),
        rgba(64, 64, 64, 0.6)
    );
    width:1200px;
    margin-top:22px;
    filter:blur(1px);

}
 
Laatst bewerkt:
Je maakt de pagina alleen voor schermen die 1440px of breder zijn :confused: ?

Voeg de webkit regel toe voor Chrome/Opera/Safari. Internet Explorer ondersteunt het niet, Edge wel.
-webkit-filter: blur(1px);
filter: blur(1px);


In plaats van de vaste 1000px hoogte is dit handiger. De wrapper doe je verder niets mee.
Code:
<body>
<div id="wrapper">
<!-- hier alle html van de body -->
</div>
</body>

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
}
#page {
  min-height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
Suc6. Have fun.
 
nog maar een week bezig

Ik ben nog maar sinds een week bezig met het bestuderen van html, css. Javascript en zo komen binnenkort ook nog aan de beurt.
Ik ken dus nog lang niet de taal zoals dat zou moeten.

Dus als ik goed begrijp: met "-webkit-box-sizing: border-box;" vul je het hele scherm, ongeacht de grootte?


en de height 100%, wat doet dat?

Door geen pixelgrootte te definiëren, kan ik de oplossing die ik bedacht niet gebruiken...
Hoe krijg ik de schaduw schuin onder de lijn?
 
De height:100% (2x) en min-height:100% (1x) zorgen ervoor dat je de hele viewport (zichtbare deel van de browser) ziet, ongeacht of er wel of niet iets in staat.

Bij sommige css3 eigenschappen wordt aanbevolen om behalve de normale css eigenschap ook de -webkit- toe te voegen. Dit is voor de wat oudere browsers (niet alle mensen updaten netjes hun browser).

De (-webkit-)box-sizing regels zijn ervoor om te zorgen dat padding en border een element niet groter maken. Met element bedoel ik bijvoorbeeld een <div> of <p>. De padding en border maken de inhoud van het element kleiner. Dit werkt erg makkelijk bij het berekenen van afmetingen. Gebruik in de breedte bij voorkeur padding in plaats van margin.

RE: Hoe krijg ik de schaduw schuin onder de lijn?
Een workaround is een <div> van 100% breed en 26px hoog die je een JPG als background-image geeft. De JPG is een afbeelding van de lijn met de schaduw. Met background-size zorg je ervoor dat de JPG binnen de <div> blijft.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan