DM Design » fundal

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.

Creati butoane deosebite folosind CSS si metoda sliding doors

ionut.mantescu — Tue, 10 Feb 2009 14:38:38 +0000

In acest articol va voi arata cum sa creati butoane folosind CSS si metoda sliding doors. Este mult mai bine sa folositi aceasta metoda decat sa folositi butoane de tip imagine pentru ca se poate aplica stilul oricarui link si in acelasi timp nu este nevoie sa creati cate o imagine pentru fiecare buton in parte.

Ce este metoda sliding doors?

Aceasta metoda este foarte simpla. Daca vrem sa avem un buton a carui latime sa fie dinamica, va trebui sa gasim o metoda sa il micsoram sau marim pe orizontala. Vom face asta folosind doua imagini care vor defini butonul: una pentru partea stanga si una pentru partea dreapta ca in exemplul urmator.

Imaginea mai mica din partea dreapta va fi pozitionata deasupra celei din stanga (de aceea metoda se numeste sliding doors). Cu cat imagine din dreapta va fi pozitionata spre partea stanga, cu atat butonul va fi mai mic si invers.

Crearea butonului

Pentru inceput sa vedem codul HTML care simuleaza butonul. Vom avea elementul in interiorul elementului . Elementul contine imaginea din stanga, cea mare si textul. Latimea butonului va fi data de latimea textului.

[code="html"]Submit[/code]

Acum o sa vedem codul CSS. Clasa .button care va fi aplicata elementului . Clasa .button span va fi aplicata elementului din elementul .
De asemenea vom avea si clasa .button:hover span care o sa schimbe stilul textului din elementul .

Si.. cam asta este Simplu.. nu?

[code="css"]a.button {
/* pozitionarea imaginii din dreapta */
background: transparent url('button_right.png') no-repeat scroll top right;
display: block;
float: left;
height: 32px; /* schimbati valoare in functie de inaltimea imaginii */
margin-right: 6px;
padding-right: 20px; /* in functie de latimea imaginii din dreapta */
/* Proprietati text */
text-decoration: none;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
a.button span {
/* Fundal imagine stanga */
background: transparent url('button_left.png') no-repeat;
display: block;
line-height: 22px; /* in functie de inaltimea butonului */
padding: 7px 0 5px 18px;
}
a.button:hover span{
text-decoration:underline;
}[/code]

Rezultatul va arata ca in imaginea de mai jos.

Imagini

Am mai facut pentru voi cateva imagini pe care sa le puteti folosi impreuna cu scriptul de mai sus.

Usor nu? Spor la treaba!

Extragerea delatiilor complexe din imagini in Photoshop

ionut.mantescu — Fri, 02 Jan 2009 18:03:28 +0000

Ati incercat vreodata sa extrageti parul unui model dintr-o imagine folosind Pen Tool?… Eu unul am renuntat dupa cateva minute si am cautat o alta metoda prin care sa fac asta. Acum asa va arat in acest tutorial si voua cum sa faceti.

Pasul 1

Deschideti o imagine la alegerea voastra. Eu am ales pe aceasta.

Pasul 2

Mergeti la Channels Palette si vedeti care dintre canale are contrastul cel mai puternic dintre obiectului pe care vreti sa-l extrageti din imagine (in acest caz: parul) si fundal. Faceti o copie a acelui layer si aveti grija ca layer-ul sa nu fie ascuns.

Pasul 3

Apasati Ctrl+L pentru a deschide Levels Window ajustati contrastul intre fundal si obiectul care va fi extras. Trebuie sa aveti grija, pentru ca daca va fi foarte puternic, nu vom putea extrage obiectele mici.

Pasul 4

Acum folositi Lasso Tool (M) pentru a selecta partile ramase deschise in interiorul obiectului. In exemplul meu, am facut selectia fetei modelului.

Pasul 5

Umpleti selectia cu negru.

Pasul 6

Ctrl+Click pe canal in Channels Palette pentru a face selectia. Click pe RGB Channel si acum puteti face copy&paste la selectie intr-un nou fisier.

Acum puteti folosi obiectul pentru orice tip de proiect. Asa arata daca folosim un fundal alb: