css
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 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...
środkowanie treści w responsywnym kwadratowym bloku
align css responsive
.porto-single-full{ width:50%; float:left; overflow: hidden; padding-bottom: 50%; position: relative; background-color:red; background-position: center center; background-repeat:...
alternatywne style css
css
Aby użytkownik za pomocą opcji przeglądarki (widok/style) mógł wybrać dowolny z zaproponowanych styli strony należy użyć alternatywnych styli: <link...
kolor zaznaczenia tekstu / selection color
color font
::selection{ background: #38afaf; color: #fff; } ::-moz-selection { background: #38afaf; /* Firefox...
ułozenie tekstu wysrodkowanego względem wysokości
font
.room-name{ display: table; float:left; width: 81px; height: 73px; font-size:14px; padding-left:17px; } .room-name-inner{ display: table-cell; vertical-align: middle;...