/ Gists / CSS trick

Gists - CSS trick

On gists

CSS - full height with resizable header & footer with TABLE LAYOUT

CSS CSS trick

layout.css #

html, body {
    height: 100%;
    margin: 0;

}
.container {
    display: table;
    height: 100%;
    /*border-spacing: 10px;
    margin: 0 -10px;
    */
    width: 100%;
}
.nav, .content, .footer {
    display: table-row;
}
.cell {
    display: table-cell;
}
.nav div, .footer div {
    background-color: #1565C0;
}
.content div {
    height: 100%; /* Nutné, aby obsah dominantne zaberal všetko voľné miesto. */
    border: 1px solid;
}
p {
    padding: 1em;
    margin: 0;
}
On gists

From http://stackoverflow.com/questions/26939104/clear-rows-when-doing-multi-responsive-columns-bootstrap/33540628#33540628

CSS Bootstrap CSS trick

bootstrap-autoclear.css #

@media (min-width:1200px){
    .auto-clear .col-lg-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-lg-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-lg-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-lg-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-lg-6:nth-child(odd){clear:left;}
}
@media (min-width:992px) and (max-width:1199px){
    .auto-clear .col-md-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-md-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-md-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-md-6:nth-child(odd){clear:left;}
}
@media (min-width:768px) and (max-width:991px){
    .auto-clear .col-sm-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-sm-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-sm-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-sm-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-sm-6:nth-child(odd){clear:left;}
}
@media (max-width:767px){
    .auto-clear .col-xs-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-xs-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-xs-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-xs-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-xs-6:nth-child(odd){clear:left;}
}
On gists

Double hr (border-top, border-bottom)

•
CSS trick

double-hr.css #

hr{
	background-color: transparent;
	height: 0;
	border: none;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	border-top: 1px solid rgba(0,0,0,0.9);
	margin: 0;
	clear: both;
}
On gists

Vertical centering IE 9 or 10+

•
CSS trick

vertical-centering.css #

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
On gists

Fígl na hover efekt (pomocí shadow-text)

•
CSS trick

SassMeister-rendered.html #

<a href="">ODKAZ</a>
On gists

Rozmazaná čára (přechodová, po krajích mázlá, prostředek plná)

•
CSS trick

blurred hr.css #

hr {
    background-image: -moz-linear-gradient(left center , rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
    border: 0 none;
    height: 1px;
    margin: 22px 0;
}