Tool online pentru realizarea sprite-urilor

Acest post este dedicat CSS-istilor care folosesc Sprite-uri. Am sa va dau un link catre un tool online pentru realizarea sprite-urilor cu usurinta. El va genera automat coordonatele pentru fiecare sprite in parte… Incercati-l si dati-va cu parerea. Mie mi se pare absolut genial.

Link: http://www.spritecow.com/

 

Anunțuri

Text cu gradient pe el – CSS

Aceasta solutie este  disponibila doar pentru WebKit (Google Chrome si Safari), dar este cea mai usoara si curata metoda de a obtine un text cu gradient pe el. Sper ca viitoarele versiuni de Firefox sa stie de aceasta proprietate de CSS3.

h1 {
font-size: 72px;
background: -webkit-gradient(linear, left top, left bottom,
             from(#eee), to(#333));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

@font-face -> Custom fonts pe site-ul tau

In primul rand, pentru a folosi un custom font pe site-ul dvs, trebuie sa il convertiti pentru a putea fi interpretat de toate browserele importante (FF, Chrome, Safari, IE). Pentru a face asta, in primul rand trebuie sa aveti fisierul cu fontul respectiv (.ttf/.otf) si apoi intrati pe Font Squirrel si convertiti-l. Presupun ca nu trebuie sa explic cum folosesti site-ul respectiv. (pentru cei ce nu se descurca, exista un buton destul de mare si de vizibil pe care scrie Add Fonts). Mai departe va scriu snippet-ul CSS si pentru HTML.

CSS

@font-face {         font-family:'MyFontFamily';
            src: url('myfont-webfont.eot?') format('eot'),
                 url('myfont-webfont.woff') format('woff'),
                 url('myfont-webfont.ttf')  format('truetype'),
                 url('myfont-webfont.svg#svgFontName') format('svg');
 }

HTML

body {        font-family:'MyFontFamily',Fallback, sans-serif;}