Jak stworzyć ładne, zaokrąglone przyciski za pomocą CSS? O wiele lepiej jest skorzystać z techniki sliding doors, niż z obrazkowego tła dla przycisków, ponieważ można zastosować dowolny styl linku i jednocześnie nie ma potrzeby tworzenia nowego obrazu dla szerszego czy węższego przycisku.
Na Gracza
Gościu, siądź przy pececie i odpocznij sobie.
Nie spotka cię nuda przyrzekam ja tobie.
I choć wzrok ci osłabnie, słuch zacznie szwankować,
Spędzonych tu godzin nie będziesz żałować.
Kiedy spacja wysiądzie i mysz się zepsuje,
Tylko wyskok do sklepu, ciebie poratuje.
Mysz, choćby najlepsza, myszą być przestaje,
Gdy już klikać nie może i kulka jej staje.
A kiedy wreszcie zatłuczesz, smoki, złe potwory.
Weź się do roboty, zwyrodnialcu chory.
Joystick wyrzuć przez okno, mysz utop w sedesie.
Monitor daj komuś, a gry zakop w lesie.
Prosty sposób na pokazywanie i ukrywanie treści z jquery
Gdy chcemy aby fragment tekstu był domyślnie ukryty oraz by stworzyć link pokazujący i ukrywający dany fragment, możemy posłużyć się następującym kodem:
$(document).ready(function() {
// Teksty linku pokaż/ukryj
var showText="Pokaż";
var hideText="Ukryj";
// dodanie linka przed ukrytym elementem
$("#hide_this").before("<p><a href='#' id='toggle_link'>"+showText+"</a></p>");
// ukrycie treści
$('#hide_this').hide();
// przechwycenie kliknięcia na linku
$('a#toggle_link').click(function() {
// zmiana tekstu linka
if ($('a#toggle_link').text()==showText) {
$('a#toggle_link').text(hideText);
}else {
$('a#toggle_link').text(showText);
}
$('#hide_this').toggle('slow');
return false;
});
});
Dodajemy link przed kontenerem, ukrywamy kontener, i używamy if-a aby zmieniać tekst linka. Kod ukrywa kontener o id = „hide_this”. Użytkownikom z wyłączonym javascriptem pokaże się ukrywany tekst oraz nie pokaże się link do pokazywania/ukrywania kontenera.
Jak usunąć pomarańczowy outline w Chrome
Podobny problem występuje Safari (niebieski outline). Aby szybko się go pozbyć, w dowolnej przeglądarce, umieszczamy w pliku css następujący selector:
*:focus {
outline: none;
}
Powyższy selektor sprawia że dowolny elemnt w stanie focus nie posiada dookoła siebie outline. Należy pamiętać że działa on na każdy element na stronie.
LESS.js w trybie śledzenia zmian – watch mode
Gdy uruchamiamy less.js w przeglądarkach wspierających HTML5, cachują one wygenerowany CSS. Nie jest to działanie pożądane podczas prac developerskich, gdy chcemy na bierząco widzieć wprowadzane zmiany.
Poniższe kilka liniejek pozwala załadować less.js w trybie czuwania i developerskim. W trybie czuwania style CSS są automatycznie odświeżane podczas zapisu pliku less. Tryb developerski powoduje, że style nie są cachowane przez przeglądarkę.
<script type="text/javascript"> less.env = "development"; less.watch(); </script>
Należy oczywiście usunąć powyższy kod przy przenoszeniu produktu na emisję. Można oczywiści wpisać te polecenia do konsoli, gdy potrzebujemy coś przetestować.
