Skip to content

Instantly share code, notes, and snippets.

@meritt
Created February 4, 2015 16:49
Show Gist options
  • Save meritt/205bc797715dde6e2c06 to your computer and use it in GitHub Desktop.
Save meritt/205bc797715dde6e2c06 to your computer and use it in GitHub Desktop.
p:not(.intro) {
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grid Example</title>
<style>
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.a {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.b {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
.c {
grid-column: 5 / 6;
grid-row: 1 / 2;
}
.d {
grid-column: 1 / 2;
grid-row: 3 / 4;
}
.e {
grid-column: 3 / 4;
grid-row: 3 / 4;
}
.f {
grid-column: 5 / 6;
grid-row: 3 / 4;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>
</body>
</html>
:root {
--color-main: #333333;
--color-alert: #ffecef;
}
.error {
color: var(--color-alert);
}
.main {
position: relative;
}
.exclusion {
position: absolute;
top: 14em;
left: 14em;
width: 320px;
wrap-flow: both;
}
.shape {
width: 300px;
float: left;
shape-outside: circle(50%);
}
p:not(.intro, blockquote) {
font-weight: bold;
}
a:has( > img ) {
border: 1px solid #000;
}
li:not(:has(p)) {
padding-bottom: 1em;
}
p:matches(.alert, .error, .warn) {
color: red;
}
.box {
background-image: url("balloons.jpg");
}
.box2 {
background-color: red;
background-blend-mode: hue;
}
.box3 {
background-color: blue;
background-blend-mode: multiply;
}
.box {
background-image: url("balloons-large.jpg");
}
.box h1 {
color: green;
font-size: 140px;
}
.box2 h1 {
mix-blend-mode: screen;
}
.box {
background-image: url("check.png");
background-position: 30px 30px;
}
.box {
background-image: url("check.png");
background-position: calc(100% – 30px) calc(100% – 30px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment