Zi si noapte folosind JavaScript si jQuery

flash, functii javascript, invata Javascript, invata jQuery, javascript, jQuery

Anul trecut facusem in Flash o aplicatie simpla care isi schimba imaginea de fundal in functie de ora utilizatorului ( day and night Flash header ).

Acum am fost nevoit sa gasesc o metoda care sa faca acelasi lucru dar sa poata fi implementata fara Flash, folosind doar JavaScript. Sa vedem ce solutie am gasit…

In primul rand vom include tot codul JS intr-o functie care va returna true (zi) sau false (noapte).

if(verificaOra()) {
	$('body').addClass('zi');
} else {
	$('body').addClass('noapte');
}

Daca functia va returna true, folosind jQuery vom atribui clasa .zi body-ului. Daca va returna false vom atribui clasa .noapte.
citeste restul articolului

Static FBML

css, facebook, layout html, Learn CSS, Learn HTML, pagina facebook, static FBML

Astazi ne vom ocupa de aranjarea unei pagini pe Facebook. Nu am sa incep cu povesti despre cum sa faceti o pagina pe Facebook ci am sa va explic direct cum puteti scoate in evidenta acea pagina.

Aplicatia de care aveti nevoie se numeste Static FBML. Aceasta aplicatie va permite sa inserati cod HTML in pagina voastra.

Este foarte simplu, nu trebuie decat sa urcati pe un server imaginile pe care vreti sa le afisati si fisierul .css.

Sa vedem cateva elemente de baza care vor face pagina mai interactiva.
citeste restul articolului

Schimba fisierul CSS folosind jQuery

css, efecte jQuery, invata jQuery, jQuery, Learn CSS

Folosind jQuery putem face o multime de lucruri dupa cum am vazut si in articolele precedente. Astazi va voi prezenta o metoda foarte simpla de a schimba fisierul CSS cu unul nou, fara a reincarca intreaga pagina.

In primul rand sa scriem 2 stiluri diferite:

1. normal.css

.box {
	padding: 10px;
	background: #f2f4f9;
	border: 2px solid #555;
	z-index: 1;
}

.box h1 {
	font-size: 22px;
	margin: 10px 0 10px 0;
	padding: 0;
	width: 100%;
	text-align: center;
	text-shadow: 1px 1px 1px #555;
}

citeste restul articolului

Efecte CSS3

css, css3, efecte CSS3, Learn CSS, noutati CSS3

Va voi prezenta cateva efecte noi aduse de CSS3. Pentru a le putea vedea/folosi va trebui sa aveti un browser care sa stie sa interpreteze CSS3.

1. Umbra text CSS3

Sintaxa este foarte simpla si trebuie atribuita elementului pentru care doriti sa afisati umbra.

text-shadow: pozitiaX pozitiaY razaBlur culoare;

Sa luam un exemplu.

text-shadow: 2px 2px 2px #000;

Rezultatul va fi:

Acest text va avea o umbra.

citeste restul articolului

Google Font API

css, custom font, Google API, Learn CSS

Pe langa metoda clasica de custom font folosind Cufon, astazi am sa va prezint si metoda prin API-ul de la Google.

Pentru a implementa un font custom prin API-ul de fonturi de la Google trebuie sa respectati 2 chestiuni:

1. Includerea fisierului in pagina

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=NUME FONT" />

2. Atasarea fontului pentru elementele din pagina

body {
  font-family: 'NUME FONT', serif;
}

Lista completa de fonturi gratuite oferite de Google o puteti gasi la adresa aceasta – http://www.google.com/webfonts

jQuery tooltip cu imagini

animatii jQuery, functii javascript, invata Javascript, invata jQuery, javascript, jQuery

Pentru ca am vorbit mai devreme de manipularea imaginilor folosind jQuery, acum va voi prezenta o metoda simpla de a genera un tooltip care sa contina o imagine. Puteti folosi acest efect pentru a adauga un plus de unicitate site-ului vostru.

Vom avea nevoie de o structura HTML ca aceasta:

[...]
<a class="a-tt" href="img-mare.jpg"><img src="img-mic.jpg" class="img-tt" width="250" height="250" /></a>
[...]

Acum sa aranjam putin elementele in pagina.

.a-tt {
	display: block;
	width: 250px;
	height: 250px;
	position: relative;
}

Este important sa setam pozitia relativa pentru elementul a.
citeste restul articolului

Simple CSS Menu

css, html, Learn CSS, Learn HTML, meniu html

Sa invatam cum sa construim un meniu simplu HTML folosindu-ne doar de declaratii CSS. Vom folosi pentru partea de HTML o lista simpla si cateva link-uri.

Structura HTML a meniului CSS este urmatoarea.

<ul>
	<li><a href="#">MENIU</a></li>
	<li><a href="#">MENIU</a></li>
	<li><a href="#">MENIU</a></li>
	<li><a href="#">MENIU</a></li>
</ul>

In prima faza, pentru partea de CSS, va trebui sa declaram parametrii body-ului.

body {
	margin: 0;
	font-family: Verdana, Arial, 'Times New Roman';
}

citeste restul articolului