Tools | tech | trends: Photoshop

In deze supersnelle workshop leer je hoe je het populaire papiereffect in Photoshop maakt. Na 9 stappen heb je het resultaat zoals je hierboven ziet, gerealiseerd. Waar wacht je nog op? Ga lekker aan de slag!

01 Achtergrond

Gebruik 3D-transformaties om stijlvol te navigeren

CSS3 komt voor velen als geroepen. Voor het eerst in het meer dan twintigjarige bestaan van het web, kunnen we special effects rechtstreeks in de browser renderen, zonder gebruik te hoeven maken van plug-ins of ingewikkeld programmeerwerk. Nu de nieuwe standaard volwassen wordt, kunnen we steeds beter gebruikmaken van het aanbod nieuwe tools dat tot onze beschikking staat. Dit betekent dat we met minder moeite een hoger niveau van interactiviteit kunnen bereiken. Wanneer je wel eens iTunes gebruikt, zul je het Cover Flow-effect vast wel kennen. Dankzij dit effect kun je overzichtelijk door je albums bladeren en er eenvoudig eentje selecteren om af te spelen. Zo wordt de werkelijkheid elegant nagebootst.

Als navigatieconcept is Cover Flow overtuigend. Je ziet een volledige preview van wat je aan het selecteren bent, of je werkt je eenvoudig door een lange lijst van mogelijkheden. Welke aanpak je kiest, hangt natuurlijk af van de gelegenheid. Bovendien wordt dit alles bewerkstelligd in een relatief klein deel van het scherm.
In deze workshop zetten we CSS3 in om een Cover Flow-achtig navigatiemenu te creëren. Met 3D-transformaties die je in staat stellen om door de opties te bladeren zoals je gewend bent van iTunes. Voor een brede toepasbaarheid zullen we zowel muis als toetsenbord ondersteunen. Aan de slag!

01 Pagina opzetten

We beginnen met een standaard HTML5-pagina met een enkele div. Binnen deze div bevindt zich een ongeordende lijst met twintig lijstitems. Elk item bevat een afbeelding en een link; dit is normaal voor een navigatiemenu. In de tutorialbestanden vind je het startdocument.

02 Klassen

We willen zo veel mogelijk de rendering van de browser zelf gebruiken voor de effecten van onze animatie en de positionering. Dit zal de prestaties verbeteren en krijgen we een vloeiend eindresultaat. Dit betekent wel dat we op een of andere manier effecten moeten kunnen toepassen op onze lijstitems. Hiervoor gebruiken we klassen die we per item kunnen toevoegen of verwijderen.

03 Kijk naar links…

Ons Cover Flow-effect laat de items aan de linkerkant van het huidige item naar dit item toe kantelen en roteert daarbij langs de Y-as om een 3D-effect te creëren. We moeten een beetje perspectief scheppen en de items stapelen, zodat elk item zich voor zijn linkerbuurman bevindt. We beginnen met de rotatie. Voeg de volgende regel toe aan de opmaak van je .left-klasse:

001 .coverflow ul li.left {
002 -webkit-transform: rotateY( 45deg );
003 -webkit-transform-origin: 0px;
004 -moz-transform: scale(0.75, 0.75) translateY(-20px);
005 }

04 …en naar rechts

De items rechts van het huidige item werken op dezelfde manier als die aan de linkerkant, maar dan precies andersom. We moeten de rotatie over de Y-as dus omkeren, zodat de items met de klasse .right ook naar het huidige item gekanteld worden. Voeg de volgende regel toe aan de right-klasse:

001 .coverflow ul li.right {
002 -webkit-transform: rotateY( -45deg );
003 -webkit-transform-origin: 400px;
004 -moz-transform: scale(0.75, 0.75) translateY(-20px);
005 }

05 In perspectief plaatsen

Het laatste wat we moeten doen voordat we gaan testen of alles werkt, is het toevoegen van wat perspectief. We maken hiervoor gebruik van -webkit-perspective en passen deze toe op de overkoepelende div. Zo blijft het perspectief gelijk wanneer we door onze items bladeren. We moeten de ul ook instrueren het 3D-effect te behouden. Voeg de volgende regels toe om dit alles te bewerkstelligen:

001 .coverflow {
002 -webkit-perspective: 2000;
003 -webkit-perspective-origin: 480px 300px;
004 }
005 .coverflow ul {
006 margin: 0;
007 padding: 0;
008 width: 50000px;
009 webkit-transform-style: preserve-3d;
010 height: 550px;
011 }

06 Toewijzen en testen

Het wordt ondertussen tijd om eens te kijken of alles klopt. Voeg een left-klasse toe aan het eerste item in de lijst en een right-klasse aan het derde. Open je pagina nu in Chrome of Safari om te kijken of de transformatie naar behoren werkt.

07 Compacter

Je zult zien dat de items inderdaad juist georiënteerd zijn, maar dat ze wel te ver van elkaar af staan. Voor het echte Cover Flow-effect zullen de items moeten overlappen. Dit kan redelijk eenvoudig met negatieve margins die de lijstitems dichter bij elkaar trekken. Voeg de volgende regels toe aan de algemene .coverflow ul li { }-stijlen. Je ziet dat we ook een transitie-eigenschap toevoegen voor een animatie bij het wisselen van stijlen.

001 margin-left: -160px;
002 margin-right: -160px;
003 text-align: center;
004 -webkit-transition: all 0.5s ease-in-out;
005 -moz-transition: all 0.5s ease-in-out;
006 z-index: 1;
007 border: 2px solid white;

08 Extra aandacht

Het ziet er al goed uit, maar het huidige item – die links noch rechts is – moet helemaal vooraan staan en iets groter zijn dan de rest. We maken hiervoor een nieuwe klasse aan en voegen wat transformaties toe om het gewenste effect te bereiken. Voeg deze code toe aan je stylesheet:

001 .coverflow ul li.current {
002 background: #fff;
003 width: 400px;
004 margin-left: -100px;
005 margin-right: -100px;
006 -webkit-transform-origin: 200px;
007 -webkit-transform: translateZ(100px);
008 z-index: 1000;
009 }

09 jQuery

Nu we onze klassen mooi opgezet hebben, hebben we nog een manier nodig om ze toe te kunnen passen op de verschillende lijstitems tijdens de interactie. Hier gebruiken we jQuery voor. Haal het uit de tutorialbestanden of bezoek http://jquery.com. Verwijs via de script-tag (in de head van je pagina) naar het jQuery-bestand.

10 Script

We hebben ook een plek nodig om onze scripts te plaatsen, zodat we het wisselen van klassen aan onze items kunnen toevoegen. Maak dus een leeg document en sla het op als ‘coverflow.js’ in de map ‘scripts’. Link naar dit bestand in de head van je pagina – net als in de vorige stap.

11 Testen

Als je dit nog niet gedaan hebt: verwijder de handmatige klassen van je lijstitems en voeg onderstaande code toe aan je coverflow.js. Deze code zal controleren of het document klaar is om aangepast te worden en vervolgens een left-klasse aan elk item in de ul toekennen. Sla op en test.

001 $(document).ready(function(){
002 // The document is ready to be manipulated!
003 $(“.coverflow ul li”).each(function(){
004 $(this).addClass(“left”);
005 });
006 });

12 Van links naar rechts

Tijd voor het echte werk. Laten we er vanuit gaan dat ons huidige item zich op positie X bevindt. Elke item links van X (die eerder in de broncode staan) zou een left-klasse moeten krijgen en elk item aan de rechterkant (dus later in de broncode) een right-klasse. Dit doen we met behulp van de jQuery-methodes prevAll() en nextAll().

13 Huidige klasse

We zullen ook de current-klasse moeten toekennen aan het overgebleven item – als het goed is, degene die geselecteerd is. We gaan ons script zo instellen dat elk element dat aangeklikt wordt de current-klasse krijgt. Vervolgens wordt gekeken hoe de left- en right-klassen verdeeld moeten worden.

001 $(“.coverflow ul li”).click(function(){
002 $(this).prevAll(“li”).removeClass(“current”).removeClass(“right”).addClass(“left”);
003 $(this).nextAll(“li”).removeClass(“current”).removeClass(“left”).addClass(“right”);
004 $(this).removeClass(“left”).removeClass(“right”).addClass(“current”);
005 });

14 Toetsenbord

We zouden muis én toetsenbord ondersteunen, tijd om het toetsenbord toe te voegen dus. We moeten toetsaanslagen registreren en, wanneer ze overeenkomen met de toegewezen toetsen, hierop reageren met het updaten van het geselecteerde item. Voeg de onderstaande code toe om het linker- en rechterpijltje te gebruiken om vooruit en achteruit door de lijst te bladeren:

001 $(document).keydown(function(e){
002 index = $(“.coverflow ul li”).index($(“.current”));
003 length = $(“.coverflow ul li”).length-1;
004 // Left arrow
005 if (e.keyCode == 37) {
006 if (index>0) {
007 index=index-1;
008 }
009 }
010 // Right arrow (or tab key - be cautious doing this)
011 if (e.keyCode == 39) { // || e.keyCode== 9) {
012 if (index<length) {
013 index=index+1;
014 }
015 }
016 // Return key
017 if (e.keyCode == 13) {
018 // get the URL of the currently selected link
019 url = $(“.coverflow ul li:eq(“+index+”)”).find(“a”).attr(“href”);
020 // redirect to the URL grabbed
021 document.location.href=url;
022 }
023 $(“.coverflow ul li:eq(“+index+”)”).prevAll(“li”).removeClass(“current”).removeClass(“right”).addClass(“left”);
024 $(“.coverflow ul li:eq(“+index+”)”).nextAll(“li”).removeClass(“current”).removeClass(“left”).addClass(“right”);
025 }

15 Omhoog en omlaag

Nu we toch bezig zijn, kunnen we net zo goed meteen het gedrag voor de pijltjestoetsen omhoog en omlaag instellen. Omhoog om het eerste item in de lijst te selecteren en omlaag voor het laatste item. Dit kan eenvoudig via het toevoegen van een extra voorwaarde aan de code uit de vorige stap.

001 // Down arrow
002 if (e.keyCode == 40) {
003 index = length;
004 }
005 // Up arrow
006 if (e.keyCode == 38) {
007 index = 0;
008 }

16 Muis verbeteren

Misschien is het je al opgevallen dat de muis niet heel erg soepel werkt. De .click( )event listener houdt blijkbaar niet van 3D-transformaties (mouseover trouwens ook niet). We gaan daarom de muisbeweging registreren voor de hele coverflow-div.

17 Beweging registreren

Gebruik de onderstaande code om muisbeweging over de

001 $(“.coverflow”).mousemove(function(e){
002 xpos = e.pageX-$(this).offset().left;
003 index = $(“.coverflow ul li”).index($(“.current”));
004 length = $(“.coverflow ul li”).length-1;
005 if (xpos0) {
006 index = index-1;
007 }
008 if (xpos>((containerwidthitemwidth)/2+itemwidth) && index<length) {
009 index = index+1;
010 }

001 $(“.coverflow”).mousemove(function(e){
002 xpos = e.pageX-$(this).offset().left;
003 index = $(“.coverflow ul li”).index($(“.current”));
004 length = $(“.coverflow ul li”).length-1;
005 if (xpos0 && timer==0) {
006 index = index-1;
007 timer = 1;
008 resettimer = setTimeout(function(){timer=0;},1000);
009 }
010 if (xpos>((containerwidthitemwidth)/2+itemwidth) && index<length && timer==0) {
011 index = index+1;
012 timer = 1;
013 resettimer = setTimeout(function(){timer=0;},1000);
014 }
015 $(“.coverflow ul li:eq(“+index+”)”).prevAll(“li”).removeClass(“current”).removeClass(“right”).addClass(“left”);

001 t = setInterval(“centreit()”,500);
002 function centreit(){
003 $(“.coverflow”).each(function(){
004 offsetleft = $(“.current”,this).offset().left;
005 containeroffset = $(this).offset().left;
006 offsetleft = offsetleftcontaineroffset;
007 target = (containerwidth/2)-(itemwidth/2);
008 existingmargin = parseInt($(“ul”,this).css(“marginLeft”));
009 newmargin = existingmargin-(offsetleft-target);
010 $(“ul”,this).stop().clearQueue().animate({marginLeft:newmargin},500);
011 });
012 }

001 $(“.coverflow ul li:lt(“+index+”)”).each(function(){
002 tmpindex = $(“.coverflow ul li”).index(this);
003 $(this).css({zIndex:tmpindex});
004 });
005 $(“.coverflow ul li:gt(“+index+”)”).each(function(){
006 tmpindex = $(“.coverflow ul li”).index(this);
007 $(this).css({zIndex:100-tmpindex});
008 });
009 $(“.coverflow ul li:eq(“+index+”)”).css({zIndex:1000}).focus();

Hoe vaak kun je nu werkelijk meekijken met een project in aanbouw? Zelden. Af en toe lees je nog een casestudy of een how we made van een bekende site, maar dat is altijd achteraf praten. Dan gaat het vaak over hoe mooi en goed het allemaal geworden is en worden problemen of uitdagingen vaak met een ‘ach, dat viel wel mee’  terzijde geschoven. Maar wat nu als je mee kon kijken tijdens de bouw van een nieuwe versie van een van ‘s werelds grootste nieuwssites?

De BBC is altijd bezig met het vernieuwen en verbeteren van hun enorme site. Momenteel zijn ze druk bezig met een responsive webdesign en dit complexe proces wordt uitgevoerd op een testsite genaamd Responsive News. Op het bijbehorende blog doet het team uit de doeken wat ze allemaal tegenkomen en hoe ze bepaalde zaken ervaren en problemen overwinnen. Erg leerzaam. Check ook de video met een aantal experimenten in actie.

Door een kleine last-minute aanpassing in de code zijn de op de cd meegeleverde bestanden voor de in Webdesigner 43 gepubliceerde workshop ‘Leer JavaScript, deel 2: Arrays en functies’ niet correct. Onze excuses daarvoor. De juiste bestanden zijn via deze link te downloaden. Veel plezier met het leren van JavaScript!

Over niet al te lange tijd zal Adobes nieuwe clouddienst Creative Cloud verschijnen. Deze tool zou een compleet productiepakket moeten worden, voorzien van een software-as-a-service-abonnement. Verder wordt het mogelijk om 20GB aan bestanden in de cloud op te slaan en deze te synchen naar allerlei apparaten. Er is lang gewacht op specificaties van wat het abonnement verder zou inhouden. Nou, dat is niet mis. Voor $49,99 per maand (in Euro’s, gokje: €44,99) krijg je dus niet alleen de cloud, maar ook alle creatieve tabletapplicaties zoals Photoshop Touch (Android en later ook iOS), toegang tot een grote nieuwe community, mag je Typekit vrij gebruiken en kun je in een later stadium digitale magazines maken met de Digital Publishing Suite. Klapper is echter de opname van de volledige Creative Suite, inclusief Edge en Muse die niet in de CS opgenomen gaan worden.

Van Photoshop tot Dreamweaver, ze zijn allemaal terug te vinden. Ook worden er steeds nieuwe applicaties aan toegevoegd, zoals bijvoorbeeld Lightroom 4 als die uit de betafase komt. Volgens Adobe werkt een afnemer van een abonnement altijd met de nieuwste versie van de software. Dat is erg interessant natuurlijk, vooral nu Creative Suite 6 steeds dichterbij komt. Deze wordt dan direct opgenomen in het abonnement van de gebruiker. Upgraden is dus overbodig. Voor  teams komt er later dit jaar een speciale versie van het pakket, met meer tools gericht op samenwerking en deze zal $69,99 gaan kosten.

Adobe wil kost wat kost de gebruiker overhalen om een abonnement af te sluiten. Het aanbod is dan ook overweldigend. Als je gaat rekenen kan het jaarlijks zelfs geld schelen, terwijl je veel meer krijgt. Maar ja, of het allemaal gebruikt is natuurlijk een tweede. Wat denk jij? Is de Creative Cloud iets voor jou?

(afbeelding © Adobe)

De ontwikkelingen op het web gaan razendsnel. Webdesigners en -developers moeten van veel zaken op de hoogte zijn. Nieuwe standaarden, bijgewerkte browsers en het steeds grotere aanbod schermgroottes zijn slechts enkele van die onderwerpen. Om het jaar goed beginnen, geven we je 75 tips, trucs en trends die je een stevige basis geven. Heb je altijd al willen weten hoe je nu het perfecte WordPress-theme kiest? Ook dan zit je perfect bij Webdesigner 43.

Het perfecte WordPress-theme kiezen

WordPress is het meest gebruikte CMS ter wereld. Dat betekent dat er door allerlei partijen heel veel plug-ins en themes aangeboden worden. Steeds vaker zijn deze handige uitbreidingen van lage kwaliteit of voorzien van kwaadaardige code. Waar vind je nu strakke en veilige WordPress-themes en hoe kies je de beste en mooiste voor jouw specifieke content? In Webdesigner 43 lees je het.

75 tips, trucs en trends

Hoe kun je het jaar nu beter beginnen dan met een flinke dosis nieuwe kennis? We hebben 75 onmisbare tips, trucs en trends verzameld waardoor je weer fris aan de slag kunt. We hebben ons gefocust op de belangrijkste gebieden: HTML5, CSS3, jQuery en WordPress. Niet te missen.

Geld verdienen met nieuwsbrieven

Je kunt nog zoveel tijd en energie steken in je socialmedia-activiteiten, maar is het dat allemaal waard? Er is namelijk nog een uiting die veel geld in het laatje kan brengen: de e-mailnieuwsbrief. Guido Jansen laat zien hoe je van je nieuwsbrief een geldmachine kunt maken.

Tutorials

Zoals altijd gaan de handjes op een gegeven moment kriebelen en moet er gewerkt worden. Ditmaal kun je onder andere aan de slag met HTML5 en CSS3 om een strakke navigatiebalk te bouwen, maak je wireframes met je tablet en Adobes Proto-app, publiceer je mobiele apps voor iOS en Android via Dreamweaver en Flash en kun je je pagina zo inrichten dat je met een Facebook-account kunt inloggen.

En verder…

Alsof dat nog allemaal niet genoeg is presenteren we in Webdesigner 43 natuurlijk ook weer de mooiste sites, lees je het laatste nieuws en zie je werk van jonge, opkomende designers.

Webdesigner 43 ligt vanaf vrijdag 3 februari bij abonnees in de bus en vanaf dinsdag 7 februari in de winkels. Of koop hem via onze webshop.

Preview Webdesigner 43

De ‘vouw‘ blijft de gemoederen in webdesignland bezighouden. De vouw is de plek op een website waarop de gebruiker voor het eerst moet scrollen. Alles boven de vouw is dus direct zichtbaar en zou dus het belangrijkst moeten zijn. Sommige mensen vinden dat je je niet druk hoeft te maken over de vouw, terwijl anderen toch nog voor waarschuwen. We zien tegenwoordig steeds meer one page designs, waardoor scrollen het nieuwe klikken aan het worden is en content langer en groter kan worden. Denk bijvoorbeeld aan Nike Better World.

Maar hoe je het ook bekijkt, de hoeveelheid content die de bezoeker direct kan zien blijft belangrijk. Maar waar zit die vouw nu precies? Er zijn inmiddels tientallen schermresoluties, dus hoe bepaal je nu wat je wel en niet kunt doen? Google to the rescue, want hier is Browser Size. Deze eenvoudige tool geeft een website in een volledig browserscherm weer en legt daar de verschillende views van de resoluties overheen, compleet met het percentage bezoekers die die resolutie kunnen zien. Een snelle blik leert dat 90% van de bezoekers een resolutie van 975 x 500 pixels kan zien. Met jouw website op de achtergrond weet je nu precies waar je aan toe bent, ook al ben je het niet eens met de theorie van de vouw.

Flash is haar grip op het web aan het verliezen, dat lijkt wel duidelijk. Voor interfaces wordt het steeds minder gebruikt en ook op andere vlakken staat er een uitdager klaar: HTML5. Het HTML5-element <video> wil dolgraag de standaard worden voor videopresentatie op het web. Maar hoe staat het daar nu mee? Kun je het element zomaar inzetten en ervan uitgaan dat elke bezoeker direct jouw video kan bekijken? En welke videocodec moet je dan gebruiken?

Het bedrijf achter videospeler JW Player, Longtail Video, heeft een prachtig overzicht gemaakt van de ontwikkeling en de ondersteuning daarvan. In het document The State Of HTML5 Video wordt voortaan bijgehouden wat er allemaal op dat vlak gebeurt. Zo lees je nu onder andere dat tweederde van de browsers <video> ondersteunt, dat ene helft van de browsers MP4 ondersteunt en de andere helft WebM en dat maar een klein percentage van de browser fullscreen aan kan.

Er is dus nog wat werk te doen. Bekijk het uitgebreide (en overzichtelijk opgemaakte) document en zorg dat jouw video’s toegankelijk zijn. Gebruik jij al HTML5 voor je video’s?

Trek de aandacht zonder afbeeldingen te gebruiken…

Tegenwoordig zijn er twee termen die bijna elk designforum of blog domineren: HTML5 en CSS3. Er wordt hevig gediscussieerd tussen de aanhangers en degenen die er nog niks van moeten hebben. Misschien is het tijd om de strijdbijl te begraven en te kijken naar wat deze tools nu eigenlijk zijn: gewoon nog een manier om webdesignproblemen op te lossen. Je bent natuurlijk niet verplicht om ze te gebruiken, maar elke digitale creatieveling zou een nieuwe technologie op zijn minst een keertje uit moeten proberen.
In deze tutorial laten we zien hoe je een aantal nieuwe functies van CSS3 kunt inzetten om grafische elementen, zoals linten, te maken. Vroeger moest je dit nog allemaal met afbeeldingen doen.
Sommigen hanteren de filosofie ‘if it ain’t broke, don’t fix it’, maar in dit geval levert het ook veel voordelen op. Deze techniek kan bijvoorbeeld het dataverkeer en het aantal http-requests verminderen. Ook kun je de code hergebruiken voor verschillende doeleinden. Over het algemeen maakt CSS3 grafische elementen een stuk flexibeler.
Natuurlijk zijn er ook nadelen te bedenken. Zo moet je wat meer programmeren en is de browsercompatibiliteit nog een heikel punt. Probeer het echter eens uit en je zult ontdekken dat de nadelen niet opwegen tegen de voordelen.

01 HTML5 Boilerplate

Eerst gaan we onze bestanden opzetten. We gaan HTML5 en wat CSS3-eigenschappen gebruiken. We raden aan om HTML5 Boilerplate te gebruiken. Dit is een HTML/CSS/JS-basis van Paul Irish en Divya Manian. Download het pakket van http://html5boilerplate.com. Bekijk de structuur eens goed. Wij gaan style.css en index.html gebruiken.

02 De basis

Je kunt de map noemen hoe je wilt. In deze map vind je veel bestanden, zoals robots.txt. Hier kun je meer over lezen op de Boilerplate-website. Wij beginnen met index.html, wat onze basis vormt. Het template dat we gebruiken laadt automatische alle scripts met alle best practices om de browsercompatibiliteit te vergroten (bijvoorbeeld modernizr.js).

013 <link rel=”stylesheet” href=”css/style.css”>
014 <script src=”js/libs/modernizr-2.0.6.min.js”></script>
015 </head>
016 <body>
017 <!-- Below we’ll add our code, thank you Paul Irish and Divya Manian -->
018 <div id=”container”>

03 CSS

Het HTML5 Boilerplate-template bevat een goed uitgangspunt voor het bouwen van standaardstijlen. Het maakt gebruik van CSS-normalisatie en vele andere technieken om jou een kant-en-klare stylesheet te bieden. Zo zijn er bijvoorbeeld ‘oldie’ klassen voor conditionele -klassenamen en img {max-witdh: 100%;}. Je zult zien hoe eenvoudig het is om een nieuw project te beginnen met style.css. Volg gewoon de instructies in de documentatie. Je kunt je code in de ‘primary styles’-sectie schrijven.

04 Achtergrondverloop

We willen de kracht van CSS3 testen voor onze landingspagina. Om te beginnen maken we een gestreepte achtergrond met wat CSS-regels en de ‘linear-gradient’ -eigenschap met kleurstops. Bekijk voor meer uitleg kopje 5 van de ‘CSS Image Values and Replaced Content Module Level 3′ (http://dev.w3.org/csswg/css3-images).

05 Kleurstoppen

De documentatie van W3C zegt het volgende: “Een lineair verloop wordt gecreëerd door het specificeren van een gradient-line met verscheidene kleuren gepositioneerd op die lijn” en “Colour-stops zijn punten geplaatst op de lijn die gedefinieerd is door de gradient-line aan het begin van de regel.” We benutten een bepaald verloop (waar meerdere colour-stops dezelfde positie hebben): “… de kleur verandert op die positie ineens, in plaats van geleidelijk over te gaan.” Met deze techniek kunnen we ‘instant’ kleurovergangen bereiken, maar de gehele container wordt gevuld door de tile. We kunnen background-size gebruiken om de grootte van elke tile van ons patroon in te stellen. Hiervoor voegen we toe. Ook alle CSS vind je terug in de tutorialbestanden.

006 /* Linear-gradient rules to create the color transactions */
007 background-image: -moz-lineargradient(45deg, #f4f4f4 25%, transparent 25%, transparent),
008 -moz-linear-gradient(-45deg, #f4f4f4 25%, transparent 25%, transparent),
009 -moz-linear-gradient(45deg, transparent 75%, #f4f4f4 75%),

024 /* to control the size of the tiles */
025 .stripes {
026 background-size: 40px 40px;
027 box-shadow: inset 0px 2px 2px #ddd; /* we add a CSS3 box-shadow for the top */
028 border-top: 5px solid #f4f4f4; /* we add a border for the top */
029 padding: 5px;
030 }

06 Header en logo

We plaatsen een logo op onze pagina en gebruiken, om de header wat meer stijl te geven, @font-face voor een persoonlijk tintje. Ga naar Google Webfonts, kies je favoriet (wij gebruiken Yanone) en voeg de code toe aan de head. Nu kun je font-family: ‘Yanone Kaffeesatz’, sans-serif; gebruiken voor het logo.
HTML:

001 <header>
002 <h1 id=”logo”><a href=”#”>CSS3 Ribbon</a></h1>
003 </header>

CSS:

001 h1#logo {
002 padding: 10px 0 25px 0;
003 font-family: ‘Yanone Kaffeesatz’, sansserif;
004 font-size: 90px;
005 text-align: center;
006 }
007 h1#logo a {
008 color: #b0d03d;
009 text-shadow: 3px 3px 0px #e2ebc1;
010 border-bottom: 6px solid #b0d03d;
011 border-top: 6px solid #b0d03d;
012 }
013 h1#logo a:hover {
014 text-decoration: none;
015 color: #b2e109;
016 text-shadow: none;
017 border-bottom: 6px solid #b2e109;
018 border-top: 6px solid #b2e109;
019 }

07 Lay-out

Binnen de main-div plaatsen we onze belangrijkste lay-out. De linkerkant heeft een subheader en wat boodschappen om de gebruiker te betrekken. Rechts bevindt zich het registratieformulier. In deze stap zie je de opbouw van de hele pagina. De klasse “presentation” is voor de linkerkant en “register” voor rechts. We gebruiken ook een wrapper om de container tot 978px te beperken. Waarschijnlijk gebruiken we deze wrapper nog wel vaker.

001 <div id=”main” role=”main”>
002 <section id=”join”>
003 <div class=”wrapper978”>
004 <div class=”presentation”>
005 <h2>Join the community, Try something new!</h2>
006 <p>Instant updates from you favourite CSS Ninjas and experts. Discover what happens in CSS World, in real time. Stay tuned!</p>
007 <p><a class=”text_cta” href=”#”><span class=”highlight”>50</span> reasons to sign up</a> | <a class=”text_cta2” href=”#”><span class=”highlight”>100</span> latest snippets</a> </p>
008 </div>
009 <div class=”register”>
010 <h3>Ten seconds and you are in a new world. It’s free!</h3>
011 <form>
012 <p>
013 <label for=”email” class=”inlined”>Your email here</label>
014 <input type=”text” value=”” name=”email” class=”required email” id=”email” />
015 </p>

08 Hergebruik

We gebruiken de wrapper om een vaste 978px lay-out te maken. De twee secties in de main-container zullen zwevend worden. Dit betekent dat we de container van deze twee elementen moeten ‘clearen’, omdat de zwevende elementen anders niet automatisch de zichtbare achtergrond van de container forceren. De standaard style.css van het HTML5 Boilerplate-template biedt een goede mini-clearfix-klasse, maar in dit geval volstaat een overflow:hidden binnen de klasse “register”.

001 .wrapper978 {
002 width: 978px;
003 margin: 0 auto;
004 }
005 section#join {
006 background: #fff;
007 border-bottom: 1px solid #eee;
008 border-top: 1px solid #eee;
009 padding: 40px 0;
010 clear: both;
011 overflow: hidden;
012 }

09 Presentatie

De linkerkant volgt de klassieke opzet van een header, een intro en wat linkjes met extra informatie voor bezoekers. Dus ook degenen met weinig CSS-ervaring zijn misschien wel bekend met onderstaande code.

001 .presentation {
002 width: 520px;
003 float: left;
004 margin-top: 40px;
005 }
006 .presentation h2 {
007 font-size: 46px;
008 text-shadow: 2px 2px 0px #eee;
009 padding-right: 50px;
010 }
011 .presentation p {
012 font-size: 20px;
013 color: #bbb;
014 margin-top: 30px;
015 line-height: 1.5em;
016 padding-right: 50px;
017 }
018 a.text_cta {
019 color: #49c4da;
020 }
021 a.text_cta2 {
022 color: #f9bc4b;
023 }

10 Registratie

Volgens hetzelfde principe als in de vorige stap, plaatsen we nu de rechterkant van de container: het registratieformulier. We voegen zo nog een elegant 3D-lint toe, maar eerst leggen we de basis met de lay-out en positionering.

001 .register {
002 float: right;
003 margin: 40px 0;
004 padding: 15px 30px 30px 30px;
005 width: 353px;
006 }
007.register form {
008 margin-top: 30px;
009 }

11 Fraaier formulier

Richt je nu op het positioneren van de inputvelden. We zullen later nog een Twitter-achtig effect toevoegen. We voegen enkele CSS3-eigenschappen toe, zoals een box-shadow en voor de ‘Sign up’-knop een text-shadow plus border-radius.

001 .register input {
002 display: block;
003 margin: 15px 10px 15px 0;
004 width: 309px;
005 height: 30px;
006 border: 1px solid #cfdd97;
007 font-size: 16px;
008 border-radius: 5px;
009 padding: 3px 15px;
010 box-shadow: inset 2px 2px 0 #f7f7f7; /* CSS3 to make the input elements look good */
011 }
012 input#signup {
013 background: #f3b855;
014 height: 35px;
015 width: 110px;
016 border: 1px solid #dba940;
017 border-radius: 3px; /* rounded corners */
018 box-shadow: inset 1px 1px 0px #f7d694, 0px 2px 2px #e6e6e6;
019 text-shadow: 1px 1px 0px #cd9f4c; /* CSS3 text shadow */
020 color: #fff;

12 Dat verdient een lintje

We willen een lint ‘tekenen’ dat zich om een blok (hier een div met formulier en header) vouwt. Om een 3D-lint te maken, hebben we drie belangrijke grafische elementen nodig: de voorgrond (voor de header), de driehoek voor het omgevouwen deel om diepte te creëren en de vouw zelf.

13 Trucje met driehoeken

Kijk eens naar de onderstaande code, met de onderdelen voor het lintje in gedachten. Wanneer een browser randen tekent, doet hij dit onder een hoek. Dus met width:0, height:0 en border-style: solid, zorgt de border-color voor de kleur van vier driehoeken en border-width bepaalt de grootte.

001 /* Four triangles red green blue orange */
002 .triangles-multicolor {
003 border-color: red green blue orange;
004 border-style:solid;
005 border-width:20px;
006 width:0;
007 height:0;
008 }
009 /* triangle */
010 .triangle {
011 border-color: transparent #7d90a3 transparent transparent;
012 border-style: solid;
013 border-width: 15px;
014 height: 0px;
015 width: 0px;
016 }

14 De vouw

Met dezelfde techniek kunnen we het gevouwen deel van het lint maken. Het element moet er uit komen te zien als een rechthoek dat een driehoekig deel mist. Dankzij de border-eigenschappen kunnen we precies tekenen wat we nodig hebben.

001 .left_folded_back {
002 border-color: #9fbe2e #9fbe2e #9fbe2e transparent;
003 border-style: solid;
004 border-width: 25px 15px;
005 height: 0;
006 width: 10px;
007 }

15 Het blok

Tijd om alles samen te voegen. Eerst voegen we alle benodigde code toe aan index.html. Met CSS3 maken we een blok voor ons formulier en de header. Vervolgens voegen we via een h3 de voorgrond van het lint toe, met een box-shadow voor extra diepte. We gaan voor de 3D-look, dus houdt rekening met de z-index en de stapelvolgorde van de elementen.

001 .register {
002 background: #f8f8f6;
003 border: 5px solid #f2f3ef;
004 border-radius: 5px 5px 5px 5px;
005 box-shadow: 0 0 6px #C6C9BC;
006 float: right;
007 margin: 40px 0;
008 padding: 15px 30px 30px 30px;
009 width: 353px;
010 z-index: 1;
011 position: relative;
012 }
013 .register h3 {
014 position: relative;
015 width: 423px;
016 /* register_width+register_padding+register_border */
017 height: 38px;
018 font-family: ‘Yanone Kaffeesatz’, sansserif;
019 font-size: 22px;
020 padding: 16px 10px 0 10px; /* 10px on left + 10px on right */
021 margin-left: -45px; /* center the foreground part of the ribbon */
022 color: #fff;
023 background-color: #b0d03d;
024 text-shadow: 1px 1px 0px #7d9d1c;
025 box-shadow: 0px 0px 3px #999;
026 text-align: center;
027 z-index: 2;
028 }

16 Lintje plaatsen

We weten nu hoe we een lintje tekenen, dus kunnen we de benodigde code invoegen. Omdat het een symmetrisch geheel moet worden, werken we met een linker- en een rechterkant. Naast een div gebruiken we dus twee span-elementen.

001 <div class=”left_folded_back”></div> <!-- the left folded_back part -->
002 <h3>
003 <span class=”left”></span><!-- the left triangle for the 3D effect --><span class=”right”></span><!-- the left triangle for the 3D effect -->
004 Ten seconds and you are in a new world. It’s free!
005 </h3>
006 <div class=”right_folded_back”></div><!-- the right folded_back part -->

17 Lintje opmaken

Met alle onderdelen aanwezig, hoeven we alleen nog de bekende CSS toe te voegen. Hieronder zie nog eens hoe we de border-eigenschappen gebruiken voor de vormen.

001 span.left {
002 position: absolute;
003 width: 0;
004 height: 0;
005 left: 0px;
006 top: 100%;
007 border-width: 5px 5px;
008 border-style: solid;
009 border-color: #5d6c1d #5d6c1d transparent transparent;
010 z-index: 1;
011 }
012 div.left_folded_back {
013 border-color: #9fbe2e #9fbe2e #9fbe2e transparent;
014 border-style: solid;
015 border-width: 25px 15px;
016 height: 0;
017 left: -45px;
018 position: absolute;
019 top: 54px;
020 width: 10px;
021 z-index: 0;
022 }
023 span.right {

034 div.right_folded_back {
035 border-color: #9fbe2e transparent #9fbe2e #9fbe2e;
036 border-style: solid;
037 border-width: 25px 15px;
038 height: 0;
039 right: -45px;
040 position: absolute;
041 top: 54px;
042 width: 10px;
043 z-index: 0;
044 }

18 jQuery-formulier

Om de manier waarop Twitter omgaat met het scherpstellen en vervagen van bepaalde zaken na te bootsen, voegen wat jQuery toe. Boilerplate laadt de 1.6.2 versie van jQuery onderaan het bestand, dus we kunnen ons script gewoon toevoegen. We gaan de dekking van het label verminderen bij selectie en helemaal verbergen wanneer er getypt wordt.

001 <script type=”text/javascript” > $(document).ready(function(){
002 $(“.register input”).each(function () {
003 $(this).focus(function () {
004 if($(this).val() == “”) {
005 $(this).prev(“label.inlined”).fadeTo(200, 0.45);
006 }
007 });
008 $(this).keypress(function () {
009 $(this).prev(“label.inlined”).hide();
010 });
011 $(this).blur(function () {
012 if($(this).val() == “”) {
013 $(this).prev(“label.inlined”).fadeTo(200, 1);
014 }
015 });
016 });
017 });
018 </script>

19 Wat kleine aanpassingen

Het lijkt te werken, maar wanneer je een waarde invoert in het emailveld en je vernieuwt vervolgens de pagina, zie je dat het label én de waarde geladen worden. Voeg een controle toe om dit op te lossen. Bovendien wordt in sommige browsers het invoerveld niet geactiveerd bij het klikken. Ook dit lossen we op. Tenslotte voegen we de regel – input:focus { outline: none;} – toe aan onze CSS. Dit om het standaard focuseffect te voorkomen.

001 <script type=”text/javascript” >
002 $(document).ready(function(){
003 $(“.register input”).each(function () {
004 //fix the reload problem
005 if($(this).val() != “”) {
006 $(this).prev(“label.inlined”).hide();
007 }
008 // focus on the input element clicking on the label
009 $(this).prev(“label.inlined”).click(function(){
010 $(this).next().focus();
011 })

20 Tweaks voor IE

Als laatste kunnen we de code valideren en de lay-out testen. In Opera, Firefox, Chrome, Safari et cetera werkt alles prima. In IE9 echter zien we geen achtergrond en zijn er wat probleempjes met de marges. Als oplossing maken we voor IE8 en IE9-gebruikers het bestand /css/ie.css aan, met onderstaande code. Vergeet niet in je head-sectie een conditioneel statement op te nemen.

001 /css/ie.css file
002 body {
003 background-color: #f8f8f8;
004 }
005 .register input {
006 padding: 8px 15px 0 18px;
007 }

Tadaa, responsive webdesign was geboren. Maar hoe wordt het inmiddels toegepast? Nou, in Nederland nog slechts mondjesmaat. Hieronder hebben we vijftien mooie voorbeelden van Nederlandse responsive designs verzameld. Heb je zelf ook een responsive design opgeleverd? Laat het dan weten in de comments. Wil je testen of een design responsive is? Check dan de testpagina van Matt Kersley.

Studio Stomp

Orestis

About Design

De Bouwmeester Mobiliteit

Ja of nee

Eend

Herjen Oldenbeuving

Mobilism 2012

Tim Benniks

Studio With

Online Jaarverslag

Centraal Museum

Greenpeace Magazine

Athlon Flex Centre

Brand New