Archief voor "Webontwikkeling"
Transparante PNG’s in Internet Explorer 6
De beste oplossing om met transparante afbeeldingen te werken in websites is het gebruik van PNG-afbeeldingen in plaats van de vroeger populaire GIF-afbeeldingen. Het nadeel aan GIF’jes is namelijk dat een pixel óf een kleur heeft, óf transparant is. PNG’s hebben daar geen last van, bij een PNG kan een pixels ook deels transparant zijn en daarom zijn de overgangen vloeiender.
De inmiddels verouderde browser Internet Explorer heeft echter problemen met het weergeven van transparante PNG’s. Je zal zien dat Internet Explorer het transparante deel vervangt door een egale kleur.
Drew McLellan heeft hiervoor een oplossing gevonden: SuperSleight.
Deze oplossing:
- werkt zowel voor achtergrondafbeeldingen als ‘gewone’ afbeeldingen
- geeft automatisch ’position: relative’ in voor links en formulieren (kan uitgezet worden)
- kan voor een volledig bestand gebruikt worden, of voor een deel van een bestand
- verandert ’scaleMode’ naar ’crop’ i.p.v. ’scale’ bij achtergrondafbeeldingen met ‘no-repeat’
- is compatibel met AJAX-requests
Ik gebruik SuperSleight al een tijdje en ben er erg te spreken over. Gebruik de volgende link om SuperSleight te downloaden:
Je kunt SuperSleight eenvoudig gebruiken door de volgende code in de <head> van je pagina te plaatsen:
<!--[if lte IE 6]>
<script type="text/javascript" src="supersleight-min.js"></script>
<![endif]-->
Je moet hooguit het pad naar het bestand aanpassen, als je het JavaScript-bestand in een andere map installeert. Als je om performance-redenen ervoor zou willen kiezen om SuperSleight alleen te activeren op bepaalde elementen zou je onderin het script supersleight.init() moeten vervangen door supersleight.limitTo() waarmee je het alleen op bepaalde elementen kunt toepassen.
Inspiratie: Welke kleurencombinatie?
Onlangs was ik voor een klant bezig met een nieuw ontwerp van een website maar het het klopte gewoon niet qua kleuren. De inspiratie was weg, ik wist even niet welke kleuren het best bij elkaar zouden passen. Ik wist dat ik ergens een bookmark had verstopt en na even zoeken had ik ‘m gevonden: COLOURlovers.
Op deze website kan iedereen leuke kleurencombinaties opslaan en delen. Vervolgens kunnen anderen deze kleurencombinaties beoordelen en ontdek je erg leuke dingen. Je kunt ook zoeken op een specifieke kleur en vervolgens zie je waar anderen het mee gecombineerd hebben.
Deze site is een must in je bookmarks als je regelmatig bezig bent met design en kleuren. Hebben jullie ook websites waar jullie inspiratie vandaan halen als je het even niet meer ziet zitten? Reacties zijn welkom!
UPDATE: De hipste kleurencombinaties zie je hier
Je eigen handschrift als lettertype
Gister kwam @tralajanna via Twitter met het bericht dat ze haar eigen handschrift had omgezet in een lettertype dat ze op haar computer kon gebruiken. Om haar handschrift om te zetten naar een lettertype heeft ze gebruik gemaakt van http://www.yourfonts.com. Ik heb het vandaag ook getest en ben zeer te spreken over het resultaat. De volgende tekst heb ik net gewoon op m’n laptop getypt:
Om van je eigen handschrift een lettertype te maken moet je eerst 1 (of 2 als je ook speciale karakters wil kunnen typen) pagina uitprinten via http://www.yourfonts.com. Deze pagina staat vol met hokjes waarin je zelf alle letters van het alfabet moet schrijven. Vervolgens scan je deze pagina in en de website zet het automatisch om in een lettertype. Handig en vooral leuk als je een persoonlijk design wil maken. Handgeschreven teksten in de lay-out van (persoonlijke) websites is helemaal hip en trendy op dit moment.
Let op: Als je je eigen lettertype gebruikt in Word-documenten en dit document naar iemand anders stuurt, ziet deze persoon jouw lettertype alleen als hij/zij jouw lettertype ook geïnstalleerd heeft. In pdf’jes heb je de mogelijkheid om lettertypes ‘in te sluiten’ zodat je geen last hebt van dit probleem.
UPDATE: Als Mac-gebruiker werk ik nooit met Word-documenten maar kennelijk kun je het lettertype ook insluiten bij Word-documenten, lees in de reacties hoe dit moet. Met dank aan Bas Vecht en Sint Smeding.
Lay-out iPhone in Photoshop
Teehan+Lax heeft een kant-en-klare .psd met elementen van de user-interface van de iPhone ontwikkeld. Ideaal als je een idee hebt voor een applicatie voor de iPhone of een applicatie aan het ontwerpen bent.
Je kunt de .psd hier downloaden (6,6MB)
Made by Symmetric Web
Distributed by Smashing Magazine