
Jeśli JavaScript, to i CSS. Pracując z JavaScript bardzo często stykamy się także z CSS. I dzięki temu naprawdę można nabrać wprawy w używaniu CSS, nawet jeśli nie zajmujemy się bezpośrednio opracowywaniem layout’ów stron WWW czy UI aplikacji na podstawie szablonów (PSD).
CSS i JavaScript
Warto nabrać tej wprawy, gdyż poszerza nasze horyzonty, a także pomaga w opracowywaniu szybkich rozwiązań i trików.
CSS
Na dobry początek obracanie elementu (rotate) w CSS:
.rotate { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); }
Przykładowy element:
<div style="border: solid 1px red; width: 400px; height: 250px" class="rotate" id="test-div"> </div>
W tym przypadku element zostanie obrócony o 50 stopni.
Ustawianie klas CSS w JavaScript
Prawdopodobnie najbardziej popularnym zadaniem na pograniczu CSS i JavaScript jest ustawianie dynamiczne klas CSS dla elementu HTML z poziomu języka JavaScript.
W „czystym” JavaScript można to zrobić następująco, ustawiając atrybut className:
document.getElementById('test-div').className = 'nazwa_klasy_css';
Inny przykład ze starej szkoły to nadanie klasy CSS dla elementu HTML po najechaniu na niego myszą, oraz zdjęcie klasy CSS po zabraniu kursora myszy z elementu.
<div style="border: solid 1px red; width: 400px; height: 250px" id="test-div2" onmouseover=this.className='rotate'; onmouseout=this.className=''; > </div>
Ustawianie i usuwanie klas CSS dla elementów w jQuery
Dzięki jQuery zadanie to jest całkowicie bezbolesne. Ustawienie klasy CSS wykonuje metoda addClass:
$("#test-div").addClass("myClass myAnotherClass");
natomiast usunięcie klasy wykonuje się metodą removeClass:
$("#test-div").removeClass("myClass");
Można podawać jako argument wiele nazw klas, można także łączyć wywołania w łańcuchy:
$("p").removeClass("oldClass").addClass("newClass");
Powyższy kod wykona operacje dla wszystkich paragrafów w dokumencie; usunie klasę oldClass a następnie nada klasę newClass.
Ustawianie stylów (nie całych klas)
Zamiast klas CSS możemy manipulować jedynie pojedynczymi stylami.
W „czystym” JavaScript jest to nieco żmudne, na przykład:
// style obramowania elementu document.getElementById("test-div").style.border = "solid 1px #00f";
W jQuery użyjemy po prostu metody css().
Służy ona zarówno do pobierania wartości stylu dla danej właściwości, na przykład:
$('#test-div').css('border');
Jak i do ustawiania, które ma postać: $(selector).css(property, value).
Przykład – ustawienie stylu CSS w jQuery:
$('#test-div').css('border', '2px solid #ffeedd');
Aby ustawić więcej stylów CSS jednocześnie, użyjemy następującej składni: $(selector).css({property1: value, property2: value, …}), na przykład:
$('#test-div').css({'border': '0px', 'margin-top': '180px'});
Image aspect ratio
Czyli po prostu przycinanie obrazków do podanych wymiarów bez brzydkiego efektu rozciągania obrazu / deformacji. Jest to ważne przy tworzeniu w sposób dynamiczny dobrze wyglądających miniaturek / podglądów obrazków.
Poniżej ogólne wytyczne z użyciem CSS i JavaScript (jQuery).
Style CSS:
img { max-width: none; } .crop { overflow: hidden; width: 250px; height: 188px; float: left; }
Kontener:
<div id="pics"></div>
Kod JavaScript przetwarzający wymiary obrazka i ustawiający odpowiednio parametry:
var photo_src = 'http://adres-do-zdjecia.jpg'; // przetwarzanie var img = new Image(); img.src = photo_src; // ustaw atrybut źródła var ratio = img.width / img.height; var orig_ratio = 250 / 188; // zobacz klasa crop CSS if (ratio > orig_ratio) { img.height = 189; img.width = 189 * ratio; } else { img.width = 251; img.height = 251 * ratio; } img = $(img); $('#pics').append($img);
Kod JavaScript operuje na obiekcie obrazka i zajmuje się określaniem, czy ma on orientację pionową (portrait), czy też poziomą (landscape).
Efekt hover + zoom
Chodzi o operacje rozjaśnienia obrazka oraz jego delikatnego powiększenia, co daje dobrze wyglądający efekt po najechaniu myszą na obrazek.
Poniżej przykładowe rozwiązanie, dostosowane do pracy w wielu przeglądarkach:
a.image { min-height: 189px; max-height: 189px; opacity: 1; -webkit-transform: scale(1,1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 240ms; -moz-transform: scale(1,1); -moz-transition-timing-function: ease-out; -moz-transition-duration: 240ms; } a.image:hover { opacity: .8; -webkit-transform: scale(1.07,1.09); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 240ms; -moz-transform: scale(1.07,1.09); -moz-transition-timing-function: ease-out; -moz-transition-duration: 240ms; z-index: 99; }
Zakładamy że efekty dotyczą tylko obrazków znajdujących się wewnątrz linku (a.image).
Zasoby i narzędzia
Na koniec garść zasobów godnych uwagi.
CSS3Maker – jest to narzędzie online, które generuje kod CSS dla elementu na podstawie efektu, który tworzymy wizualnie. Obsługuje wiele efektów, w tym transformacje, animacje, gradienty, i inne.
URL: http://css3maker.com/index.html
CSS Menu Maker – znakomity generator menu:
W kwestii CSS możemy także śmiało polecić:
– CSS reference:
http://www.w3schools.com/cssref/default.asp
Podsumowanie
CSS i JavaScript to tematy bardzo obszerne, nawet gdy rozważamy je każdy z osobna. Połączone razem stanowią o potędze współczesnych aplikacji i stron WWW i dają programiście niezwykle duże pole do popisu.