Kody, triki, sztuczki - Strona 35 - JavaScript, PHP, html5, CSS, Rewrite, GMap, ...

5 gru 2013

LESS i mixin z czym to się je ;)

Najpierw co to jest LESS, w skrócie taki podrasowany css 🙂

Powiedzmy że chcemy dodać w kilku elementach border, kod dla kilku przeglądarek musimy wyglądać tak:

#jakisDiv {
-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

Trochę to męczące jeśli musimy to robić w olbrzymim projekcie, kopiować za każdym razem gdzie chcemy użyć border-radius. Tutaj właśnie przychodzi nam LESS
Najpierw tworzę sobie plik style.less w którym inkluduję inne pliki less.

Wygląda to mniej-więcej tak:

@include mixin.less; // plik w którym trzymam wszystkie potrzebne kody do wygenerowania border-radius, gradientów itd.
@include reset.less;
@include nax.less;
...

LESS nie jest obsługiwanym standardem przez przeglądarki więc potrzebny nam jest CSS, ja używam Intellij IDEA gdzie ma plugin który mi generuje czystego cssa, w pracy zaś less jest generowany do postaci css po stronie serwera, można także użyć javascript więcej na http://lesscss.org/

Czytaj dalej

5 gru 2013

box-sizing co to i po co stosować?

Mały trick który działa we wszystkich przeglądarkach w tym IE8 ;).

Robimy div o wymiarach 150px na 50px. Jeżeli do niego dodamy teraz padding, powiedzmy 5px oraz border 1px solid red;

Dostaniemy tak naprawdę div o wymiarach:

150px szerokości + 5px z każdej strony + 1px z każdej strony co da nam = 162px
na wysokość podobnie:
50px + 5px z każdej strony + 1px z każdej strony co da nam = 62px

No i z naprawą tego problemu przychodzi nam właśnie box-sizing. Do całego stylu dodajemy:

.box {
  width: 150px;
  height: 50px;
  padding: 5px;
  border: 1px solid red;
  box-sizing:border-box;
}

Czytaj dalej

5 gru 2013

Dzisiejszy dzień.

var browser = function() {
  var days = ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'];
  var today = new Date();
  var msg = 'Dzisiaj jest: ' + days[today.getDay()] + ', ' + today.getDate();
  console.log(msg);
}

Wywołanie oczywiście

browser();

5 gru 2013

Spinner w czystym css3

Tworzymy div

<div class="spinner"><div class="spinner"</div></div>

A w stylach:

.spinner {
   height:20px;
   width:20px;
   margin:0px auto;
   position:relative;
   animation: rotation .6s infinite linear;
   border-left:6px solid rgba(0,174,239,.15);
   border-right:6px solid rgba(0,174,239,.15);
   border-bottom:6px solid rgba(0,174,239,.15);
   border-top:6px solid rgba(0,174,239,.8);
   border-radius:100%;
}

@-webkit-keyframes rotation {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(359deg);}
}

@-moz-keyframes rotation {
   from {-moz-transform: rotate(0deg);}
   to {-moz-transform: rotate(359deg);}
}

@-o-keyframes rotation {
   from {-o-transform: rotate(0deg);}
   to {-o-transform: rotate(359deg);}
}

@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}

5 gru 2013

Jak zorganizować sobie kod javascript.

Wstawiamy poniższy kod do osobnego pliku, powiedzmy przykład.js

var MOJEMIEJSCE = (function() {

var browser = function() {
}
var navigation = function() {
}
var footer = function() {
}

return {
init : function() {

browser();
navigation();
footer();
}
};

})();

przed końcem strony zamknięcia body

Wstawiamy

http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

następnie

przyklad.js

A nasze namespace wywołujemy przez

MOJEMIEJSCE.init();