DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
ander vraagje
om 2 heel verschillende lettertypes te gebruiken heb ik een font-face gebruikt
nu zijn staat 1 lettertype lager dan het andere.
Hoe kan ik dit oplossen
dit is de code:
css:
of beter image van maken??
om 2 heel verschillende lettertypes te gebruiken heb ik een font-face gebruikt
nu zijn staat 1 lettertype lager dan het andere.
Hoe kan ik dit oplossen
dit is de code:
| 1 2 3 | <div id="textheader"> <span class="eroded">tekst1</span><span class="loco"> tekst2</span> </div> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | @font-face { font-family: eroded; src: url('28days.eot'); src: local(" 28days "), url( 28days.ttf ) format("truetype"); /* non-IE */ } @font-face { font-family: loco; src: url('loco.eot'); src: local(" loco"), url( loco.ttf ) format("truetype"); /* non-IE */ } span.eroded { font-family: eroded, sans-serif; font-size:80px; } span.loco { font-family: loco, sans-serif; font-size:80px; } |
of beter image van maken??
Euh... Is de makkelijkste oplossing niet gewoon de lage tekst wat omhoog plaatsen, met bv zoiets?
| 1 | position: relative; top: -5px; |
Als het trouwens een header moet voorstellen, waarom gebruik je dan een div en niet gewoon een h-element?
je eerste werkt iggquote:Op woensdag 23 november 2011 22:22 schreef Tijn het volgende:
Als het trouwens een header moet voorstellen, waarom gebruik je dan een div en niet gewoon een h-element?
2de..uhm tja...waarom ook niet
maar met @font-face heb je daar toch geen last van?quote:Op woensdag 23 november 2011 22:26 schreef Tegan het volgende:
Plus, ik zou toch een image doen, want web-safe fonts!
ik heb de fonts erbij staan als file
Hoezo?quote:
Plus, ik zou toch een image doen, want web-safe fonts!
.
nog 1 vraagje...en dan is het weer mooi geweest
met js onclick laat ik switchen tussen 2 css files
om tekst2 van andere kleur te voorzien
like so
het is niet zo mooi om als code te zien..want tekst2 is nogal een lang woord...maar het werkt
...enigzins
als ik op het woord klik..dan duurt het nogal lang voordat de letters van kleur veranderen
iets van een halve seconde en niet echt vloeiend, zwart beeld enzo
is hier een andere javascript (oid) oplossing voor
met js onclick laat ik switchen tussen 2 css files
om tekst2 van andere kleur te voorzien
like so
| 1 2 3 4 5 6 7 8 9 10 | <div class="eroded"> <a href="#" onclick="changeStyle('css/tekst1.css'); return false;" >tekst</a> </div> <div class="loco"> <a href="#" onclick="changeStyle('css/tekst2.css'); return false;" > <span><span class="rood"> a</span><span class="oranje">b</span></a> </div> |
het is niet zo mooi om als code te zien..want tekst2 is nogal een lang woord...maar het werkt
...enigzins
als ik op het woord klik..dan duurt het nogal lang voordat de letters van kleur veranderen
iets van een halve seconde en niet echt vloeiend, zwart beeld enzo
is hier een andere javascript (oid) oplossing voor
Omdat hij die andere CSS file moet downloaden. Dat kost tijd en server load, en is zeker niet handig.
Waarom doe je niet gewoon met bijvoorbeeld jQuery een class togglen on click? Dan doe je het bijv zo:
tekst.css
mijnSite.js
HTML
Waarom doe je niet gewoon met bijvoorbeeld jQuery een class togglen on click? Dan doe je het bijv zo:
tekst.css
| 1 | .kleur1 { color: #FF0000; } |
mijnSite.js
| 1 2 3 4 5 | $(function() { $('#tekst2').click(function(e) { $(this).toggleClass('kleur1'); }); }); |
HTML
| 1 | <span id='tekst2'>Klik</span> |
Of toch du vader?
Dit is niet zo'n fraaie oplossing, MrNiles 
Wat moet er gebeuren als je op een tekst klikt? Hij wordt alleen maar rood en verder niks?
Wat moet er gebeuren als je op een tekst klikt? Hij wordt alleen maar rood en verder niks?
Je kunt (afhankelijk van je doel) toch gewoon je body een andere class geven?quote:Op woensdag 23 november 2011 22:46 schreef Tijn het volgende:
Dit is niet zo'n fraaie oplossing, MrNiles
Wat moet er gebeuren als je op een tekst klikt? Hij wordt alleen maar rood en verder niks?
i know..maar hoe anders?quote:
Dit is niet zo'n fraaie oplossing, MrNiles
Wat moet er gebeuren als je op een tekst klikt? Hij wordt alleen maar rood en verder niks?
wat ik wil is in de header TEKST2 van kleur laten veranderen.
en dan elke letter een andere kleur + 1 img veranderen,
van z-w naar een kleur...misschien makkelijker met een hover?
Dit idd.quote:
[..]
Je kunt (afhankelijk van je doel) toch gewoon je body een andere class geven?
Op
Als je alleen de kleur wil veranderen is de oplossing van Luchtkoker een mooie (met jQuery).quote:
[..]
i know..maar hoe anders?
wat ik wil is in de header TEKST2 van kleur laten veranderen.
en dan elke letter een andere kleur + 1 img veranderen,
van z-w naar een kleur...misschien makkelijker met een hover?
Als je echt elke letter apart wil veranderen, moet je denk ik dan aan elke letter een aparte class hangen.
hmm...daar eens induiken dan, en zo kan ik dan ook meteen een img veranderen?quote:
[..]
Als je alleen de kleur wil veranderen is de oplossing van Luchtkoker een mooie (met jQuery).
Als je echt elke letter apart wil veranderen, moet je denk ik dan aan elke letter een aparte class hangen.
wat bedoel je met img veranderen?quote:
[..]
hmm...daar eens induiken dan, en zo kan ik dan ook meteen een img veranderen?
Bedoel je in die onclick dan een plaatje veranderen?
quote:$("#my_image").attr("src","second.jpg");
Als je image een vaste hoogte/breedte heeft, en altijd dezelfde states (normaal en hover), dan is het beter en handiger om er een sprite van te maken, dus ze in 1 plaatje te zetten, die je met background-position goed zet.quote:
[..]
wat bedoel je met img veranderen?
Bedoel je in die onclick dan een plaatje veranderen?
[code]
$("#my_image").attr("src","second.jpg");
[/code]
Met de jQuery-oplossing (of kan zelfs met puur css dan), kan je de bgpos veranderen. Het voordeel is, dat als je er voor de eerste keer over hovert, het nieuwe plaatje niet ingeladen hoeft te worden en dus direct getoond wordt. Plus, het scheelt weer een request naar de server.
dat dus.
Sprites zijn heel makkelijk. Je hoeft in principe alleen maar bij een :hover de position te veranderen.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
bij een hover of click op TEKST2 dat tekst2 veranderd in verschillende kleuren (verschillende classes) en tegelijkertijd dat er een image veranderd, deze image is precies hetzelfde alleen wat aangepast met photoshope, lengte/breedte blijven gelijkquote:
[..]
wat bedoel je met img veranderen?
Bedoel je in die onclick dan een plaatje veranderen?
[..]
sprites ken ik...maar werkt dat ook als ik over iets anders hover/click dan het plaatje?
