Afbeelding croppen met CSS.
blogged door nick in 'tutorials' om 15u06.
Veel bloggers gebruiken een soort van thumbnail bij elke blog. Dat is een kleine afbeelding die iets zegt over de inhoud van de blog. Vroeger had telesmurf.be dat ook, maar omdat ik het soms lastig vond om altijd mooie thumbnails te zoeken en te maken heb ik het idee overboord gezwierd en begon ik te werken met een simpel kalendertje.

Nu ik voor m'n werk een blog aan het maken ben zat ik terug wat te worstelen met het idee om zo'n thumbnail toe te voegen. De voordelen zijn dat het onder andere de tekst wat breekt en minder saai overkomt. Nadeel is dat je voor elke blog zo'n thumbnail moet maken of ineens een hele reeks, maar dat is tijdrovend. Zeker als je elke dag of meermaals per week een blog toevoegd is dat erg vervelend. Net de reden waarom ik het op telesmurf.be liet vallen.

Enfin, ik wil dus van een grote afbeelding maar een deeltje kunnen weergeven, daar komt het op neer. Als je dan op die thumbnail klikt mag de ganse afbeelding te zien zijn. Moet kunnen, niet? Natuurlijk moet dat kunnen!

<style media="screen" type="text/css">
.thumbnail {
display:block;
float:right;
width:90px;
height:90px;
background-image:url(thumbnails/test.gif);
background-repeat:no-repeat;
background-position: -50px -50px;
}
</style>

Voila, tot zover het CSS gedeelte. Nu nog de image zelf laten zien ... makkie!

<div class="thumbnail"></div>

Wat is het nadeel van deze manier? Je moet voor elk zo'n image een style maken. Dat is met ASP geen probleem. Een loop-je doorheen je blogs en je hangt bij voorbeeld je blog-id aan je label.

.thumbnail<%= rs_blog("id") %>
 
donderdag 20 december '07 15u06 | 0 reacties (toevoegen ⁄ bekijken) | 0 bijlages
Cut-out en color-fill met Fireworks.
blogged door nick in 'tutorials' om 12u58.
Hoe oh hoe krijg je zo'n mooie sjieke geile kerstman in je banner ome Nick? Wel, dat is enorm eenvoudig hoor. Laten we deze even tutorial-iseren. Ik gebruik Fireworks voor m'n graphics dus het wordt een Fireworks tutorial. Ik weet het, ik moet dringend wat tijd maken om Photoshop te leren, maar voorlopig doen we het met Fireworks.

Bon, men zoeke een coca cola santa via google images. Ik kreeg met die zoekterm onderstaand resultaat (en dat leek mij wel een gezellige kerstman).


Eerste werk is natuurlijk die kerstman eruit knippen en de rest van de achtergrond laten vallen. Neem in Fireworks de 'Magic Wand tool' en zet je Tolerance op een 15. Klik de grootste vlakken aan en verwijder ze. Voor de details kan je best inzoomen en de 'Eraser tool' gebruiken. Je zal merken dat het resultaat niet optimaal is, maar dat geeft niet in ons geval. We gaan de santa enorm verkleinen dus die probleem-pixels op de rand gaan we gewoon niet meer zien.


Voila, dat is dat. Nu zou het wat beter zijn moest hij iets blauwer zijn (aangezien mijn banner blauw is). Dus: 'add filter', 'color fill'. Daar kiezen we als kleur bij voorbeeld #2F6B8B. We zetten de transparantie op 50% om niet overdreven veel blauw over te houden. Tijd om de santa op onze banner te plakken.


Sjiek hééé. Nog een glow-ke erbij en klaar is ik.


Meer moet dat niet zijn. Zoals ik al zei, eigenlijk te simpel om een tutorial van te maken, maar ik wou het toch eens gedaan hebben :-p
Blog bijlages:
 
donderdag 6 december '07 12u58 | 0 reacties (toevoegen ⁄ bekijken) | 4 bijlages
volgende 1 vorige
Algemeen (271)
Educatief verantwoord bloggen (11)
Het vlaamsche gedicht (4)
Hooghuis (15)
Kleine ukkies (15)
Koken met Nick (2)
Lifelog (1)
Lijstjes (16)
Tutorials (2)
2009-07 ι juli
2009-06 ι juni
2009-05 ι mei
2009-04 ι april
2009-03 ι maart
2009-02 ι februari
2009-01 ι januari
2008-12 ι december
2008-11 ι november
2008-10 ι oktober
2008-09 ι september
2008-08 ι augustus
2008-07 ι juli
2008-06 ι juni
2008-05 ι mei
2008-04 ι april
2008-03 ι maart
2008-02 ι februari
2008-01 ι januari
2007-12 ι december
2007-11 ι november
2007-10 ι oktober
2007-09 ι september
2007-08 ι augustus
2007-07 ι juli
2007-06 ι juni
2007-05 ι mei
2007-04 ι april
2007-03 ι maart
2007-02 ι februari
2007-01 ι januari
2006-12 ι december
2006-11 ι november
2006-10 ι oktober
2006-09 ι september
2006-08 ι augustus
2006-07 ι juli
2006-06 ι juni
2006-05 ι mei
2006-04 ι april
2006-03 ι maart
2006-02 ι februari
last.fm Flickr
StatCounter  
telesmurf.be steunt
Plan België Cliniclowns België
Music For Life  
telesmurf.be adverteert
Mediadis