11 berichten aan het bekijken - 1 tot 11 (van in totaal 11)
  • Q:

    Bijdrager
    Ramon

    CSS circle outline fill

    Ik wil graag het volgende object maken met css.

    Ik denk zelf dat het moet kunnen met before en after tags. heeft iemand misschien een tip over hoe ik dit het beste kan aanpakken?


    Bijdrager
    SolidCake

    Kan je wat meer uitleggen over wat je wilt doen? De context waarin je het wilt toepassen kan een beter beeld geven van een mogelijke oplossing.


    Bijdrager
    Ramon

    Ik wil dit gebruiken als een soort van grafiek. hoe meer minuten des te meer vult het blauw de cirkel.


    Bijdrager
    Shmoo

    Krijg je nooit perfect omdat de fill moet mee-roteren. Het horizontale lijntje roteert ook mee dus het is niet een normale mask. Dat wilt dus zeggen dat je voor elke minuut unieke CSS nodig hebt om de fill perfect te positioneren.

    Het is waarschijnlijk mogelijk met .svg + masking maar dat zijn dingen waar ik mij nog niet zo in verdiept heb. Ik probeer eerst gewoon icoontjes, logos en dat soort dingen te maken in .svg formaat op websites voordat ik aan dit soort moeilijkere elementen begin.

    Maar de techniek die je hier ziet gebeuren is eigenlijk wat je zoekt.
    http://tympanus.net/Development/AnimatedLetters/

    Zelf heb ik ooit een hardloop-blog willen maken en daarvoor heb ik toen een WordPress plugin gemaakt waardoor je de Activiteiten-cirkels van Apple Watch op je site kunt plaatsen. Ik heb serieus uren/dagen lopen pielen om het goed voor elkaar te krijgen met .svg, roteren, gradients maar uiteindelijk heb ik gewoon gekozen voor plaatjes. Elke stap is één plaatje en bij 100% neem je het ‘full’ plaatje en roteer je deze tot het aantal procent boven de 100. Niet 100% hetzelfde als wat Apple doet maar het komt in de buurt.


    Bijdrager
    SolidCake
    Shmoo op 24 maart 2016

    Het horizontale lijntje roteert ook mee dus het is niet een normale mask.

    Wat Shmoo zegt is een beetje de crux van het probleem. Als het een normale mask was kon je een fill op de achterkant laten doorlopen. Wat je uiteindelijk wilt is wel mogelijk maar er komt veel meer dan CSS bij kijken, JS, andere object-based talen en ‘misschien’ een database.

    Hier is een werkend model waar je een aantal elementen van kunt gebruiken.


    Bijdrager
    Ramon

    Om het makkelijk te houden kan ik misschien beter gebruik gaan maken van een mvg mask. Als het anders heel complex gaat worden is dat misschien niet zo handig. het hoeft verder niet geanimeerd te worden of iets dergelijks. het enige wat het moet doen is een keer het rondje vullen. bij de apple watch heb je een volle cirkel en daarin kan het rondje dus ook helemaal gevuld worden. dat is hierbij dus niet het geval de cirkel is nooit 360 graden rond.


    Bijdrager
    Ramon

    *svg mask bedoel ik natuurlijk.


    Bijdrager
    Shmoo

    De afgeronde uiteinde aan het fill element zijn ook een probleem om te maken.

    Als de fill enkel uit één kleur kleur bestaat en je daar geen gradiënt op toepast dan kun je met dit voorbeeld werken.

    Roteer dit item 90 graden en plaats dan bovenop ( een laag hoger dan het fill element ) een transparante .png als mask. Dus in je eigen voorbeeld de achtergrond van de fill, het gedeelte dat nu grijs is dan knip je als het ware uit zodat het rode in mijn linkje zichtbaar wordt.


    Moderator
    Night

    Ik zat zelf te denken dat je via CSS3/HTML5 een object kunt laten draaien. Je hoeft alleen de graden om te rekenen naar je waarden en een masker erover. Of moet je dan het masker laten draaien? Maar waarom het wiel opnieuw uitvinden?

    Zie voorbeeld:
    http://jsfiddle.net/andsens/mLA7X/
    http://jsfiddle.net/Aapn8/7179/

    Of CSS-only:
    http://jsfiddle.net/RrAVS/

    Pure CSS Circular Percentage Bar

    Een pagina met vele voorbeelden:
    http://designscrazed.org/jquery-css3-progress-bars/

    En zelfs de hoefijzer-vorm bestaat al:


    Bijdrager
    feek

    kijk hier eens:

    Op deze site staat mooi omschreven hoe iets vergelijkbaars wordt opgebouwd:
    https://cssanimation.rocks/watch/


    Bijdrager
    Ramon

    Bedankt voor jullie tips. het is gelukt:) uiteindelijk hebben we in overleg met de ontwerper ervoor gekozen om de gradiënt te laten zitten en gewoon met de kleur blauw te werken.

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

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