/
Gists
/
CSS trick
Gists - CSS trick
On gists
CSS
CSS trick
CSS (how to write logical statement)
solution.css #
/* https://stackoverflow.com/questions/2797091/css-and-and-or */
/* or || */
.registration_form_right input:not([type="radio"]):not([type="checkbox"]) {}
/* and && */
.registration_form_right input:not([type="radio"]),
.registration_form_right input:not([type="checkbox"])
On gists
CSS
CSS trick
External links only CSS
external-links.css #
/* https://davidwalsh.name/external-links-css */
/* long version */
a[href^="http://"]:not([href*="mysite.com"]),
a[href^="https://"]:not([href*="mysite.com"]),
a[href^="//"]:not([href*="mysite.com"]), {
}
/* shorter version! */
a[href*="//"]:not([href*="mysite.com"]) {
/* external link styles, use :before or :after if you want! */
}
On gists
Full width
•
CSS
CSS trick
full.css #
.full-width {
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
max-width: 100vw;
position: relative;
right: 50%;
width: 100vw;
}
.full-width2 {
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
background: coral;
}
.full-width3 {
/* max-width: 100vw; */
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
background: lime;
}
On gists
CSS
CSS trick
Flex with gap
demo1.css #
/* https://coryrylan.com/blog/css-gap-space-with-flexbox */
.emulated-flex-gap {
--gap: 12px;
display: inline-flex;
flex-wrap: wrap;
margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
width: calc(100% + var(--gap));
}
.emulated-flex-gap > * {
margin: var(--gap) 0 0 var(--gap);
}
On gists
CSS
CSS trick
Parent - child - overlay - increase parent by child
index.html #
<!-- DEMO: http://kod.djpw.cz/ilcd -->
<div class="row">
<div class="content">
obsah row <br>
</div>
<div class="overlay">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
</div>
<div class="row">
<div class="content">
obsah row<br>
obsah row<br>
obsah row<br>
obsah row<br>
obsah row<br>
obsah row<br>
obsah row<br>
obsah row<br>
obsah row<br>
obsah row<br>
</div>
<div class="overlay">
<div>1</div>
</div>
</div>
On gists
CSS
CSS trick
Fluid images
fluid-images.css #
/* https://www.zachleat.com/web/fluid-images/ */
img {
max-width: 100%;
}
img[width] {
width: auto; /* Defer to max-width */
}
img[width][height] {
height: auto; /* Preserve aspect ratio */
}
/* Let SVG scale without boundaries */
img[src$=".svg"] {
width: 100%;
height: auto;
max-width: none;
}
On gists
CSS
CSS trick
Transform origin - Filled buttons
index.html #
<!-- https://jsbin.com/bowaxu/1/edit?html,css,output -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<a href="" class="button"><span class="button-text"></span></a>
</body>
</html>
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>