/
Gists
/
CSS trick
Gists - CSS trick
On gists
Css modal window 2 (ghost)
•
CSS
CSS trick
modal.html #
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.blocker
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
z-index: 1;
padding: 20px;
box-sizing: border-box;
background-color: #000;
background-color: #000000bf;
text-align: center;
}
.blocker::before
{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.05em;
}
.modal
{
vertical-align: middle;
position: relative;
z-index: 2;
max-width: 500px;
box-sizing: border-box;
width: 90%;
background: #fff;
padding: 15px 30px
}
</style>
</head>
<body>
<!-- https://jquerymodal.com/ -->
<div class="jquery-modal blocker current">
<div class="modal" style="display: inline-block;">
<h1>Hello there!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><a href="#close-modal" rel="modal:close" class="close-modal ">Close</a></div>
</div>
</div>
</body>
</html>
On gists
IE 11 - CSS Grid - SASS mixins
•
SCSS
CSS
CSS trick
mixins.scss #
// Ensure CSS grid works with IE 11 spec.
// https://css-tricks.com/browser-compatibility-css-grid-layouts-simple-sass-mixins/
// sass-lint:disable no-vendor-prefixes, no-duplicate-properties
@mixin display-grid {
display: -ms-grid;
display: grid;
}
// $columns values should be delimited by a space
@mixin grid-template-columns($columns...) {
-ms-grid-columns: $columns;
grid-template-columns: $columns;
}
// $rows values should be delimited by a space
@mixin grid-template-rows($rows...) {
-ms-grid-rows: $rows;
grid-template-rows: $rows;
}
// Can be used in combination with above grid-template-X mixins.
// These result in the same output:
// @include grid-template-columns(10px grid-repeat(4, 20px) 30px);
// @include grid-template-columns(10px 20px 20px 20px 20px 30px);
@function grid-repeat($repeat, $stuff: 1fr) {
$list: ();
@for $i from 1 through $repeat {
$list: append($list, $stuff, space);
}
@return $list;
}
@mixin grid-column($col-start, $col-end) {
-ms-grid-column: $col-start;
-ms-grid-column-span: $col-end - $col-start;
grid-column: #{$col-start} / #{$col-end};
}
@mixin grid-row($row-start, $row-end) {
-ms-grid-row: $row-start;
-ms-grid-row-span: $row-end - $row-start;
grid-row: #{$row-start} / #{$row-end};
}
@mixin grid-align-self($value) {
-ms-grid-row-align: $value;
align-self: $value;
}
@mixin grid-justify-self($value) {
-ms-grid-column-align: $value;
justify-self: $value;
}
On gists
Quantity queries
•
CSS
CSS trick
examples.css #
/*
@see: https://www.hongkiat.com/blog/quantity-queries-css-quantity-aware/
*/
/* "At-least" query */
ul li:nth-last-child(n+5),
ul li:nth-last-child(n+5) ~ li {
background-color: orange;
}
/* "At-most" query */
ul li:nth-last-child(-n+5):first-child,
ul li:nth-last-child(-n+5):first-child ~ li {
background-color: orange;
}
/* "Between" query */
ul li:nth-last-child(n+5):nth-last-child(-n+6):first-child,
ul li:nth-last-child(n+5):nth-last-child(-n+6):first-child ~ li {
background-color: orange;
}
/* OR */
/* https://quantityqueries.com/ */
/* at-least 2 */
li:nth-last-child(n+2), li:nth-last-child(n+2) ~ li { }
/* at-most 2 */
li:nth-last-child(-n+2):first-child, li:nth-last-child(-n+2):first-child ~ li { }
/* at least / at most 2 - 4 */
li:nth-last-child(n+2):nth-last-child(-n+4):first-child, li:nth-last-child(n+2):nth-last-child(-n+4):first-child ~ li { }
On gists
SCSS
CSS trick
ghost-element-vertical-align.css
ghost-element-vertical-align.css #
/* This parent can be any width and height */
.block {
text-align: center;
/* May want to do this if there is risk the container may be narrower than the element inside */
white-space: nowrap;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
On gists
CSS trick
Slider - fadein / fadeout via css
slider.css #
/* The animation code */
@keyframes example {
0% {background-image: url("https://static.pexels.com/photos/7174/summer-grass.jpg");}
50% {background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjOCNcnik0caAqRX601w3rTlf3ZTANFojDWVxc2WOkvOzu4NF7HQ");}
100% {background-image: url("https://static.pexels.com/photos/7174/summer-grass.jpg");}
}
/* The element to apply the animation to */
div {
width: 400px;
height: 300px;
background-repeat: no-repeat;
background-size: 100% 100%;
animation-name: example;
animation-duration: 10s;
animation-iteration-count: infinite;
}
On gists
CSS
CSS trick
CSS - full height with resizable header & footer with TABLE LAYOUT
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;
}