Skip to content

Instantly share code, notes, and snippets.

@JamesDun
JamesDun / dabblet.css
Last active October 9, 2019 17:09 — forked from csssecrets/dabblet.css
Custom underlines
/**
* Custom underlines
*/
body {
font: 250%/1.6 Baskerville, Palatino, serif;
}
a {
background: linear-gradient(gray, gray) no-repeat;
@JamesDun
JamesDun / dabblet.css
Created October 9, 2019 17:23 — forked from csssecrets/dabblet.css
Letterpress
/**
* Letterpress
*/
body {
font: 250%/1.6 Baskerville, Palatino, serif;
}
p {
padding: .8em 1em;
@JamesDun
JamesDun / dabblet.css
Created October 9, 2019 17:42 — forked from csssecrets/dabblet.css
Glowing text
/**
* Glowing text
*/
body {
background: #203;
font: bold 500%/1 Rockwell, serif;
}
a {
@JamesDun
JamesDun / dabblet.css
Created October 9, 2019 17:55 — forked from csssecrets/dabblet.css
Text on a circle
/**
* Text on a circle
*/
body {
font: bold 120% Helvetica, sans-serif;
}
.circular {
width: 30em;
@JamesDun
JamesDun / dabblet.css
Last active October 17, 2019 08:10 — forked from csssecrets/dabblet.css
Taming table column widths
/**
* Taming table column widths
*/
body { background: #ddd }
section {
width: 500px;
margin: 2em;
background: white;
@JamesDun
JamesDun / dabblet.css
Created October 17, 2019 09:02 — forked from csssecrets/dabblet.css
Vertical centering - Viewport unit method
/**
* Vertical centering - Viewport unit method
*/
main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
box-sizing: border-box;
@JamesDun
JamesDun / dabblet.css
Last active October 17, 2019 09:15 — forked from csssecrets/dabblet.css
Bouncing animation
/**
* Bouncing animation
*/
@keyframes bounce {
60%, 80%, to {
transform: translateY(400px);
animation-timing-function: ease;
}
70% { transform: translateY(300px); }