css

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

środkowanie treści w responsywnym kwadratowym bloku

.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

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

::selection{ background: #38afaf; color: #fff; } ::-moz-selection { background: #38afaf; /* Firefox...

ułozenie tekstu wysrodkowanego względem wysokości

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