Na pograniczu CSS i JavaScript

javascript-html5-tutorial.pl

Listopad 8th, 2013

Dominik-W

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.

CSS3 Maker

URL: http://css3maker.com/index.html

CSS Menu Maker – znakomity generator menu:

http://cssmenumaker.com/

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.