23 lut 2014

Ukrycie maila przed botami w css

Mały tirck, ukrycie maila przed botami w czystym css, działa również w IE8+

div.address:before {
content: attr(data-ea) "@" attr(data-eb);
}
<div class="address" data-ea="test" data-eb="domena.pl"></div>

Otrzymujemy mail test@domena.pl proste i czyste rozwiązanie.

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/

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;
}
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);}
}