CSS

Facebook Likebox responsive

#fb-root {
  display: none;
}

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
  width: 100% !important;
}

FORM INPUT

Placeholder color:

::-webkit-input-placeholder { /* WebKit browsers */ color: #fff; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #fff; }
::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #fff; }
:-ms-input-placeholder { /* Internet Explorer 10+ */color: #fff; }

Rumeno ozadje na autocomplete input-u:

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

NTH-CHILD

Prvi element:

li:first-child

Zadnji element:

li:last-child

Lihi elementi:

li:nth-child(odd)

Sodi elementi:

li:nth-child(even)

Vsak četrti element:

4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16

ul li:nth-child(4n)

Prvih 5 elementov:

ul li:nth-child(-n+5)

Vir: https://css-tricks.com/useful-nth-child-recipies/

https://css-tricks.com/examples/nth-child-tester

http://nth-test.com/

Youtube video responsive

.youtube-video {
  float: none;
  clear: both;
  width: 100%;
  position:
  relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}

.youtube-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Umik scoll-bara

-ms-overflow-style:none (ie)

::-webkit-scrollbar {display: none;}

Enaka višina stolpcev

padding-bottom: 10em;

margin-bottom: -10em;

Razbijanje teksta v stolpce

CSS3 Create Multiple Columns

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -ms-column-count: 3; /* Firefox */
    column-count: 3;
}

Več: http://www.w3schools.com/css/css3_multiple_columns.asp

Custom a title

a:hover {position: relative;}

a[title]:hover:after {

content: attr(title);
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;

}

OWL Carousel razmazan tekst

Rešitev:

.owl-item {
    transform: translateZ(0) scale(1.0,1.0);
    -webkit-transform: translateZ(0) scale(1.0,1.0);
}

Dodaj ikono na vse linke s končnico .xxx v href

Rešitev:

a[href$=".pdf"]:before{ }

Dodaj še v .js class po želji:

$('a[href$=".doc"]').addClass("doc");
$('a[href$=".pdf"]').addClass("pdf");

STIL ZA VSE MAILTO LINKE

a [ href ^ = " mailto : " ]

mailto ali tel ali skype

Note: Zbriši vse presledke!

WIDTH CALC za vse browserje

width: calc(~'(100% / 1)' - (15px * 1));

GRADIENT :hover transition

.button {
position: relative;
font-size: 14px;
text-align: center;
color: #fff;
display: block;
width: 140px;
height: 40px;
margin: 0 auto;
z-index: 100;
background: gradient...

}

.button:before {
content:"";
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
z-index: -100;
background: gradient2....
transition(opacity 0.35s);
}

.button:hover:before {
opacity: 1;
}

https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759#.hizw9m85j

CSS FLEXBOX

https://yoksel.github.io/flex-cheatsheet/

SELECT FontAwesome

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css");
select { font-family: 'FontAwesome', Verdana }

test