DM Design » firefox

Firefox implementeaza WebGL pentru afisarea graficii web

ionut.mantescu — Wed, 23 Sep 2009 10:39:26 +0000

In ultima versiune de Firefox a fost introdus modul WebGL – un modul ce utilizeaza OpenGL si JavaScript pentru a afisa grafica din paginile web. Pana acum doar Firefox are implementat WebGL, dar ne asteptam ca si celelalte browsere (Safari, Chrome si altele) sa adopte aceasta functionalitate in curand.

Mozilla Firefox a depasit Internet Explorer

ionut.mantescu — Thu, 05 Mar 2009 15:12:37 +0000

Versiunea 3 a lui Firefox a ajuns pentru prima oara la un nivel de adoptare peste cel detinut de Microsoft cu al sau Internet Explorer.

Ultimele estimari arata ca in Februarie Firefox a avut o cota de piata de 24 de procente, in timp ce Internet Explorer versiunea 6 a avut 22.6 procente.
In acest moment lideri sunt tot Microsoft cu versiunea IE 7 cu aproximativ 40.8 procente din piata, insa Firefox nu pare a se opri aici si cu siguranta in viitorul nu foarte indepartat ii va depasi pe producatorii lui Windows pe toate segmentele.

Sursa: Electronista

Sursa: Hit.ro

Creati efect de gradient la text folosind CSS

ionut.mantescu — Wed, 11 Feb 2009 11:10:25 +0000

Vreti sa creati titluri cu efect de gradient fara sa stati sa desenati de fiecare data in Photoshop? In urmatoarele randuri va voi arata cum sa creati aceasta foarte simplu utilizand doar CSS si o imagine PNG.

Ceea ce aveti nevoie este un element in heading si sa aplicati pozitia imaginii de fundal folosind proprietatea CSS position:absolute. Acest efect a fost testat pe mai multe browser-e: Firefox, Safari, Chrome, Opera, IE7, chiar si pe IE6.

Plus-uri

- Acest efect se face utilizand numai CSS, fara Javascript sau Flash. Functioneaza pe majoritatea browser-elor incluzand IE6 (necesar hack-ul PNG)
- Este perfect pentru Titluri. Nu mai trebuie sa renderizati fiecare titlu in parte cu Photoshop-ul sau alt program de grafica. Folosind metoda economisiti timp, spatiu pe server si chiar latimea de banda a internetului .
- Poate fi folosit cu orica font, iar dimensiunea fontului ramane modificabila.

Cum functioneaza?

Este foarte simplu. Practic vom aplica o imagine PNG de doar 1px latime cu (transparent) peste text.

Codul HMTL

CSS Gradient Text

Codul CSS

Elementul caruia ii vom aplica efectul este h1 si h1 span

h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

Folosirea in IE6

Din moment ce IE6 nu afiseaza PNG-24 corect, urmatorul cod este necesar pentru afisarea corecta a PNG transparente (adaugati oriunde intre si )

Versiunea JQuery (pentru adeptii javascript)

Daca nu vreti sa aveti elementele in heading, puteti folosi versiune Javascript.

Mai multe exemple:

Practic puteti aplica pe orice culoare de fundal atata timp cat culoarea de gradient este ca si fundaul.

Limitari

- Se poate folosi doar peste culori de fundal uniforme. Culoarea gradientului trebuie sa fie aceeasi cu cea de fundal.
- Hack-ul PNG este necesar pentru a functiona pe IE6.
- Daca imaginea PNG este mai inalta decat textul, nu veti mai putea selecta textul.