Het is alweer enige tijd geleden dat ik een artikel hier op cssblog heb geplaatst. Mijn excuses hiervoor. Ik heb het met mijn bedrijf “Webbureau Quite Easy” erg druk en daarom is het er een beetje bij ingeschoten. Wel heb ik al wat artikelen in gedachten waar ik binnenkort over wil schrijven, daarover binnenkort meer.

Nu heeft Kevin Vanhove mij bericht gestuurd met een link naar een artikel van hem over Cover Tags. Dit artikel spreekt mij erg aan het vind het erg interessant. Dat is ook de reden dat ik dit artikel graag met jullie wilt delen. Ik heb gevraagd aan Kevin om een introducerend stukje te schrijven voor cssblog met een link naar zijn artikel. Dit heeft hij gedaan en is hieronder te vinden. Ik zal naar aanleiding van zijn artikel een tutorial gaan schrijven waarbij het artikel in de praktijk gebracht zal worden. Kevin bedankt voor het stukje en dat je mij op het artikel hebt gewezen.

Hierbij het artikel van Kevin Vanhove

Cover Tags: dynamische buttons maken

Cover Tags is een nieuwe techniek om dynamische buttons te maken. De methode is ontwikkeld door basing.nl en het voordeel van Cover Tags is dat er slechts 1 achtergrond image gebruikt wordt. Je hoeft een button dus niet langer in 2 te kappen (zoals bij de sliding doors techniek). Het principe is eenvoudig en wordt hier duidelijk uitgelegd: http://www.basing.nl/blog/?p=87

Cover tags: Dynamische buttons maken is een artikel van: CSSblog.nl

Achtergrond en voorgrond en alle opvullingen op je webpagina hebben invloed op elkaar. Het is niet moeilijk om precies de verkeerde kleurcombinaties bij elkaar te gebruiken, waardoor een pagina niet meer rustig leest of zelfs heel moeilijk leest. Het duidelijkst (en meest professioneel) is een lichte achtergrond met donkere tekst, maar laat dat je niet weerhouden te experimenteren!

Met CSS heb je de mogelijkheid om de achtergrond in te stellen van elk CSS element op je pagina. Je kunt zowel kleuren als afbeeldingen gebruiken. Je kunt de afbeeldingen zich laten herhalen in horizontale en/of in verticale richting of in geen van beide richtingen. Je kunt je achtergrond vastzetten, of mee laten scrollen zoals het normaal doet. Ook is het mogelijk om een afbeelding ergens op je pagina te positioneren.

Bij elke achtergrond heb je te maken met de volgende eigenschappen die je in html moet definiëren: color, image, repeat, attachment, position.

Kleuren kan je in CSS definiëren als naam, RGB of Hexadecimal. Op de volgende link kan je een lijst van kleurnamen zien die ondersteund worden door Netscape Navigator 3: http://www.utoronto.ca/webdocs/HTMLdocs/Book/Book-3ed/appf/color2.html

Het is ook mogelijk om de kleuren op je achtergrond te laten verlopen. Hiervoor moet je een smalle afbeelding maken met behulp van een tekenprogramma. Deze afbeelding integreer je vervolgens als achtergrond door het in één richting (bijvoorbeeld over de x-as) te laten herhalen (zie bijvoorbeeld www.tizag.com).

Bekijk de volgende links voor meer informatie en voorbeelden:

• http://www.w3schools.com/css/css_background.asp
• http://www.tizag.com/cssT/background.php
• http://www.handleidinghtml.nl/css/eigenschappen/background-attachment/voorbeelden.html

CSS Backgrounds is een artikel van: CSSblog.nl

op 25 juni 2010 heb ik het blog van Marc Kuiper overgenomen. Mijn naam is Martijn van Oosten en heb al vele jaren ervaring met het bouwen van websites en webapplicaties. Ik heb dus dan ook vele jaren ervaring met het gebruik van CSS. Deze ervaringen breng ik al een aantal jaar in de praktijk met mijn eigen bedrijf Webbureau Quite Easy.

Hoe ben ik gekomen om deze blog over te nemen. Ik vind het erg leuk om me bezig te houden met verschillende projecten. Ook ik zelf lees vaak blogs van mensen die artikelen schrijven die betrekking hebben op mijn vakgebied. Deze mensen delen hun kennis met andere mensen, zodat deze mensen problemen kunnen oplossen waar zei tegen aanlopen of juist ideeën krijgen van het geschreven artikel.

Ik kwam op een website de aanbieding van Marc tegen en ik dacht: dit is mijn kans om andere mensen te helpen en te inspireren. En dat is wat ik wil gaan doen de komende tijd met dit blog. Mensen helpen en inspireren.

Ik heb alle vele ideeën om over te schrijven. Ook zou ik graag van jullie willen weten wat jullie graag zouden willen lezen of willen leren aan de hand van een tutorial. Ik probeer minstens één keer in de twee weken een artikel te schrijven. Ook zal in de loop van de tijd dit blog structureel iets veranderen. Het ontwerp zal voorlopig blijven zoals deze is.

Ik hoop dan ook dat iedereen die dit blog leest met veel plezier de komende artikelen zullen lezen.

Met vriendelijke groet,

Martijn van Oosten

CSSBlog overgenomen is een artikel van: CSSblog.nl

Stap 1 – Ontwerp
Ontwerp de twee afbeeldingen (standaard en rollover) die je wilt gaan gebruiken voor het menu. In het voorbeeld is er gebruik gemaakt van afbeeldingen met het formaat 176 pixels bij 41 pixels met een radius van 3 pixels.

Stap 2 – HTML
Maak een html-pagina aan en kopieer de volgende code tussen de body tags:

Nu hebben we een standaard menu, zonder enige opmaak.

Stap 3 – CSS
Open een nieuw document en sla deze op als “opmaak.css”. Kopieer vervolgens de volgende code in het CSS document:

Dit was het, je kunt nog spelen met verschillende kleuren, margins en paddings.

Maak een modern menu voor je website is een artikel van: CSSblog.nl

Een Framework is een (meestal abstract) concept van een structuur die je als basis kan gebruiken voor je webprojecten. Je bereidt één maal een default-style voor en dat hergebruik je voor al je toekomstige projecten. Dit wordt CSS Frameworks genoemd.

Frameworks hoeven niet groot en complex te zijn. Ze kunnen simpele CSS stijlen bevatten, zoals typography.css voor basis typografische regels, grid.css als je gebruik wil maken van een grid layout of layout.css voor een algemene layout, form.css voor een basis stijlvorm, general.css voor algemene regels enzovoorts. Je zou zelfs nog verder kunnen gaan met de segmentatie van je code, maar je moet oppassen dat de pagina’s op deze manier niet te zwaar worden voor een server..

Een Framework is eigenlijk een set tools, libraries en conventies die de routine taken bij het maken van websites abstract maakt in de vorm van algemene modules die telkens opnieuw gebruikt kunnen worden.

De voordelen van Frameworks zijn legio: Je verhoogt je productiviteit en je voorkomt veel voorkomende fouten. Je normaliseert je eigen codering. Dit heeft als voordeel bij het onderhouden van websites dat je niet telkens in de broncode van elke site waar je ooit aan hebt gewerkt, hoeft te gaan zoeken. Binnen een team ontstaat er overzicht, omdat iedereen vanuit dezelfde basis werkt. Dit voorkomt misverstanden en de samenwerking zal versoepelen. Omdat je Framework browser compatible is, hoef je je geen zorgen te maken bij je volgende projecten en kan je meteen aan de slag. Je hebt een duidelijke en complete code bedacht die je altijd kan gebruiken. Je hoeft dus niet bang te zijn dat je een keer kwijt bent hoe bepaalde codering ook al weer moest.

Maar een waarschuwing is ook op zijn plaats. Er zijn ook nadelen te noemen: Je hebt tijd nodig om het Framework goed te begrijpen voordat je er echt mee aan de slag kan. Voor de gemiddelde gebruiker is het misschien niet interessant om deze tijd erin te steken. Je moet de structuur van je code goed begrijpen. Je moet goed weten hoe de Framework is opgebouwd. Als je externe CSS Frameworks gebruikt loop je het risico dat je zijn bugs kado krijgt, en het kost meer tijd om de mankementen van iemand anders weg te werken dan die van jezelf. Het is zeer belangrijk dat je goed begrijpt hoe CSS werkt voordat je met CSS Frameworks aan de slag gaat, omdat je mogelijkheden met ontwerpen anders sterk beperkt kunnen worden. De uniciteit en eigenzinnigheid van (X)HTML taal gaat verloren in een Framework. Je loopt het gevaar dat je elk project op een standaard template, namelijk je Framework, gaat baseren.

Weeg de voor- en nadelen goed tegen elkaar af. Hieronder volgen een aantal links naar sites met uitgebreide uitleg en voorbeelden:

http://www.yaml.de/en/home.html
http://code.google.com/p/blueprintcss/
http://developer.yahoo.com/yui/grids/
http://960.gs/
http://docs.jquery.com/UI/Theming/API#The_jQuery_UI_CSS_Framework
http://csswizardry.com/typogridphy/
http://sencss.kilianvalkhof.com/
http://devkick.com/lab/tripoli/
http://www.noupe.com/css/5-popular-css-frameworks-tutorials-tools-for-getting-started.html
http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/
http://www.webdesignbooth.com/10-promising-css-framework-that-worth-a-look/

CSS Frameworks, de voor- en nadelen is een artikel van: CSSblog.nl

CSS Reset zorg ervoor dat veelvoorkomende verschillende weergaves in de diverse browsers verholpen wordt. Denk hierbij aan margins, lettergrootte of de randen rond gelinkte afbeeldingen in Firefox. De paddings en margins moeten gereset worden, omdat de verschillende browsers allemaal hun eigen paddings en margins al aan de diverse elementen toevoegen. Dit is was CSS Reset doet, zodat je site er hetzelfde uitziet in de verschillende browsers. Voorbeelden van een site met en zonder CSS reset kun je hier zien: http://www.computerfaq.be/css/css-reset-bestand/

De CSS Reset van meyerweb.com moet aangepast worden aan je eigen voorkeuren wat betreft kleur, links en zo verder. Na de code aangepast te hebben sla je het bestand op als een CSS bestand met de naam reset.css. De CSS voor je website zelf sla je op in een ander bestand en verwerk je na reset.css. Je HTML-head gaat er dan zo uitzien:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ComputerFAQ Reset CSS</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

De CSS reset code is vrij te gebruiken en kan hier (http://meyerweb.com/eric/tools/css/reset/reset.css) gedownload worden. Het ziet er als volgt uit:

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
}
body {
        line-height: 1;
}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: '';
        content: none;
}

/* remember to define focus styles! */
:focus {
        outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
        text-decoration: none;
}
del {
        text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: collapse;
        border-spacing: 0;
}

CSS Reset: Voorkom nare verrassingen. is een artikel van: CSSblog.nl

Wat is Zen Coding nu precies en wat kun je ermee? Zen Coding is een plugin die voor verschillende editors, waaronder Coda en Textmate, verkrijbaar is. Zen Coding maakt het schrijven van structuren, menu’s en CSS properties een stuk gemakkelijker. Je schrijft CCS selectors in een HTML document met behulp van een keyboard shortcut en speciale syntax. De CSS selectors worden door Zen Coding direct omgezet in de beoogde HTML structuur.

Om Zen Coding te kunnen gebruiken moet je wel wat shortcodes leren, maar mogelijk ken je deze al van CSS. Wanneer je eenmaal bekend bent met de css selectors is Zen Coding zeker een tijdbesparende tool. Het mooie aan deze plugin is dat het compatible is met veel editors, waaronder Text Mate Aptana, Coda, NetBeans en Espresso.

Hoe ziet dit er in de praktijk uit? Dit is een voorbeeld voor een menu. Het menu ziet er als volgt uit:

Home
Our products
About us
Contact

De Zen Coding plugin verandert dit dan in:

<div id="header">
   <ul id="navigation">
      <li class="item1"><a href=""><span>Home</span></a></li>
      <li class="item2"><a href=""><span>Our products</span></a></li>
      <li class="item3"><a href=""><span>About us</span></a></li>
      <li class="item4"><a href=""><span>Contact</span></a></li>
   </ul>
</div>

Een ander voorbeeld:

ul#name>li.item

Dit wordt door Zen Coding omgezet in:

<ul id="name">
    <li class="item"></li>
</ul>

Dit is een handig filmpje wanneer je wil weten hoe het precies werkt:

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

Zen Coding: high speed HTML en CSS is een artikel van: CSSblog.nl

Twitter is tegenwoordig erg populair. In 2009 is het woord “Twitteren” zelfs tot het woord van 2009 benoemd. Ook ik ben zo nu en dan te vinden op de website van Twitter. Zelf vind ik het buitengewoon handig. Dagelijks komen er namelijk tientallen interessante artikelen voorbij waar ik anders nooit op geattendeerd zou worden. Hier een lijst met 40 interessante twitteraars die stuk voor stuk iets met CSS te maken hebben.

• http://twitter.com/cssanswers
• http://twitter.com/CSS3
• http://twitter.com/csshouston
• http://twitter.com/cssvideos
• http://twitter.com/csshead
• http://twitter.com/joomblocks
• http://twitter.com/webmaakster
• http://twitter.com/piksels
• http://twitter.com/DigiGirl
• http://twitter.com/nathair
• http://twitter.com/Timvansas
• http://twitter.com/sanderpotjer
• http://twitter.com/Ome_Jelle
• http://twitter.com/accessko
• http://twitter.com/Mirjam
• http://twitter.com/zoz
• http://twitter.com/paulvanbuuren
• http://twitter.com/sebvandijk
• http://twitter.com/BarisW
• http://twitter.com/JaapRood
• http://twitter.com/dryxe
• http://twitter.com/michelkuik
• http://twitter.com/basst85
• http://twitter.com/pixandpages
• http://twitter.com/ekris
• http://twitter.com/wwarobert
• http://twitter.com/franksnijders
• http://twitter.com/DouweM
• http://twitter.com/hubertusanton
• http://twitter.com/Conk_nl
• http://twitter.com/meyerweb
• http://twitter.com/cssglobe
• http://twitter.com/designshard
• http://twitter.com/CodeGreene
• http://twitter.com/TheLifeDesign
• http://twitter.com/cristianvasile
• http://twitter.com/css3gallery
• http://twitter.com/Listelog
• http://twitter.com/absolutebica
• http://twitter.com/cssah

Mocht je nog meer interessante twitteraars weten, laat het me dan weten. Wellicht komt er nog een volgende twitter-lijst.

CSS en Twitter is een artikel van: CSSblog.nl

• Border-color: maakt het mogelijk om aan elke afzonderlijke border een eigen kleur mee te geven en het is zelfs mogelijk om een gradient aan de border mee te geven.
• Border-image: hiermee kun je voor elke border een aparte afbeelding meegeven.
• Border-radius: dit vind ik persoonlijk een van de leukste nieuwe functies. Hiermee wordt het mogelijk om ronde hoeken te maken, zonder dat je gebruik hoeft te maken van afbeeldingen.
• Text-shadow: de woorden zeggen het al, geef schaduw mee aan je tekst.
• Opacity: hiermee kun je kleuren doorzichtig maken. Een functie die het web een totaal ander beeld zal gaan geven.
• Multiple backgrounds: maakt het mogelijk om aan een element meerdere achtergronden toe te voegen.
• @font-face: met deze nieuwe functie zal je fonts kunnen gebruiken op je website die niet op andermans computer geïnstalleerd hoeven te zijn.

Dit zijn slechts een paar nieuwe functies die CSS3 in petto heeft. Voor een volledige lijst verwijs ik je door naar: http://www.css3.info/preview/. Op deze website staan trouwens ook andere interessante artikelen die gericht zijn op de nieuwe CSS variant.

Heb jij toevallig al iets ontworpen met CSS3? Twijfel dan niet om het ons te laten zien!

CSS3, de nieuwe mogelijkheden is een artikel van: CSSblog.nl

Je kunt een hoop tijd besparen omdat de wijzigingen die je invoert in Firebug direct worden aangepast op je beeldscherm. Je hoeft dus niet meer je stylesheet aan te passen, op te slaan en vervolgens de browser te openen om je verandering te bekijken.

Naast het inspecteren van de code is het ook mogelijk om fouten op te sporen en de snelheid van de pagina’s te testen.

Je kunt Firebug gratis downloaden op http://getfirebug.com/.
Nadat je de Add-on geïnstalleerd hebt, verschijnt er een kleine mug rechtsonder in je browser.

Hier een korte video over hoe je Firebug kunt gebruiken:

Firebug: handig voor elke web designer is een artikel van: CSSblog.nl