css

Bezpieczne czcionki web

Wykaz bezpiecznych czcionek do zastosowań web.   osadzanie: font-family: "Times New Roman", Times, serif;   Serif Fonts:  font-family: Georgia, serif; font-family:...

LESS

Less - dynamiczne arkusze stylów   dobre praktyki: do komentarzy używaj // zamiast /* .. */ używaj mixins z parametrami kompilując kod LESS minifikuj CSS twórz kod...

skośne, responsywne tło w stylach css

Uzyskanie skosów w responsywnym tle, na górze czy dole bloku uzyskujemy poprzez: <style>   body{     background:#e22117;     padding-top:120px;   }   section {     ...

preprocesor SASS

Syntactical Awesome StyleSheet- język skryptowy, którego kod przetwarzany jest do plików wynikowych kaskadowych arkuszy stylów - CSS. SASS można rozumieć, jako dodatkową warstwę lub...

quotes – cytaty

określenie stylu w jaki zostaje wyróżniony cytat q { quotes:"<<" ">>"; } q::before { content:open-quote; } q::after {...

counter – licznik

counter pozwala na automatyczną numerację wybranych elementów bez konieczności tworzenia z nich listy numerowanej.   resetowanie licznika by zacząć od wartości 0 przypisujemy...

outline – kontur

jest przypisywany całemu elementowi bez możliwości rozbicia na poszczególne składowe (top, left, right,...

kursor

wygląd kursora możemy określić...

obramowanie border

border: border-style none hidden solid - linia ciągła dotted - linia kropkowana dashed - linia kreskowana double - podwójna linia groove - efekt 3D z cieniem na górze ridge...

tło, background

parametry: background-color:#e22117; background-image:url(bg_pic.png); background-repeat: repeat (default) - powiela obrazek horyzontalnie i wertykalnie repeat-x - powiela...

listy numerowane, punktowane

listy numerowane, punktowane, definicji. określamy: list-style-type - typ listy numerowanej lower-roman - cyfry rzymskie małe upper-roman - cyfry rzymskie duże decimal - cyfry...

box-model – box-sizing

wymiarowanie elementów. box-sizing: content-box -> wysokość i szerokość (min/max wysokość, szerokość) kontentu bez wliczania ramki, dopełnienia i marginesów (border, padding,...

tekst na stronie

Większość przeglądarek ma obecnie ustawioną wielkość bazową czcionki na 16px.   Jednostki tekstu: % w elemencie body określamy wielkość bazowa -> font-size:100% - czyli...

box-shadow

wewnętrzny i zewnętrzny   -moz-box-shadow:inset 0px 0px 0px 10px rgba(235,240,244,1); -webkit-box-shadow:inset 0px 0px 0px 10px rgba(235,240,244,1); box-shadow:inset 0px 0px 0px 10px...