tv design

De vakantie is voorbij!

Tijd om er opnieuw stevig tegen aan te gaan en daarom beginne we al direct met het maken van een php-jquery web gallery.

voorbeeld

demo

Hoe?

• download dit zip bestand
• Steek uw gewenste foto’s in de folder gallery
• Plaats alle bestanden van v1 op uw online server ( deze moet wel php ondersteunen of gebruik xammp voor local te werken)
• Voilla u hebt een soort fotoalbum met al uw favoriete foto’s

download

v1

Mocht u nog vragen hebben laat het me weten!

greetz

Vanharen Tijl

Bij de vorige tutorial hebben we gezien hoe we een hover-button maakte.

Nu gaan we een stapje verder. We gaan ervoor zorgen dat de hover een mooie fading heeft .

Stap 1

Eerst download je de Jquery code.

download:jquery-1.3.2.min

Stap 2

Na het downloaden van het bestand gaat u het bestand referenen in de header van uw html document.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

Stap 3

Na deze actie gaat u de volgende code verder toevoegen in de header.

<script type="text/javascript">
 $(document).ready(function() {
 $('.buttonverstuur').append('<span></span>').each(function () {
 var $span = $('> span.hover', this).css('opacity', 0);
 $(this).hover(function () {
 $span.stop().fadeTo(500, 1);
 }, function () {
 $span.stop().fadeTo(500, 0);
 });
 });
 });
</script>

stap 4
Als laatste past u de code css-code aan.

.buttonverstuur {

 position:relative;
display:block;
height: 64px;
width: 570px;
background:url(button.png) no-repeat;
background-position: top;
}

.buttonverstuur span.hover { 

 position: absolute;
 display: block;
height: 64px;
 width: 570px;
background: url(button.png) no-repeat;
background-position: bottom;
}

download hier het eindresultaat:button-deel2

We kunnen ze niet weg laten, we zien ze overal

met deze tutorial kunt u in een handomdraai een new looking trendy button maken.

Ik laat u stap voor stap zien hoe de acties tot stand zijn gekomen.

als u nog vragen moest hebben gelieve mij dan te overstelpen met commentaar

Stap1-HTML

Grote knoppen zijn populair in de meeste moderne websites.

U kunt dit voor een éénvoudig project gebruiken vb. voor een bestand te downloaden.

<a href="/folder/download.zip" class="button"></a>

Stap 2 – CSS

voeg de volgende css code bij in uw HTML-document:

.button {
	width:570px;
	height:64px; /* Opgelet dit is juist de grote van één knop */
	display:block;
	background-image:url(button.png);
	background-position: top;/*dit zorgt er voor dat het juist de height pakt
en ervoor zorgt dat de boven kant alleen maar vertoond wordt*/

Stap 3 – link hover button

	.button:hover{
	 width:570px;
	 background-position: bottom;
	 height:64px;
	 background-image:url(button.png);
	}

Als u deze css code aan uw html toevoegt dan zult u zien wanneer u over “versturen” gaat dat de groene knop verschijnt.

Dit om de volgende redenen:

- background-position:bottom (dit selecteerd alleen maar de onderste waarde)

-height:64px (is de groote van de waarde die moet geselecteerd worden)

download:button

advertentie fotografie door Ed McCulloch

Elke dag schuimen we  het internet af opzoek naar dingen die in het oog springen.

Deze keer ben ik op deze fotograaf gestoten. Geboren in de jaren ‘70 en afkomstig van Salt Lake City.

Ed heeft als opleiding art and visual communications gekozen.

In zijn werken heeft hij geleerd dat in een team werken je nog grotere effecten kan bekomen.

voor meer informatie surf gerust naar ed’s website.