Tools | tech | trends: HTML5, CSS3, jQuery
Expert: Piervincenzo Madeo
Tutorialbestanden: Downloaden
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.
De code bij de stappen is bedoeld ter verduidelijking. Voor de volledige code download je de tutorialbestanden.
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 }