Archive for category Tutorials
Image hover effect met css
Soms bestaat de noodzaak voor een link hover effect met afbeeldingen in een website. Normaliter zou je daar Javascript op loslaten, maar dat betekent gelijk dat de 5% procent van de wereld die Javascript in hun browser heeft uitgeschakeld jouw site heel anders ziet dan de bedoeling is.
Er is een lichtgewicht en redelijk kogelvrije oplossing om dit met uitsluitend CSS te realiseren.
Voor alle duidelijkheid, dit is een oplossing die bedoeld is voor hyperlinks.
Dit is de css:
a.hover{
display: block;
width: 100px;
height: 20px;
background: transparent url(jouwafbeelding.jpg) 0 0 no-repeat;
}
a.hover:hover{
background-position: -100px 0;
}
Voor het hover effect heb je twee afbeeldingen nodig, de default state en de hover state. De truc is om deze twee te combineren tot één afbeelding, waarbij de hover afbeelding rechts van de default afbeelding staat. Op die manier wordt de afbeelding direct geladen en heb je geen haperingen bij de overgang van de ene naar de andere state. In bovenstaand voorbeeld ga ik uit van een weergave van 100px breed met een image van 200px breed.
Je ziet in bovenstaande css dat de hover state background position -100 is, dit zorgt er voor dat in het block van 100px pas bij hover de rechter afbeelding wordt weergegeven.
Mijn afbeelding:
Het geheel in actie:
Je kunt naast tekst ook uiteraard een afbeelding als link gebruiken, als je bijvoorbeeld een bijzonder font wil gebruiken. Zorg er dan wel voor dat die afbeelding hetzelfde formaat heeft als de waardes van het block.
Leestekens op Mac OS X – Geavanceerd
Posted by Erwin in Tips & Tricks, Tutorials on 16/03/2010
In een eerdere post schreef ik over hoe je bepaalde leestekens kunt maken met Mac OS X.
Het ging in deze post met name over de ¨ om een umlaut mee te maken, en om accenten. Deze karakters zijn allemaal te typen door middel van een toetscombinatie.
Er blijven alleen dan nog talloze karakters over die je wel wilt gebruiken, maar die niet met een eenvoudige toetscombinatie te maken zijn. Hiervoor heeft Apple het ‘lettertypen’ palet uitgevonden.
Eenvoudig op te roepen door te klikken op de ‘A’ in Mail, Pages, Numbers of Keynote.
Er opent zich dit scherm:
Door te klikken op het tandwiel open je de extra opties:
Om de speciale karakters te openen selecteer je ‘Tekens”:
Ik vond het palet in eerste instantie een beetje contra-intuïtief en omslachtig, maar het went gelukkig snel!
Zoek in Evernote met Google Chrome
Posted by Erwin in Lifehacking, Tips & Tricks, Tools, Tutorials on 18/02/2010
Vers van het blog van Evernote, de mogelijkheid om Google Chrome te gebruiken als tool om door Evernote te zoeken.
Handig, omdat de adresbalk van Chrome gelijk ook het zoekveld is. Je kunt daardoor in sites zoeken zonder er daadwerkelijk naartoe te navigeren. Je kunt Evernote als zoekmachine toevoegen aan Chrome, en daarmee net zo snel en efficiënt zoeken in Evernote als op het web.
Om dit in te stellen ga je naar het ‘voorkeuren’ menu, ‘basisinstellingen’. Klik op ‘beheren’.
Vul de volgende gegevens in onderstaand veld in:
Naam: Evernote
Zoekwoord: Evernote.com
Url: http://www.evernote.com/search?q=%s
Om te gebruiken: typ evernote.com in het zoekveld en hit ‘tab’. Chrome opent de volgende query:
Geef je zoekopdracht in achter de dubbele punt en hit ‘enter’. Je wordt nu gelijk naar je Evernote web app geleid. Uiteraard werkt dit alleen als je bent aangemeld..
Uiteraard kan dit met Firefox ook:
Ga naar Bladwijzers, Bladwijzers ordenen (of gebruik shift + cmd + B). Zorg dat je bladwijzermenu of bladwijzerwerkbalk hebt aangeklikt en klik op nieuwe bladwijzer.
Vul de volgende gegevens in onderstaand veld in:
Naam: Evernote
Location: http://www.evernote.com/search?q=%s
Keyword: Evernote (of iets dat je handiger vindt).
Om te gebruiken: Typ je keyword in de addressbar, gevolgd door een spatie en je zoekterm. Firefox gaat nu direct naar de Evernote web app. Wederom, dit werkt alleen als je bent aangemeld.
De makkelijkste manier om een animated GIF te maken
Er van uitgaande dat je de beschikking hebt over Photoshop. Heb je geen Photoshop, dan kun je online tools als Picasion (speciaal om animated GIF’s te maken van afbeeldingen op Picasa), Gifninja, Gickr of Flitpics gebruiken.
Dit is waar we naartoe gaan werken:
Iets eenvoudigs, om op te warmen. Alles bij elkaar kost dit je nog geen tien minuten!
Allereerst, een animated GIF bestaat uit meerdere afbeeldingen, in bovenstaand geval drie.
Zorg ervoor dat die afbeeldingen allemaal hetzelfde formaat hebben. Als je teksten of plaatjes wil invoegen, zorg er dan voor dat je binnen een maximum hoogte en breedte blijft.
Als je tevreden bent met je afbeeldingen, kun je gaan animeren. Ga naar: Window → Animation.
Zorg ervoor dat het venster is ingesteld op Animation (Frames). Photoshop heeft ook een Timeline instelling voor GIF animaties, die ga ik hier niet behandelen. Je kunt dit trouwens instellen met het fly-out menu aan de rechterkant van onderstaand venster.
In bovenstaand voorbeeld heb ik alledrie de afbeeldingen al klaargezet, je doet dit door het eerste frame (welke standaard wordt weergegeven) te dupliceren (met de knop naast de trashcan).
Als een frame geselecteerd is (in bovenstaand voorbeeld de laatste), kun je die manipuleren. Op die manier kun je aangeven wat er in elke frame moet komen te staan.
Als je onder de afbeelding klikt, opent zich een dropdownmenu waarmee je kunt aangeven hoelang iedere frame vertoond moet worden.
Nu is je animated GIF zo goed als klaar! Om hem op te slaan ga je naar File → Save for Web and Devices. Uit het dan volgende communicatiescherm kies je uiteraard ‘save as GIF’. Er zijn nog een aantal opties waar je mee kunt spelen, de belangrijkste is de ‘Loop’ instelling. Kies in dit geval voor ‘Forever’ zodat ‘ie niet na één keer stopt met de animatie.
Open met een willekeurige browser, en bewonder je werk! Read the rest of this entry »
Leestekens op Mac OS X
Posted by Erwin in Tips & Tricks, Tutorials on 05/10/2009
Het eerste wat ik me afvroeg toen ik een Mac (Book) kocht was: hoe maak ik leestekens? Want het toetsenbord geeft geen enkele hint over welke toets in potentie wat doet.
Aangezien ik vast niet de enige ben die hiermee zat:
- Accent aigu: (´) = alt + e (toepasbaar op iedere klinker m.u.v. y,Y )
- Accent grave (`) = alt + ` (toepasbaar op iedere klinker m.u.v. y,Y )
- Circumflex (^) = alt + i (toepasbaar op iedere klinker m.u.v. y,Y )
- Trema (¨) = alt + u (toepasbaar op iedere klinker)
- Tilde (~) = alt + n (toepasbaar op n,N, o,O, a,A)
- Cedille (ç) = alt + c (alleen toepasbaar op c)
- € = alt + 2 op MacBook, shift + alt + 2 op los Mac toetsenbord
- £ = alt + 3
- © = alt + g
- ® = alt + r
- • = alt + 8
- † = alt + t
- √ = alt + v
- ÷ = alt + /
- ± = shift + option + =
Natuurlijk zijn er nog veel meer, maar deze gebruikte ik in Windows regelmatig en miste ik echt op de Mac.
Zit het leesteken de je wilt maken hier niet tussen? Op de post: leestekens op Mac – geavanceerd leg ik uit hoe je alle andere karakters kunt maken.
Wingdings en Webdings op Mac OS X
Posted by Erwin in Lifehacking, Tips & Tricks, Tutorials on 31/08/2009
Ik heb me altijd al afgevraagd hoe je op een makkelijke manier kunt zien welke toets welk pictogram creëert.
Ik heb alleen die Web- en Wingdings nog nooit eerder echt nodig gehad tot een paar dagen geleden.
Na enig puzzelwerk (want geen zin hebbend om alle toetsen uit te proberen totdat ik de goede had) ben ik erachter gekomen dat het best eenvoudig is. Je kunt daarvoor ‘toetsenbordweergave’ gebruiken.
Hier is hoe je dat instelt:
- Ga naar: Systeemvoorkeuren (het menu met het appeltje).
- Ga naar Landinstellingen, Invoermenu en vink Toetsenbordweergave aan.
- Toon invoermenu in menubalk wordt automatisch aangevinkt.
- Er wordt nu in je menubalk een vlag getoond die correspondeert met de taalinstelling van je toetsenbord.
- Klik op het vlaggetje en selecteer Toon toetsenbordweergave
- Als het goed is heb je nu dit scherm:
Je kunt hierin precies zien welke toets zorgt voor welk karakter én je kunt selecteren of je Webdings dan wel Wingdings 1, 2, of 3 wilt gebruiken.
Dit scherm blijft bij alle toepassingen op de voorgrond, dus je hoeft niet steeds te switchen met alt + tab tussen toepassingen.
Maak een interactieve vragenlijst met PDF
Als je het belangrijk vind dat je vragenlijsten er goed uitzien én dat iedereen ze kan openen, kun je niet vertrouwen op een eenvoudige tekstverwerker zoals Word of Pages.
Dat is de reden dat ik mijn formulieren met Adobe Acrobat 9 Pro creëer. Je hebt dan alle vrijheid om met ieder denkbaar programma je vragenlijst vorm te geven zoals jij dat wilt.
Een beetje designer kan natuurlijk niet aankomen met een simpel getypt velletje papier..
Hier is hoe:
Nadat je je document hebt gecreëerd (ik gebruik daarvoor Illustrator, Indesign is misschien een betere keus) sla je het op als PDF.
Open je PDF →Kies uit de menubalk bovenin je PDF ‘Forms’.
Kies ‘Add or Edit Fields’ uit het dropdown menu.
Je krijgt nu een pop-up voor automatische form field detectie. Kies ‘No’, tenzij je al velden hebt aangegeven.
Dit opent de taakbalk om invulvelden mee te definiëren.
Selecteer de’ Text Field’ tool.
Klik en sleep met de cursor in je PDF om het invulveld te positioneren. Je kunt het veld groter of kleiner maken en je kunt de eigenschappen aanpassen (met show all properties).
Je kunt voor jezelf de naam van het veld veranderen. (Die naam is niet zichtbaar in het uiteindelijke document).
Je kunt het uiterlijk van de velden zelf ook aanpassen.
Hoeveel letters je in een veld kwijt kunt, bepaal je met ‘opties’.
Uiteindelijk ziet een veld er zo uit.
Nu dat je je tekstvelden hebt gemaakt, is het misschien ook leuk om een knop te maken waarmee dit document nog makkelijker naar jou gemaild kan worden.
Read the rest of this entry »
-
You are currently browsing the archives for the Tutorials category.
- Abonneer je op m'n rss feed
- of plan een afspraak via
.
