Grzesiek - Strona 23 - Kody, triki, sztuczki

2 mar 2014

Skrócenie zbyt długiego tekstu za pomocą CSS

Aby skrócić element do pewnej wielkości musi być on elementem blokowym, można nadać mu oczywiście właściwość block - display:block lub display: inline-block;
Powiedzmy że mamy div o wymiarach 200px szerokości, w którym znajduje się zbyt długi tekst który nie chcemy aby się załamywał do następnej linii a jedynie ucinał i na końcu tekstu pojawiły się trzy kropki "..."

.cut-string {
   width: 200px;
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

<div class="cut-string">Jakiś sobie tekst który jest za dług</div>

Po użyciu tego stylu otrzymujemy "Jakiś sobie tekst który jest z..."

Polecam również lekką bibliotekę do skracania tekstów w wielu liniach, ale i nie tylko. Za jej pomocą można skracać również tabele, elementy list li itd. zerknij może Ci się przyda show-more

27 lut 2014

SVG animacja

Najpierw styl którym nadajemy kolor wykresów.

<style>
    rect {
        fill:red;
    }
</style>

Teraz umieszczamy svg w stronie.

<svg width="500px" height="300px">
    <g transform="scale(1, -1) translate(0, -300)">
        <rect x="0" y="0" height="30%" width="15%">
            <animate attributeName="height" from="0" to="30%" dur=".5s"></animate>
        </rect>
        <rect x="20%" y="0" height="10%" width="15%">
            <animate attributeName="height" from="0" to="10%" dur=".5s"></animate>
        </rect>
        <rect x="40%" y="0" height="20%" width="15%">
            <animate attributeName="height" from="0" to="20%" dur=".5s"></animate>
        </rect>
        <rect x="60%" y="0" height="70%" width="15%">
            <animate attributeName="height" from="0" to="70%" dur=".5s"></animate>
        </rect>
        <rect x="80%" y="0" height="40%" width="15%">
            <animate attributeName="height" from="0" to="40%" dur=".5s"></animate>
        </rect>

    </g>
</svg>

Czytaj dalej

23 lut 2014

Div na środku strony w css bez javascriptu

I bez javascriptu można coś wycentrować 😉
Czy to na całej stronie czy w jakimś div, działa elegancko również w IE8

html,body {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid blue;
}

.content {
  position: relative;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  width: 100%;
  border: 1px solid red;
}

.center {
  position: absolute;
  width: 250px;
  height: 250px;
  border: 1px solid #5f5f5f;
  background-color: #fff;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  box-shadow: 1px 1px 8px #888;
  padding: 20px;
}

<div class="content">
   <div class="center">i mamy okno na środku strony bez javascript</div>
</div>

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/

Czytaj dalej