Dark Wood

Custom input field

admin — Mon, 09 May 2011 18:48:45 +0000

Formularele de contact au devenit o prezenta constanta in cadrul paginilor web, ele facilitand comunicarea intre dintre user si administratorul site-ului. Daca despre trimiterea de date ,cu ajutorul unui formular, am mai scris, despre customizarea grafica a acestora voi pomeni in articolul de fata. Mai exact, va voi prezenta o metoda simpla de a personaliza campurile de tip text, acestea fiind si cele mai des intalnite.

Customizarea se poate face prin doua abordari: direct pe input, sau aplicand CSS pe input si pe div-ul care contine campul respectiv. In randurile de mai jos voi descrie a doua abordare, ea putand fi usor adaptata la alte situatii.

Codul html ar trebui sa arate in felul urmator:

Daca lasam “nestilizat” acest cod, input-ul se va afisa diferit in browsere – inaltimi diferite, border diferit, etc. (cu cele mai mari probleme in IE, bineinteles). Ca sa obtinem un rezultat asemanator in toate browserele, si pentru a realiza un formular cu design frumos, vom apela la putin CSS:

Mai intai vom formata div-ul container, adaugand-ui background-ul custom:

.searchForm{background: url(../images/input.jpg) no-repeat center; float: left; width:340px; height: 24px; }

Apoi vom reseta campul de input text, anuland-ui border-ul si background-ul pe care le lua default:

.searchForm input{border:0 none; border-collapse:collapse; background: none;}

Putem adauga padding, font-size si line-height pentru un rezultat mai bun. Asemanator se pot personaliza si field-urile de tip textarea sau butoanele de send si reset. Mai greu de customizat sunt drop-down-urile si campurile de tip browse file, dar nimic nu este imposibil, cu putin CSS si JavaScript.

Spor la treaba si la web design!

Div cu height 1px in IE6

admin — Thu, 31 Mar 2011 19:00:48 +0000

Sunt multe ocaziile in care avem nevoie de div-uri cu o inaltime sub 10 pixeli (pentru a face niste separatoare, de exemplu).

Sa zicem ca avem un div cu clasa “numediv” :

Acestei clase ii asociem o propietate css:

.numediv{width: 100px; height: 1px; background: #cccccc;}

Daca testam pagina cu Mozilla, Chrome, sau IE7 & IE8, se va afisa o linie gri de un pixel inaltime si 100 latime.
In IE6 insa, se va afisa un div cu inaltimea de 10 px. Cauza acestui bug este preformatarea textului de catre browser.
Astfel, default, IE6 va pune un font size de 10px.
Pentru a putea formata corect div-ul, trebuie sa resetam css-ul. Acest lucru se poate realiza cu ajutorul unui reset.css (aceasta metoda aplicandu-se la tot site-ul), sau se poate aplica punctual, doar la clasele care necesita acest lucru.
Clasa din exemplul nostru va arata in felul urmator:

.numediv{width: 100px; height: 1px; background: #cccccc; font-size: 1px;}

Daca problema persista, putem adauga la css si un “line-height: 1px;”

Spor la treaba si la web design!

Decuparea unei poze cu “paths” in Photoshop

admin — Wed, 10 Nov 2010 20:34:53 +0000

In webdesign decupatul pozelor ocupa un loc destul de important, pentru simplul motiv ca pozele sunt un element de baza al paginilor web, si cum nu toate imaginile sunt cum ne-am dori noi, ele trebuiesc prelucrate intr-un program de grafica. Decuparea pozelor cu ajutorul Photoshop-ului se poate face in mai multe feluri, totul depinzand de ceea ce dorim sa facem cu decupajul ulterior. Cea mai precisa metoda de decupare, dupa parerea mea, este cea cu cai – sau paths.
Pentru inceput vom aduce o poza in Photoshop, poza din care vrem sa decupam ceva; dupa ce am importat poza trebuie sa setam tool-ul pentru decupat: acest tool se numeste “pen tool” si se poate activa apasand tasta “p” sau din meniul din stanga al programului. Odata ce avem pen-tool selectat veti observa in partea de sus setarile tool-ului, dupa cum urmeaza in imaginea de mai jos:

Indata ce am facut setarile pentru decupare, putem incepe. De obicei aleg ca loc de start, un punct pe o linie dreapta. Trebuie retinut ca linia pe care o vom trasa va reprezenta decupajul dorit de noi.
Vom avea de a face cu doua situatii: linii drepte si linii curbe.
Pentru a trasa linii drepte, plasam “penita” deasupra punctului de pornire, dam click, apoi dam urmatorul click la celalalt capat al liniei drepte.

In continuare, va trebui sa trasam o linie curba: pentru a realiza acest lucru, dam click in urmatorul punct de pe poza si tinand apasat pe tasta stanga a mouse-ului “tragem” de “ancore” pana cand calea se aliniaza cu decupajul.

Dupa ce trasati o linie curba aveti doua optiuni: sa trasati in continuare printr-un simplu click, si atunci calea se va “mula” singura dupa un contur rotund, sau sa tineti apasat tasta “ALT” si apoi sa dati click pe ultimul nod pus; acest lucru va “reseta” nodul, putand continua decupajul in mod normal.

Odata terminat decupajul, va trebui sa salvati calea. In partea dreapta a programului veti gasi meniul “Paths”

care poate fi activat si din meniul “window”. Odata intrati in acest meniu, vom observa un “Work Path”

Un dublu-click pe el si calea este salvata (sub ce nume vrem noi). Acum numai ramane decat sa facem decupajul in sine. Selectam calea abia facuta prin comanda “Ctrl+Click” apoi mergem in meniul “Layers” selectam imaginea ce trebuie decupata si tastam “Ctrl+J” (sau mergem in meniul “Layer” de sus si click-am pe “New” si apoi “Layer via Copy”)

Layer-ul nou obtinut este chiar decupajul nostru. Pentru al vizualiza mai usor, putem dezactiva layer-ul cu imaginea initiala, dupa cum puteti vedea si mai sus.

Spor la treba si la web design!