Day Two Wiki
 

 

 

 

 
 
 

 

 

 

Day Two logo spiegel
wiki-spiegeling.jpg
 

 

 
Home / Wiki / Webdesign tools / Spiffy Corners 
 

 

 

 

 

 

Spiffy Corners

 

Spiffy Corners zorgt ervoor dat webdesigners op een gemakkelijke manier tabellen en boxen met ronde hoeken op hun website kunnen plaatsen. Door middel van de website Spiffy Corners wordt een stuk HTML en CSS gegenereerd die dit mogelijk maakt. Op deze manier hoef je geen opgeknipte plaatjes te gebruiken en ook geen JavaScript.
Spiffy corners

 

Geen JavaScript of opgeknipte afbeeldingen

 

De bedenker van Spiffy Corners is Greg Johnson. Hij zocht naar een manier hoe ronde hoeken konden worden gecreëerd die anti-aliased zijn. Dit zonder het gebruik van JavaScript bestanden of opgeknipte afbeeldingen. Elke webdesigner wil immers dat een website snel laadt, zeker wanneer een website vaak wordt bezocht. Veel afbeeldingen en JavaScript vertragen het laden van pagina’s. Johnson vond uit dat er manieren waren om ronde hoeken te maken met CSS, dat de hoeken anti-aliased gemaakt konden worden met CSS en dat het gebruik van JavaScript niet nodig was. Maar Johnson zocht een oplossing dat alles in één aanbood, waarbij alleen gebruik gemaakt wordt van CSS. Doordat hij dit niet kon vinden, heeft hij zelf een oplossing geprogrammeerd. Deze oplossing maakt gebruik van 3 functies en in totaal 20 regels code. Dit zorgt ervoor dat er geen extra bestanden of vele afbeeldingen geladen hoeven te worden op een website. Op de website van Spiffy Corners kun je in vier stappen gebruik maken van deze oplossing. In de eerste stap kun je de hoogte en breedte aangeven en de radius van de ronding van de box of tabel. Daarbij kun je tevens de kleuren van de voor- en achtergrond meegeven en welke kleur de border dient te hebben. Zodra je alles naar wens hebt ingegeven, kan op ‘Build it’ worden geklikt waardoor bij stap 2 de afbeelding wordt gegenereerd. Deze kun je opslaan op je computer. Bij de derde stap kun je de CSS code kopiëren en plakken naar je eigen document. Tot slot kopieer je nog enkele regeltjes HTML naar je broncode en nu zal je op de website de ronde hoeken kunnen zien. Zo is te zien dat je door middel van CSS gemakkelijk ronde hoeken kunt creëren en dit hoeft helemaal niet lang te duren.
 
 

 

 
We build tomorrow's web