Google heeft in al haar wijsheid gisteren Google Fonts versie 2 gelanceerd. Waar de eerste versie op zich al goed werkte is versie 2 een enorme verbetering qua usability. Je kunt de fonts selecteren op basis van een woord, zin of paragraaf voorbeeld. Alles bij elkaar veel overzichtelijker en beter uitgerust om het juiste font te vinden voor jouw project.

Heb jij gebruikt gemaakt van Google Fonts?

No related posts.

Een goed gevulde lijst van 20 uitermate handige tools voor iedereen die veel met CSS werkt bij DenBagus.

Gerelateerde berichten:

1. CSS snippets en CSS Editors

De look and feel van een website wordt in hoge mate bepaald door de soort achtergrond waar je de site tegen afzet. Eén van de manieren om dat op een mooie manier te doen is gebruik te maken van een afbeelding die je in de hoogte en breedte kunt herhalen zodat je een naadloze achtergrond krijgt met slecht één kleine afbeelding. Een pattern dus.

Subtle Patterns is een site die dergelijke seamless achtergrond afbeelding beschikbaar stelt die ik graag met jullie deel. Mocht je gebruik maken van Photoshop kun je zelfs het .pat bestand direct downloaden en importeren in Photoshop.

Have fun!

Gerelateerde berichten:

1. Tools om je WordPress theme mee op te leuken

Line25 heeft een mooi overzicht gepubliceerd hoe je het CSS3 attribuut text-shadow creatief kunt gebruiken om totaal verschillende effecten te bereiken.

The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop's Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. This isn't all the text-shadow property is capable of though, by getting creative and playing around with the colours, offset and blurring we can create some clever and pretty cool text effects!

via Using CSS Text-Shadow to Create Cool Text Effects.

Gerelateerde berichten:

1. De diepte in met CSS3
2. CSS3 Generator

Een hele bruikbare verzameling van oline generators die de webdesigners onder ons wel kunnen waarderen verscheen op Noupe.com.

Generators can be a great way to save time in your web design projects. High-quality generators can create graphics or code or even layouts in a matter of seconds or minutes, things that might take an hour or more if done by hand.  Here are some useful generators to help you speed up your web design process. There's everything from color scheme tools to complete layout generators included.

via 40 Useful Online Generators For Web Designers – Noupe Design Blog.

No related posts.

Iets waar ik persoonlijk nooit genoeg van kan krijgen zijn Fonts. Hoe meer ik er geïnstalleerd heb hoe beter. Gelukkig komen er regelmatig posts voorbij met een mooie opsomming van de nieuwste fonts. Vandaag is weer zo’n dag op Speckyboy:

So, whether you design web pages, t-shirts, posters or just seeking some typographical inspiration, we have no doubt that you will the perfect font for your perfect project in this round-up.

Bekijk ze allemaal op  50 Beautiful and Fresh Free Fonts.

Gerelateerde berichten:

1. 50 Gratis Fonts uit 2009 + Beheer tools voor je fonts
2. 30 Gratis fonts voor je logo/design
3. Windows lettertypes zo smooth maken als Mac OS X dat doet
4. 4 Resources om je typografie te verbeteren

Regelmatig zoek ik naar de juiste icon’s voor het project waar ik mee bezig ben. Uiteraard heb ik een behoorlijke verzameling op m’n harde schijf staan, maar toch bekruipt me steeds vaker het gevoel dat ik net niet kan vinden wat ik eigenlijk nodig heb.

Aangenaam verrast kwam ik de site Iconfinder.com tegen. Deze site doet precies wat je zou verwachten; gebaseerd op je zoekopdracht vind ie gewoon waar je naar zoekt. Je kunt door hun hele database browsen maar ook gewoon op jouw gewenste woord zoeken. Er is zelfs een Tag cloud voorzien.

Geen grasduinsessies in je harde schijf meer, maar gewoon vinden wat je zoekt met Iconfinder. Perfect!

No related posts.

Zoals je hebt kunnen zien hier zijn er weer een aantal wijzigingen doorgevoerd in het design hier en één daarvan is het gebruik van een specifiek font. De methode die ik hiervoor heb gebruikt is Cúfon en ik heb van een paar van jullie al de vraag gekregen of ik wil delen hoe dat het beste te implementeren is.

Het eerste wat je moet doen, uiteraard, is bepalen welk lettertype/font te wilt gebruiken. Gebruik bijvoor

beeld het fonts archief hier of op Delicious mocht je op zoek zijn naar inspiratie, maar wat bovenal belangrijk is dat je het font mag

gebruiken zoals je dat zou willen; kijk dus goed naar de licentie die er bij hoort.

Stappenplan Cúfon Installatie Stappenplan

1. Font Generen Nadat je een font hebt gedownload ga je naar de Cúfon site en selecteer je de betreffende opties en upload je het font wat je eerder gedownload hebt. Nadat alle juiste opties hebt aangevinkt genereert de site een versie van je font in javascript welke je direct kunt downloaden.
2. Javascript uploaden Het font javascript moet vervolgens een plekje vinden in je theme folder. Mijn voorkeur is om daar een map fonts voor aan te maken in /wp-content/themes/jouwtheme/fonts of /wp-content/themes/jouwtheme/includes/. In deze map hoort het gegenereerde .font geüpload te worden samen met cufon-yui.js welke je hier kunt downloaden.
3. De scripts activeren Deze beide scripts zul je vervolgens moeten activeren in je theme via functions.php. [php]function add_cufon(){
   ?>
   <script src="<?php bloginfo(‘stylesheet_directory’) ?>/includes/cufon-yui.js" type="text/javascript"></script>
   <script src="<?php bloginfo(‘stylesheet_directory’) ?>/includes/Jouw-lettertype.font.js" type="text/javascript"></script>
   <script type="text/javascript">
   Cufon.replace(‘h1′,{ hover: true })(‘h2′, {hover:true})(‘#blog-title’, {hover:true})(‘#blog-description’, {hover:true})(‘h3′, {hover: true})(‘h4′, {hover: true})(‘h5′, {hover: true})(‘h6′, { hover: true })(‘.aside h3′, { hover: true});
   </script>
   <?php
   }
   add_action(‘wp_head’, ‘add_cufon’);[/php]

   De voorbeelden die je hier ziet staan in regel 6 zijn voorbeelden van classes en id’s die met je nieuwe fonts moeten werken.

4. En IE dan? Inderdaad.. ook hier moeten we IE een beetje helpen met een klein stukje jQuery: [php]//Cufon MS_IE fix
   function add_cufon_iefix(){
   ?>
   <script type="text/javascript"> Cufon.now(); </script>
   <?php
   }
   add_action(‘wp_footer’, ‘add_cufon_iefix’);[/php]

That’s it. Nadat je je functions.php hebt bijgewerkt zul je zien dat je site nu de betreffende classes en ID’s keurig toont met het nieuwe font. Easy peasy.

No related posts.

In mijn bericht over “Events in WordPress” sprak ik over het handmatig toevoegen van events aan/met WordPress. Er zijn verschillende plugins, zoals ik dus beschreef, waarmee je events aan je WordPress blog kan toevoegen. Voor mij was het zaak om juist een website die alleen maar bestaat uit events vorm te geven. Een belangrijk argument voor het gebruik van WordPress hierbij is dat de klant gebruik wil maken van de RSS-feeds. Zo kan de klant maar natuurlijk ook anderen gebruik maken van de feeds die er zijn per categorie. Nu is het voor de gebruiker mogelijk om op een andere site de events weer te geven.

Remkus schreef in “Events in de toekomst toch normaal in de loop” over een plugin die er voor zorgt dat berichten die je een datum in de toekomst geeft via je publicatiesysteem, toch direct geplaatst zal worden. Nadeel hiervan is dat als je een bericht hebt die je echt in de toekomst pas wil laten verschijnen de plugin eerst uitgezet moet worden. Voor mij een reden om juist handmatig en in de template code te plaatsen.
Ik zal hier weer geven wat ik nu precies heb gedaan.In “Events in WordPress” gaf ik aan dat ik gebruik ging maken van “How to make a WordPress Events List” dat gepubliceerd is bij Pro Blog Design.
Eerst heb ik een opzet gemaakt van het design. Dit doe ik altijd in een index.php en een style.css bestand. Als deze klopt knip ik het geheel over in een WordPress thema. Dan maak ik gebruik van de pagina’s die ik nodig denk te hebben. Deze keer gebruik ik een header, footer, index en style bestand. Meer heb ik niet nodig. Na het ontwerp proces en het knip en plak werk blijkt dat het thema werkt. Dan komt de volgende stap.

Ik wil graag dat de events op datum verschijnen dat ze gaan gebeuren. Het gevaar van het gebruik van de berichten in WordPress is dat  de events op datum van publiceren komen. Daarom kwam “How to make a WordPress Events List” goed van pas.

In je Extra Velden (=Custom Field) veld onder een nieuw bericht klik je op  Nieuwe Toevoegen. Nu type je onder naam de naam van je Extra Veld. In de post die ik gebruik hebben ze gekozen voor date, ik heb er datum van gemaakt. Daarnaast heb ik de datum geschreven zoals zij het ook beschrijven. Dus met de maand eerst, daarna dag en jaar. Ik heb geprobeerd het met de dag eerst en daarna maand, maar dat lukte niet. Ondanks dat ik bij de instellingen als datum formaat dd/mm/jjjj heb ingesteld. Nadat je dit heb ingevuld en ook de tekst van je post hebt aangemaakt kan je het bericht publiceren.

Je hebt nu nog weinig anders gedaan dan anders. Maar doordat je een datum hebt ingegeven in het Extra Veld “datum” kan je daarmee spelen zodat je de berichten goed op volgorde krijgt. Hiervoor heb ik de volgende code gedeeltelijk gekopieerd vanaf “How to make a WordPress Events List” en boven de WordPress Loop in index.php gezet:

[php]div id="content">

<?php // Get today’s date in the right format

<code>$todaysDate = date(‘m/d/Y H:i:s’); ?>

<?php query_posts(‘meta_key=datum&amp;meta_compare=&gt;=&amp;meta_value=’ . $todaysDate . ‘&amp;orderby=meta_value&amp;order=ASC’); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>[/php]

In het eerste stukje php code word een waarde gegeven aan todaysDate. Deze gebruik je in het 2de php gedeelte om er voor te zorgen dat de datum van vandaag vergeleken wordt met de datum die je in je Extra Veld hebt gezet. Is de datum in je extra veld geweest dan laat WordPress het bericht niet meer zien.
Een uitleg van het 2de php gedeelte:

• query_post: hiermee kan je zeggen waaraan berichten die je wilt plaatsen moeten voldoen. Je kan er ook berichten mee uitsluiten.
• meta_key: hier komt de naam die je hebt je gegeven aan je extra veld.
• meta_compare: dit zorgt voor het vergelijken van de gegevens.
• orderby=meta_value:  Hiermee wordt gekeken welke dag het vandaag is, deze is in het gedeelte er boven benoemd.
• order=ASC: ASC staat voor ascending, wat betekent dat de berichten op de normale volgorde worden gezet. Deze volgorde is die van de datum waarop het event plaats vindt. Het event dat het eerste is staat boven aan. De laatste dus altijd onderaan.

Hebben jullie al eens gewerkt met events of evenementen of een kalender in WordPress? En hoe pakte je dat aan?

No related posts.

Persoonlijk zie ik CSS3 als een enorme verrijking en aanvulling op het bestaande  CSS2.1 palet. Ik vind het dan ook erg jammer dat het zo lang moet duren voordat CSS3 als de nieuwe standaard goedgekeurd wordt. Gelukkig zijn er voldoende browser-boeren die de nieuwe mogelijkheden van CSS3 al beschikbaar stellen in hun laatste browserversie. Feitelijk is enkel IE8 de enige browser die er nog niets mee kan… wat op zich ook niet zo verbazingwekkend is, toch?

Tot nu toe maakte ik veel gebruik van de CSS snippets van CSS Tricks om de verschillende eigenschappen plus voorbeelden er bij te zoeken, maar daar kan vanaf vandaag wel eens verandering in gekomen zijn met het vinden van CSS3 Generator. Via deze site kun je verschillende CSS snippets genereren en gelijk ook zien hoe het er uit ziet. Daarnaast toont de site boven de code snippet ook nog eens keurig vanaf welke versie de verschillende browsers de betreffende CSS3 eigenschap ondersteunen.

Overigens.. Jean-Baptiste Jung heeft een tijdje terug een mooi overzicht gemaakt hoe je met verschillende filters in Internet Explorer verschillende CSS3 eigenschappen kunt nabootsen.

Gerelateerde berichten:

1. De diepte in met CSS3
2. Geavanceerd Gebruik van CSS Text-Shadow voor Coole Effecten