CSS prism kleuren van stylesheet bepalen

Geen idee of we dit ooit nodig gaan hebben maar wel weer een grappige app. In het kort de werking;

  1. Je geeft hem een url naar een stylesheet
  2. Hij geeft je alle kleuren terug die erin gebruikt worden
  3. Je kunt kleuren in één keer in hele stylesheet aanpassen
  4. Je krijgt een aangepaste stylesheet retour die je in je site kunt gebruiken

Eens testen
Hop, Webparking stylesheet erin en ik krijg inderdaad een scherm met kleurtjes:

 

Als je dan op een kleur klikt zie je welke kleur, kun je hem aanpassen en krijg je gelijk te zien waar hij in de CSS te vinden is:

Als je klaar bent met aanpassen kun je rechtsboven de aangepaste CSS downloaden en klaar. Erg simpel, erg handig en vooral iets waarvan je vergeet dat het er is. Weet nu al dat mocht ik ooit op deze manier iets moeten refactoren ik het vermoedelijk gewoon doe middels een search en replace in mijn code.

Spritecow CSS sprite generator

En we zijn weer een fantastische stukje web-app tegengekomen. Spritecow is een online app waarmee je sprites kunt genereren vanuit een afbeelding. Vorige week getest met een project en het werkt verbazingwekkend prettig eigenlijk. In het verleden hadden we wel eens gespeeld met een plugin voor Photoshop die automatisch sprites en CSS maakte maar dit werkte, in mijn visie in iedere geval, niet echt lekker.

Hoe werkt spritecow?

Eigenlijk supereenvoudig. Je upload je sprite-afbeelding, klikt op een icoontje of wat dan ook welke je als sprite wilt gebruiken en automatisch zoekt hij de randen van je afbeelding op en krijg je onderin de benodigde CSS te zien. Indien nodig kun je ook gewoon met de hand een “regio” selecteren in de afbeelding.

Er staat ook een redelijk helder voorbeeldbestand met begeleidende teksten.

Link naar de site: www.spritecow.com

Browser ondersteuning css3 & html4

Als webdeveloper ben je constant bezig met de vraag “zou het werken in IE7 of niet” als het gaat om de leuke nieuwe technieken die CSS3 en HTML5 ons bieden/gaan bieden. Er zijn superveel sites die hierover stukjes informatie bevatten. Kwam pas echter op http://caniuse.com en moet zeggen dat ik hem wel prettig genoeg vindt qua gebruik om hem te delen.

O ja, wel een “let op, lelijke site alert!” maar functioneel zit het aardig in elkaar. Hieronder een screenshot hoe bijv. het zoeken naar border-radius eruit ziet:

DD_roundies ronden hoeken in alle browsers

Nu CSS3 steeds meer als mogelijkheid wordt gezien en de opties voor ronde hoeken door de verschillende browsers ondersteund worden gaat dit interessant worden. Echter niet alle browsers ondersteunen ronde hoeken en de tags om ze toe te passen wijken nog af omdat ze voorafgegaan worden door “browser unieke” tags zoals -moz en -webkit.

Op zich is hier nog omheen te komen maar IE6, IE7 en IE8 doen helemaal nog niet mee. Nu zijn er flinke hoeveelheden oplossingen met o.a. Jquery (altijd een goed verkoopargument) om de ronde hoeken overal werkend te krijgen. Echter heb ik een enorm enthousiast gevoel bij de oplossing van Drew Diller.

Wij waren al bekend met zijn werk rondom één van de leukere PNG fixes voor Internet Explorer, DD belated PNG.

Nu heeft Drew Diller ook een prachtige fix gemaakt voor ronde hoeken welke je, in het kort, op twee manieren kunt toepassen;

Als aanvulling op je CSS3 code voor ronde hoeken in IE



Als enige bron van ronde hoeken in je code

Met de 3e parameter op true geef je opdracht om alle browsers van ronde hoeken te voorzien. DD roundies kijkt zelf welke syntax er nodig is voor je browser.



Download hier DD roundies en lees ook de volledige documentatie over de mogelijkheden (het is namelijk ook mogelijk met DD roundies ook gelijk DD belated te initiëren).

Legaal fontgebruik op websites (deel 2)

Eerder berichtte ik over Typekit wat de nodige bezoekers naar ons weblog trok en dus blijkbaar een onderwerp is wat erg leeft op dit moment. Nu kwam ik een ontzettend uitgebreide posting tegen op Smashingmagazine.com die wel zo’n ontzettend goede aanvulling vormt op mijn eerdere bericht dat ik die toch even onder de aandacht wilde brengen.

Andrew Follett bespreekt daar namelijk nagenoeg alle bekende oplossingen voor web fonts (waaronder Typekit). Van alle oplossingen geeft hij aan hoeveel fonts er beschikbaar zijn, tegen welke kosten, welke voordelen en nadelen ze precies hebben en hoe ingewikkeld/eenvoudig implementatie is.

Mocht je dus met web fonts aan de slag moeten gaan in een project dan is deze posting zeker even het bezoeken waard.

http://www.smashingmagazine.com/2010/10/20/review-of-popular-web-font-embedding-services/

Webydo van PSD naar HTML

Het klinkt erg aantrekkelijk als je het zo hoort. Webydo helpt je om eenvoudig een website te maken door een PSD bestand te importeren. Hierna kun je met een soort “sleep en plaats” systeem de inhoud op zijn plek zetten en koppelen aan elkaar en klaar. Er is een werkende website ontstaan.

Er is een demo video beschikbaar waarop te zien is hoe het zou moeten werken. Allereerst probeer ik me gelijk een beeld te vormen van de beoogde doelgroep. Klanten van webdevelopment bureaus zullen hier niet terecht komen maar hobbyisten beschikken volgens mij niet altijd over PSD bestanden van het gewenste ontwerp. Het zou dus ergens op een gat ertussen terecht moeten komen. Mensen met voldoende kennis om zelf PSD bestanden te verkrijgen / maken maar met een budget wat niet toereikend is om een webdeveloper erbij te halen. Hoe dan ook is het concept wel erg grappig.

Daarnaast vraag ik me gelijk af;

  • Hoe solide is de code (volgens de vertellingen valid HTML/CSS)
  • Hoe goed kan het omgaan met rommelige PSD bestanden
  • Hoe onderhoudt je de site na de 1e keer in elkaar zetten*
  • Wat gaat het kosten (een deel van de pagina’s is nog leeg)

* Detail hierbij is dat er in de navigatie al ruime is voor de producten Design Management Systeeem (DMS) en Content Management Systeem (CMS) dus wie weet wat er nog komt.

Voor nu wel een leuke om te volgen denk ik. Kijken hoe het eindresultaat wordt en natuurlijk wat het gaat kosten.