14 berichten aan het bekijken - 1 tot 14 (van in totaal 14)
  • Q:
    Bijdrager
    verwijderd-profiel

    background-color bij hover alleen IN afbeelding

    Hallo,

    Ik ben met een website bezig en heb iets waarvan ik echt niet weet hoe ik dit zou moeten doen.

    Ik heb als contact-buttons png’s gebruikt, waarbij de binnenkant leeg is (doorzichtig dus).

    Dit is hoe het er nu uitziet:

    Die afbeeldingen heb ik in een ul gezet. Als ik nu dit doe:

    #contactButtons ul li:hover {
    background-color: rgba(194,94,94,0.87);
    }

    Krijg ik dit als je met je muis eroverheen gaat:

    Nu vraag ik me af hoe ik het zo maak dat echt alleen de binnenkant van de afbeeldingen opgevuld wordt met de (transparante) achtergrondkleur.
    Dus bij LinkedIn moet alleen “in” worden opgevuld, bij Google+ alleen “g+” en de streep etc.

    Ik kan niet echt iets vinden waar ik wat aan heb, helaas.
    Ik vraag me af of dit met css kan.

    Hopelijk hebben jullie tips!

    Bijdrager
    Shmoo

    Het kan op een aantal manieren, CSS alleen gaat vrij moeilijk maar is niet onmogelijk, dan zal je met Pseudo elementen moeten gaan werken :before & :after om extra lagen te maken die je voor en achter elkaar legt. Dit is vrij moeilijk om pixel-perfect achter elkaar te krijgen.
    Bij het LinkedIn voorbeeld zou je de achtergrond-color dus iets kleiner kunnen maken en hem dan gewoon erachter plaatsen maar bij het Google+ icoontje moet je echt op het randje werken.

    Kijk eens hoe icon-fonts dat aanpakken dan zie je precies hoe dat werkt.
    Plaats de icons bijv. op de i HTML tag.

    A Whole Bunch of Amazing Stuff Pseudo Elements Can Do


    http://fontawesome.io

    Maar het makkelijkste en de meest snelle manier voor een zestal icons is toch gewoon een Sprite.png maken met daarin 12 versies, normaal + hover.
    Adobe Fireworks heeft een mooie Sprite functie ingebouwd

    Bijdrager
    verwijderd-profiel

    Met css, de pseudo elementen, gaat me dan toch wat te ver.
    Stukjes background erachter plakken doe ik liever niet. Bij css is dit makkelijk, maar Google+ bijvoorbeeld gaat dat niet mooi worden.

    Maar met FW zou het dan moeten lukken. Ik ga het eens proberen

    Bedankt!:)

    Bijdrager
    Shmoo

    Ik was er zelf ook vandaag mee bezig maar ik kwam er al snel achter dat het niet mooi zou worden en dat je hier echt de tijd voor moet nemen om goede vectoren uit te zoeken.

    De radius van de social media icons die ik gebruikt zijn een beetje out-of-date ( 2011 feeling ) , dat viel bij mij pas goed op wanneer ik ze op een iOS 7 radius plaatst.

    Bijdrager
    verwijderd-profiel

    Wat bedoel je met het laatste plaatje? Ik zie niet wat dit met radius te maken heeft. En nu zijn de icoontjes ook niet een 6 hoek. Toch?

    Anyway, ik gebruik de icoontjes van deze collectie: http://icons8.com/download-huge-windows8-set/

    Bijdrager
    Wyodor

    Ik ben geen deskundige, maar zou dit het kunnen zijn :

    http://basilico.byethost8.com/tweet/

    Bijdrager
    chris24924

    Makkelijkste is om in bijvoorbeeld Photoshop de binnenkant in te kleuren, en deze image te gebruiken als :hover

    Bijdrager
    verwijderd-profiel

    @Wyodor, dat ja. (Maar dan doorzichtig)

    Dit gaat wel lukken met FW of PS. Ik vroeg me alleen af of het native kon, met css dus.

    Als ik vanmiddag even tijd heb ga ik het proberen. (Google + wordt iets moeilijker, maar het gaat wel lukken)

    Bijdrager
    Wyodor

    Dan maak je de afbeelding doorzichtig.

    Bijdrager
    Shmoo

    @Dr. User,

    Kijk eens, dit is denk ik de beste oplossing die zowel browser-requests spaart + gemaakt is met minder code.
    https://db.tt/gkJ29kpV

    Wat ik heb gedaan is eigenlijk vrij simpel.
    – Ik toon eerst gewoon de icon als .png
    – Daarna een pseudo:before laag aangemaakt die ik via een position absolute met gelijke verhoudingen (width+height) bovenop de icon.png plaats
    – Dan maak ik zo goed als mogelijk de radius van de icon.png na op de pseudo:before laag
    – Daarna plaats ik de pseudo:before laag 1 stap (niveau) naar achteren en via de opacity 0 verberg is zeg maar de rode kleur
    – Als laatste koppel ik de normale Hover met de pseudo:before laag Hover en zet ik de opacity op 1

    Duik maar eens in de broncode en haal de z-index: -1; weg dan zal je zien dat de Hover zoals normaal gewoon bovenop de icon.png valt en kun je heel goed zien dat de radius van de rode laag niet gelijk loopt met die van de afbeelding. Dit zou je nog iets kunnen corrigeren door elke hoek apart zijn eigen radius-waardes te geven aangezien de afb. die ik gebruik niet helemaal vierkant is.

    Helemaal 100% pixel-perfect ga je die radius niet krijgen met CSS – dan zal je richting Vector moeten gaan maar eigenlijk maakt dat net zoveel uit want de rode laag valt toch achter de afbeelding + je hebt geen social media icon die met een transparantie vanuit de radius begint.

    Bijdrager
    verwijderd-profiel

    Wow, dat heb je wel mooi gedaan!

    Ik ga hiermee aan de slag, dit is precies wat ik bedoel dan eigenlijk.:)

    En aangezien je bijna de hele afbeelding ermee hebt bedekt kan ik dit voor allemaal gebruiken. (behalve het Twitter en Mail icon, maar het Mail icon gaat me nu zelf wel lukken.

    Bedankt!

    EDIT// Met mijn niet zo geweldige PS skills is het gelukt om de mail en twitter icons in net zo’n icon te zetten als de rest, dezelfde vorm zegmaar. Dus daarvoor kan ik het ook gebruiken. Het uiteindelijke resultaat post ik hier wel.

    Bijdrager
    verwijderd-profiel

    @Shmoo, bedankt, met jouw oplossing is het nu perfect gelukt.

    Resultaat: Video
    Erg goed gelukt dus!

    Als de website af is komt die op OMT te staan!

    Bijdrager
    Shmoo

    (y) Goed zo..

    Je kunt ook animated gifjes opnemen met deze app.
    http://www.cockos.com/licecap/

    Video’s zijn vaker direct zo groot van formaat.

    Bijdrager
    verwijderd-profiel

    Die App zocht ik!:)

14 berichten aan het bekijken - 1 tot 14 (van in totaal 14)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.