css
::after / ::before
css3
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
css
Przycinanie obrazka w kodzie css dzięki parametrowi clip. <style> img { position: absolute; clip:...
css pozycjonowanie
css
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
css safari
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
font
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
menu mobile
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
css3 - Cascading Style Sheets www.css3.info border image - tworzenie ramki z obrazka box shadow - tworzenie cieni...
gradientowe ramki
css3
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
css
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
css
container / parent display flex inline-flex flex-direction row row-reverse column column-reverse justify-content center flex-end flex-start...
bootstrap
bootstrap css
bootstrap 5 builder bootstrap 3 tips and tricks reorder css columns bootstrap lightbox bootstrap theming responsive...
Środkowanie elementu w bloku
css
środkowanie elementu horyzontalne w position absolute: .element { margin-left: auto; margin-right: auto; left: 0; right: 0; } środkowanie elementu vertykalne w position...