Kategoria: CSS

22 maj 2014

mixins.less kolumny

Mały przykład jak wygenerować kolumny dla RWD

.generate-col-med(@columns, @prefix, @current: 1) when (@current =< @columns) {
  .col-@{prefix}-@{current} {
    width: (@current/@columns*100%);
  }
  .generate-col-med(@columns, @prefix, (@current + 1));
}

aby później wygenerować kolumny należy wywołać .generate-col-med

.generate-col-med(12, xm);

12 to numeracja spana, xm - nazwa która jest doklejona do stylu.

Czytaj dalej
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>
Copyright © | kodyWiG Theme