css

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...

::after / ::before

pseudoelementy pozwalające na zamieszczenie zawartości na stronie bez potrzeby ingerencji w kod html, w zawiązku z czym nie pojawia się w DOM. ::before przed określonym elementem ::after po...

Przycinanie obrazka

Przycinanie obrazka w kodzie css dzięki parametrowi clip. <style> img { position: absolute; clip:...

ukrywanie

ukrywanie elementów poprzez styl visibility i jego...

css pozycjonowanie

position: static absolute relative fixed wartości: top right bottom left Kolejność nakładanych warstw: określona przez kolejność w kodzie, wyższe elementy są...

style css Safari i IOS

dodanie klasy tylko dla safari lub IOS:   if(navigator.userAgent.indexOf('Mac') > 0) $('.mybox').addClass('mac-os'); if(navigator.userAgent.indexOf('Safari') >...

Podwójny napis – text shadow

text-shadow: 2px 5px 0 rgba(0, 0, 0, 0.2); WHISKEY IN THE JAR   text-shadow: -2px -1px 0px rgba(242, 201, 9, 1); WHISKEY IN THE JAR   Ciekawy generator text shadow:...

Mobile menu

tworzymy mobilne menu z fajnym efektem po najechaniu na przycisk i otwarciu menu mobilnego. kod html w wersji desktop: <!-- header section --> <section...

Wymiary elementów

width min-width max-width height min-height max-height resize - pozwala na zmianę wymiarów elementu przez użytkownika, musi być użyty wraz z overflow:...

css3

css3 - Cascading Style Sheets www.css3.info   border image - tworzenie ramki z obrazka box shadow - tworzenie cieni...

gradientowe ramki

http://www.hongkiat.com/blog/css-gradient-border/ padding: 2rem 2rem 0.6rem 2rem; background: repeating-linear-gradient(45deg, transparent, transparent 25px, gray 25px, gray 50px); border:...

stały background na całym tle strony

background-image:url(images/bg_page.jpg); background-repeat:no-repeat; background-position:top left; background-size:cover; -webkit-background-size: cover; -moz-background-size:...

flexbox

container / parent display flex inline-flex flex-direction row row-reverse column column-reverse justify-content center flex-end flex-start...

bootstrap

bootstrap 5 builder bootstrap 3 tips and tricks reorder css columns bootstrap lightbox bootstrap theming responsive...

Środkowanie elementu w bloku

środkowanie elementu horyzontalne w position absolute: .element { margin-left: auto; margin-right: auto; left: 0; right: 0; } środkowanie elementu vertykalne w position...

Co jeszcze Cię interesuje?

Wordpress css JavaScript font jQuery html custom post css3 ACF html5 web development sass mobile php woocommerce vue form image menu biblioteka responsive inspiration plugins seo color post user page data base git webflow design sketch link icon svg table tools query_posts() align admin React background tag https snipets npm grid ai WPCF7