Skip to content

Instantly share code, notes, and snippets.

@csssecrets
csssecrets / dabblet.css
Created Mar 4, 2016
box-shadow removes slider track in Chrome
View dabblet.css
/**
* box-shadow removes slider track in Chrome
*/
input {
box-shadow: 0 0 5px red;
}
View dabblet.css
/**
* Scrolling hints
*/
ul {
display: inline-block;
overflow: auto;
width: 7.2em;
height: 7em;
border: 1px solid silver;
View dabblet.css
/**
* Elastic color
*/
html {
background: rgb(100%, 0%, 40%);
transition: 1s cubic-bezier(.25,.1,.2,3);
}
@csssecrets
csssecrets / dabblet.css
Last active Feb 18, 2020
Elastic transitions
View dabblet.css
/**
* Elastic transitions
*/
input:not(:focus) + .callout:not(:hover) {
transform: scale(0);
transition: .25s transform;
}
.callout {
@csssecrets
csssecrets / dabblet.css
Last active Feb 28, 2020
Bouncing animation
View dabblet.css
/**
* Bouncing animation
*/
@keyframes bounce {
60%, 80%, to {
transform: translateY(400px);
animation-timing-function: ease;
}
70% { transform: translateY(300px); }
@csssecrets
csssecrets / dabblet.css
Last active Jun 3, 2018
Interactive image comparison — range input version
View dabblet.css
/**
* Interactive image comparison — range input version
*/
.image-slider {
position:relative;
display: inline-block;
}
.image-slider > div {
@csssecrets
csssecrets / dabblet.css
Last active Sep 10, 2020
De-emphasizing by blurring (AND dimming)
View dabblet.css
/**
* De-emphasizing by blurring (AND dimming)
*/
main {
transition: .6s;
background: white;
}
main.de-emphasized {
@csssecrets
csssecrets / dabblet.css
Created Feb 13, 2015
Native modal dialog (limited support)
View dabblet.css
/**
* Native modal dialog (limited support)
*/
dialog::backdrop {
background: rgba(0,0,0,.8)
}
@csssecrets
csssecrets / dabblet.css
Created Feb 13, 2015
Rudimetary overlay with box-shadow
View dabblet.css
/**
* 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);
}
View dabblet.css
/**
* Toggle buttons
*/
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
}
input[type="checkbox"] + label {
You can’t perform that action at this time.