Uit Hack42
Ga naar: navigatie, zoeken
k
 
(8 tussenliggende versies door dezelfde gebruiker niet weergegeven)
Regel 2: Regel 2:
 
|Naam=Polaroids
 
|Naam=Polaroids
 
|Eigenaar=Stitch
 
|Eigenaar=Stitch
−
|Status=Uitvoer
+
|Status=Afgerond
 
|Skills=Webdesign
 
|Skills=Webdesign
 
|Samenvatting=Met HTML en CSS polaroid effect maken
 
|Samenvatting=Met HTML en CSS polaroid effect maken
Regel 11: Regel 11:
 
** OK CSS Injectie
 
** OK CSS Injectie
 
* OK: polaroid layout bij plaatje
 
* OK: polaroid layout bij plaatje
−
* TODO: rotatie
+
* OK: rotatie
−
* TODO: over elkaar leggen.
+
* OK: over elkaar leggen. (is standaard)
 +
* OK: finetunen en implementeren
 +
 
 +
Werkt in Chrome, Firefox. Onder IE werkt rotatie niet, maar zit het er ook OK uit.
  
 
Dit is de testpagina.
 
Dit is de testpagina.
  
  
 +
Eindresultaat:
 +
== '''Ruimtes in [[space|Hack42]]''' ==
  
  
−
{| style="border: 0px solid blue; border-top-left-radius: 5px; border-top-right-radius:5px; padding: 0px; {{#if: {{{2|}}} | width:{{{2}}}; | width:100%; }} margin:10px; padding-right: 20px;" border="0" cellpadding="2" cellspacing="0"
+
<div style="float:center; clear:right; width:100%; margin:5px 0 1em 1em; font-size: 1.6em;">
−
|-
+
<div class="polaroidlayout rotate355">[[image:Hack42_hq.jpg|x100px|link=space]]<br /><p class="polaroidfont">[[Space|De Space]]</p></div>
−
| colspan="1" style="font-size:16px; text-align: left; background-color: #E0E9E9; border-top-left-radius: 5px; border-top-right-radius:5px; vertical-align: top; padding: 6px; border:0px; color:#5A3696; border-bottom: 1px solid #DDD;" | '''Ruimtes in [[space|Hack42]]'''
+
<div class="polaroidlayout rotate10">[[image:Soldeerlab_leveled.jpg|x100px|link=Solder-lab]]<br /><p class="polaroidfont">[[Solder-lab]]</p></div>
−
|-
+
<div class="polaroidlayout rotate5">[[image:makerlab_leveled.jpg|x100px|link=Maker-lab]]<br /><p class="polaroidfont">[[Maker-lab]]</p></div>
−
| style="background-color: #EDF2F2; padding: 10px; padding-right: 35px; border-bottom-left-radius: 5px; border-bottom-right-radius:5px; text-shadow: 0.1em 0.1em 0.1em grey; border-top: 1px solid white; text-align: justify;" |
+
<div class="polaroidlayout rotate355">[[image:Lezingenzaal.JPG|x100px|link=Lezingenzaal|]]<br /><p class="polaroidfont">[[Lezingenzaal]]</p></div>
−
 
+
<div class="polaroidlayout rotate345">[[image:Lounge2.JPG|x100px|link=Lounge]]<br /><p class="polaroidfont">[[Lounge]]</p></div>
−
<div style="float:center; clear:right; width:100%; margin:5px 0 1em 1em; border:solid 0px #AAAAAA; border-collapse:collapse; background-color:{{style|background}}; empty-cells:hide; text-align: justify; font-size: 1.2em;">
+
<div class="polaroidlayout rotate10">[[image:Bar_leveled.jpg|x100px|link=Bar]]<br /><p class="polaroidfont">[[Bar]]</p></div>
−
<div class="polaroidlayout rotate20">[[image:Soldeerlab_leveled.jpg|x100px|link=Solder-lab]]<br /><p class="polaroidfont">[[Solder-lab]]</p></div>
+
<div class="polaroidlayout rotate5">[[image:gaming_leveled.jpg|x100px|link=Gaming]]<br /><p class="polaroidfont">[[Gaming]]</p></div>
−
<div style="polaroidlayout rotate20">[[image:makerlab_leveled.jpg|x100px|link=Maker-lab]]<br /><p class="polaroid">[[Maker-lab]]</p></div>
+
<div class="polaroidlayout rotate355">[[image:bibliotheek_leveled.png|x100px|link=Bibliotheek]]<br /><p class="polaroidfont">[[Bibliotheek]]</p></div>
−
<div style="polaroidlayout rotate20">[[image:Lezingenzaal.JPG|x100px|link=Lezingenzaal|]]<br /><p class="polaroid">[[Lezingenzaal]]</p></div>
+
<div class="polaroidlayout rotate10">[[image:Stofhok_leveled.jpg|x100px|link=Werkplaats]]<br /><p class="polaroidfont">[[Werkplaats]]</p></div>
−
<div style="polaroidlayout rotate20">[[image:Lounge2.JPG|x100px|link=Lounge]]<br />[[Lounge]]</div>
+
<div class="polaroidlayout rotate350">[[image:Storage_leveled.png|x100px|link=Storage]]<br /><p class="polaroidfont">[[Storage]]</p></div>
−
<div style="polaroidlayout rotate20">[[image:Bar_leveled.jpg|x100px|link=Bar]]<br />[[Bar]]</div>
+
<div class="polaroidlayout rotate0">[[image:Museum_leveled.jpg|x100px|link=Museum]]<br /><p class="polaroidfont">[[Museum]]</p></div>
−
<div style="polaroidlayout rotate20">[[image:gaming_leveled.jpg|x100px|link=Gaming]]<br />[[Gaming]]</div>
+
<div class="polaroidlayout rotate5">[[image:entree_leveled.jpg|x100px|link=Entree]]<br /><p class="polaroidfont">[[Entree]]</p></div>
−
<div style="polaroidlayout rotate20">[[image:bibliotheek_leveled.png|x100px|link=Bibliotheek]]<br />[[Bibliotheek]]</div>
+
<div class="polaroidlayout rotate15">[[image:Keuken.jpg|x100px|link=Keuken]]<br /><p class="polaroidfont">[[Keuken]]</p></div>
−
<div style="polaroidlayout rotate20">[[image:Stofhok_leveled.jpg|x100px|link=Werkplaats]]<br />[[Werkplaats]]</div>
+
<div class="polaroidlayout rotate355">[[image:Wc.JPG|x100px|link=WC]]<br /><p class="polaroidfont">[[WC]]</p></div>
−
<div style="polaroidlayout rotate20">[[image:Storage_leveled.png|x100px|link=Storage]]<br />[[Storage]]</div>
+
<div class="polaroidlayout rotate345">[[image:Stookhok.JPG|x100px|link=Stookhok]]<br /><p class="polaroidfont">[[Stookhok]]</p></div>
−
<div style="polaroidlayout rotate20">[[image:Museum_leveled.jpg|x100px|link=Museum]]<br />[[Museum]]</div>
 
−
<div style="polaroidlayout rotate20">[[image:entree_leveled.jpg|x100px|link=Entree]]<br />[[Entree]]</div>
 
−
<div style="polaroidlayout rotate20">[[image:Keuken.jpg|x100px|link=Keuken]]<br />[[Keuken]]</div>
 
−
<div style="polaroidlayout rotate20">[[image:Wc.JPG|x100px|link=WC]]<br /> [[WC]]</div>
 
−
<div style="polaroidlayout rotate20">[[image:Stookhok.JPG|x100px|link=Stookhok]]<br />[[Stookhok]]</div>
 
 
</div>
 
</div>
−
|}
 

Huidige versie van 16 feb 2012 om 12:12

Project: Polaroids
Schroefje24.png
Schroefje24.png
Schroefje24.png
Schroefje24.png
Polaroids Picture.jpg

Polaroids

Naam Polaroids
Door Stitch
Status Afgerond
Madskillz Webdesign
Doel / Omschrijving
Met HTML en CSS polaroid effect maken
Alle Projecten - Project Toevoegen
File:Polaroids_Picture.jpg noez


  • Nearly OK: Stift font
    • OK Uploaden
    • OK CSS Injectie
  • OK: polaroid layout bij plaatje
  • OK: rotatie
  • OK: over elkaar leggen. (is standaard)
  • OK: finetunen en implementeren

Werkt in Chrome, Firefox. Onder IE werkt rotatie niet, maar zit het er ook OK uit.

Dit is de testpagina.


Eindresultaat:

Ruimtes in Hack42

Overgenomen van "https://hack42.nl/mediawiki/index.php?title=Gebruiker:Stitch/Polaroids&oldid=6554"