Skip to content

Instantly share code, notes, and snippets.

View Stasy4168's full-sized avatar

Anastasia Stasy4168

  • Direct Line
  • Togliatty
View GitHub Profile
@Stasy4168
Stasy4168 / dabblet.css
Created May 5, 2017 11:54 — forked from csssecrets/dabblet.css
Elastic color
/**
* Elastic color
*/
html {
background: rgb(100%, 0%, 40%);
transition: 1s cubic-bezier(.25,.1,.2,3);
}
@Stasy4168
Stasy4168 / dabblet.css
Created May 5, 2017 11:54 — forked from csssecrets/dabblet.css
Elastic color
/**
* Elastic color
*/
html {
background: rgb(100%, 0%, 40%);
transition: 1s cubic-bezier(.25,.1,.2,3);
}
@Stasy4168
Stasy4168 / dabblet.css
Created May 5, 2017 11:27 — 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); }
@Stasy4168
Stasy4168 / dabblet.css
Created May 4, 2017 12:13 — forked from csssecrets/dabblet.css
De-emphasizing by blurring (AND dimming)
/**
* De-emphasizing by blurring (AND dimming)
*/
main {
transition: .6s;
background: white;
}
main.de-emphasized {
@Stasy4168
Stasy4168 / dabblet.css
Created May 4, 2017 12:13 — forked from csssecrets/dabblet.css
De-emphasizing by blurring (AND dimming)
/**
* De-emphasizing by blurring (AND dimming)
*/
main {
transition: .6s;
background: white;
}
main.de-emphasized {
@Stasy4168
Stasy4168 / dabblet.css
Created May 4, 2017 12:04 — forked from csssecrets/dabblet.css
Rudimetary overlay with box-shadow
/**
* Rudimetary overlay with box-shadow
*/
.lightbox {
position: fixed;
top: 50%; left: 50%;
margin: -200px;
box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);
}
@Stasy4168
Stasy4168 / dabblet.css
Created May 4, 2017 12:04 — forked from csssecrets/dabblet.css
Rudimetary overlay with box-shadow
/**
* Rudimetary overlay with box-shadow
*/
.lightbox {
position: fixed;
top: 50%; left: 50%;
margin: -200px;
box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);
}
@Stasy4168
Stasy4168 / dabblet.css
Created May 4, 2017 10:20 — forked from csssecrets/dabblet.css
Text on a circle
/**
* Text on a circle
*/
body {
font: bold 120% Helvetica, sans-serif;
}
.circular {
width: 30em;
@Stasy4168
Stasy4168 / dabblet.css
Created May 4, 2017 10:20 — forked from csssecrets/dabblet.css
Text on a circle
/**
* Text on a circle
*/
body {
font: bold 120% Helvetica, sans-serif;
}
.circular {
width: 30em;
@Stasy4168
Stasy4168 / dabblet.css
Created May 4, 2017 08:36 — forked from csssecrets/dabblet.css
Ligatures
/**
* Ligatures
*/
body {
font: 200%/1.6 "Adobe Caslon Pro", Baskerville, serif;
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
}