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 }
brzydkie buttony wysyłania komentarza masz.. ;))
Poprawione. Dziękuję za zwrócenie uwagi 🙂