Sztuczki i triki w html, css i jQuery, część 1.

Każdy webmaster po latach kodowania, tworzenia i pisania skryptów uczy się pewnych „sztuczek”. Jedni je znają i uważają za coś prostego czy oczywistego, a inni nie mają o nich pojęcia. Przybliżę teraz kilka takich trików, które przychodzą mi do głowy.

Pierwsza litera.
Chcemy, aby pierwsza litera w akapicie się wyróżniała. Jak? Wystarczy w css dodać coś takiego:

p:first-letter {color:#ff0000; font-size:xx-large;}

Cień pod napisami.
Dodajmy cień pod napisami, aby nadać tekstowi „elegancji”.

h3 {color: #BDD6FF; text-shadow: black 0.1em 0.1em 0.2em}
p {color: #222; text-shadow: 0px 2px 3px #555;}

Aktywne linki – brak kropek.
Coś prostego, ale jak często ludzie o tym zapominają. Po kliknięciu w link, pojawiają się wokół niego kropki. Brzydko to wygląda, prawda? Usuńmy to.

a:focus {outline: none;}

Krycie.
Sztuczka, jak zrobić obrazek przezroczystym. Często można się z takim czymś spotkać przy obrazkach „partnerów” czy „wymianie banerów”. Dodajemy do tego hover, ustawiamy na 100 i mamy bardzo ciekawy efekt.

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

A może lepiej zrobić to w jQuery? Nie ma problemu. Skrypt wygląda tak:

$('.icon_set').animate({'opacity' : 0.2}).hover(function() {
	$(this).animate({'opacity' : 1});
}, function() {
	$(this).animate({'opacity' : 0.2});
});

A to klasa, jaką dodajemy do obrazków:

class='icon_set'

Wysyłanie formularza klikając w link.
Zastosowań takiego rozwiązania jest naprawdę sporo. Skrypt wygląda tak:

jQuery('a.Send').bind('click', function() {
	var FormSubmitID = (this.id).split('_');
	jQuery('#'+FormSubmitID[1]).submit();
});

A oto instrukcja użycia:

Aby zadziałał kod jQuery należy nadać id dla formularza <form id="MojFormularz">,
oraz utworzyć link <a href="javascrip:void(0)" id="Wyslij_MojFormularz" class="Send">

Podgląd na żywo.
Chcesz, aby użytkownik na bieżąco widział, co wpisuje w jakimś polu? To naprawdę proste:

$(".tytul").keyup(function() {
	var word=$(this).val();
	$(".tytul_podglad").html(word);
	return false;
});

A kod html wygląda tak:

<input type="text" name="tytul" class="tytul" />
Tytul: <span class="tytul_podglad"></span>

To tylko kilka sztuczek, które akurat teraz sobie przypomniałem. Gdy w zakątkach głowy znajdę kolejne, to powstanie druga część wpisu. Jednocześnie zapraszam do dzielenia się spostrzeżeniami w komentarzach. Gdyby ktoś miał jakiś problem lub szukał jakiegoś rozwiązania, to proszę dać znać. Postaram się pomóc.

{ 2 komentarze… przeczytaj je poniżej albo dodaj swój }

filip 23 maja, 2012 o 11:05

brzydkie buttony wysyłania komentarza masz.. ;))

Odpowiedz

Mateusz Kapuściński 23 maja, 2012 o 11:26

Poprawione. Dziękuję za zwrócenie uwagi 🙂

Odpowiedz

Odpowiedź