Astăzi sunt mai darnic decât de obicei în ceea ce priveşte CSS-ul. După ce mai devreme am scris un mic tutorial, m-am apucat de lucru. Şi când testam un formular în Safari am observat că resize-ul de la un textarea este un pic inestetic. La fel şi când un element de formular are focus, capătă un mic glow albăstrui. E cool, dar uneori nu dă bine în design.

Pentru a scoate acel glow, se adaugă în css:

1

input,textarea {outline:none}

Pentru redimensionarea textarea, rezolvarea este stupid de simplă:

1

textarea {resize:none}

Nu-i aşa că e simplu?

Am observat că sunt destul de mulţi programatori în devenire ce nu ştiu (sau întâmpină greutăţi) să facă o bară de navigare cu fundal diferit la hover. Este o metodă ce o folosesc foarte des, fără să am probleme în diferite browsere.

PASUL I

Meniul propriu zis este realizat folosind o listă neordonată:

1
2
3
4
5
6

<ul id="slidingDemo">
	<li><a href="#"><span>Home</span></a></li>
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Faq</span></a></li>
	<li><a href="#"><span>Contact</span></a></li>
</ul>

Primul pas este aşezarea orizontală a listei:

1
2
3
4
5

#slidingDemo li{
	list-style:none;
	float:left;
	margin:0 10px;
}

Întrucât IE6 tratează un pic diferit float-urile şi marginile, adăugăm şi

1

* html #slidingDemo li {display:inline}

Este un hack ce este interpretat doar de IE6, neafectând funcţionarea în browserele adevărate.

PASUL II

Imaginea de fundal trebuie să fie mai lată decât textul şi este necesar să aibe două „stări” (normal şi hover), după care purcedem la stilizarea link-urilor.

1
2
3
4
5
6
7
8
9

#slidingDemo li a{
	display:block;
	background:url(buton.gif) no-repeat left top;
	height:26px;
	padding-left:10px;
	color:#fff;
	font:700 .88em/26px Arial, Helvetica, sans-serif;
	text-decoration:none;
}

(Mai mult…)

http://reference.sitepoint.com/

Foarte frumos documentat şi cu siguranţă foarte util pentru începători. Enjoy!

Dacă îţi place să intri pe multe blog-uri noi şi ai mereu ceva de comentat, probabil te-ai săturat să tot bagi numele, adresa de email şi adresa site-ului tău. Pentru task-uri simple, nişte băieţi deştepţi au inventat bookmarklets. Pe scurt, este o secvenţă de javascript adăugată în meniul favorites (bookmarks) ce se poate executa printr-un simplu click.

Eu unul cum intru în categoria de mai sus, am făcut un mic script (banal) pentru a completa automat aceste câmpuri cu datele mele.

Doar pentru wordpress:

javascript:document.getElementById('author').value='numele tau'; document.getElementById('email').value='adresa@ta'; document.getElementById('url').value='blog.iamntz.com'; void(null)

Doar pentru blogspot (trebuie bifat nickname întâi)

javascript:document.getElementById('uname').value='numele tau'; document.getElementById('uurl').value='blog.iamntz.com'; void(null)

Pentru ambele:

javascript:try {document.getElementById('author').value='numele tau'; document.getElementById('email').value='adresa@ta'; document.getElementById('url').value='blog.iamntz.com'; void(null)} catch(err){};try{document.getElementById('uname').value='numele tau'; document.getElementById('uurl').value='blog.iamntz.com'; void(null)} catch(err){};

Cum se foloseşte?

În Firefox du-te în Bookmars->Organize bookmarks -> New bookmarks (asta e un icon în stânga sus).

Introduci numele bookmarkletului în input-ul Name iar în input-ul Location adaugi codul de mai sus (este pe un singur rând), făcând modificările de rigoare. Apeşi OK si gata. Ai un bookmarklet util ce merge pe majoritatea blogurilor bazate pe Wordpress unde de fiecare dată când apeşi pe el, câmpurile de la comentarii se vor completa cu datele tale.

UPDATE: a fost o mică problemă cu ghilimele puse aiurea de Wordpress. Dacă ai încercat şi nu a mers, mai încearcă o dată. Cu siguranţă va funcţiona.

UPDATE2: a apărut şi versiunea pentru blogspot

O colecţie cu cele mai tari tutoriale pentru Photoshop, pe Smashing. Dacă nu eşti abonat, îţi recomand să o faci deoarece scriu constant şi au articole de calitate. Enjoy