a:after

Status
Niet open voor verdere reacties.
N

Niellles

Gebruiker
Lid geworden
21 jun 2008
Berichten
194
Beste CSS-helden,

Ik ben aan het experimenteren met allerlei dingen die ik in css nog nooit had gezien... Opacity, border-radius, :after, etc. Allemaal leuke speeltjes maar met name die after kom ik nog niet helemaal uit.

De relevante HTML:
HTML: 
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style/style.css" />
</head>

<body>
<div class="wrapper">

    <div class="foto" style="background-image: url('style/pizza800px.jpg');">
        <div class="flags">
            <a class="flag" href="#">1</a>
        </div>
        <div class="receptinfo">
            tests
        </div>
        <div class="clear"></div>
    </div>

</div>
</body>
</html>

En dan de relevante .css:
Code: 
.foto {
    min-height : 200px;
    padding : 0;
}

.foto .receptinfo{
    background-color : white;
    opacity:0.9;
    filter:alpha(opacity=90);
    float : right;
    width : 200px;
    margin : 20px 0;
    padding : 5px;
    height : 160px;
    border-top-left-radius : 10px;
    border-bottom-left-radius : 10px;    
}

.foto .flags{
    float : left
}

.foto .flags a.flag {
    margin-left : 20px;
    margin-bottom : 0;
    height : 30px;
    width : 30px;
    display : block;
    background-color : white;
    opacity:0.9;
    filter:alpha(opacity=90);
}

.foto .flags a.flag:after {
    content : "";
    width : 0px;
    display : block;
    margin-top : 12px;
    opacity:0.9;
    border-top:15px solid white;
    border-left:15px solid transparent;
    border-bottom:15px solid transparent;
    border-right:15px solid transparent;
}

Dat geeft het volgende resultaat:
Knipsel.JPG

Zoals je kunt zien zit er net een beetje ruimte tussen m'n driehoek en m'n vierkant. Deze afstand is alleen minder dan 1px, want als ik de margin-top van a.flag:after groter maakt gaat hij verder naar beneden, maar als ik deze kleiner maakt valt de driehoek deels over het vierkantje. Hoe los ik dit op? Kan ik misschien beter met position : relative(?); werken en dan top:?

Verder zou ik graag zien dat div.receptinfo de maximale hoogte pakt van div.foto behalve dan die marge aan de boven- onderkant, krijg ik helaas ook niet voor elkaar.

Iemand die me hier uit de brand kan helpen? Mijn boekje html&css de basis spreekt helaas niet over al deze zaken :(.

Groet,

Niels
 
De antwoorden op je vraag zullen ongetwijfeld gaan komen.
In ieder geval welkom in de wereld van ccs3 :thumb:
Je kunt html5 dan ook direct meenemen :cool:

**toevoeging**
Let bij een aantal dingen op de Cross-Brwoser.
 
Laatst bewerkt:
bron zei:
De antwoorden op je vraag zullen ongetwijfeld gaan komen.
In ieder geval welkom in de wereld van ccs3 :thumb:
Je kunt html5 dan ook direct meenemen :cool:

**toevoeging**
Let bij een aantal dingen op de Cross-Brwoser.
Klik om te vergroten...

Haha dank je wel... CSS3, wow! Was wel redelijk bekend met 2, maar kan me niet herinneren dat ik dingen daar doorzichtig mee kon maken... of ronde hoeken. Naar mijn weten was dat altijd photoshop en dan plaatjes.
 
Plaatjes worden nog vaak gebruikt om het makkelijk cross-browser te maken, maar met css heb je meer controle en kun je makkelijk iets snel wijzigen. Voorbeeldje cross-browser:
Code: 
.radius10 {   
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}  
.opacity75 {
  opacity: .75;
  -webkit-opacity: 0.75;
  filter: alpha(opacity=75);
  -ms-filter: "alpha(opacity=75)";
}
Soms zijn bepaalde regels niet nodig als je oudere browsers niet ondersteunt.
 
Laatst bewerkt:
Dat ik voor het één ander meerdere regels moet gebruiken om het crossbrowser te laten werken had ik inmiddels begrepen, maar toch bedankt.

Helaas heeft dit het lijntje nog niet weggehaald, iemand ideeën?
 
wat denk je dat een margin-top doet dan? verander deze eens naar margin-top:10px ?
 
Bij nader inzien sluit ie (zoals dudstone al zei) bij een margin-top van 10px wel aan. Alleen lijkt de opacity van a:after geen invloed te hebben op de border en helaas klopt de breedte ook nog niet helemaal. Met de width of grootte van de borders krijg ik die helaas niet goed.

Zie afbeelding:
Knipsel.JPG

Suggesties?
 
zoiets dan?

Code: 
.foto {
    min-height : 200px;
    padding : 0;
}

.foto .receptinfo{
    background-color : white;
    opacity:0.9;
    filter:alpha(opacity=90);
    float : right;
    width : 200px;
    margin : 20px 0;
    padding : 5px;
    height : 160px;
    border-top-left-radius : 10px;
    border-bottom-left-radius : 10px;    
}

.foto .flags{
    float : left
}

.foto .flags a.flag {
    margin-left : 20px;
    margin-bottom : 0;
    height : 30px;
    width : 30px;
    display : block;

    background:rgba(255,255,255,0.9);

}

.foto .flags a.flag:after {
    content : "";
    width : 0px;
    display : block;
    margin-top : 10px;
    margin-left:-1px;
    opacity:0.9;
    border-top:15px solid white;
    border-left:16px solid transparent;
    border-bottom:15px solid transparent;
    border-right:16px solid transparent;
}
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan