Skip to content

Instantly share code, notes, and snippets.

@exarcheia-web
exarcheia-web / dabblet.css
Created December 17, 2013 20:10
Position fixed demo
/* Position fixed demo */
.article-main {
padding-top: 40px;
}
.box {
background: hotpink;
width: 100%;
height: 43px;
@exarcheia-web
exarcheia-web / dabblet.css
Created December 17, 2013 20:15
Basic menu with sub-menu css
/* Basic menu with sub-menu css */
.menu-main li {
list-style: none;
}
.menu-main > li {
display: inline-block;
vertical-align: top;
position: relative;
}
@exarcheia-web
exarcheia-web / dabblet.css
Created January 18, 2014 12:33
Media block *
/** Media block **/
figure img {
vertical-align: middle;
}
.media {
background: #ededed;
width: 630px;
margin: 20px auto;
@exarcheia-web
exarcheia-web / dabblet.css
Last active November 22, 2016 09:04
Modal with CSS
/* Modal with CSS */
@import url(http://fonts.googleapis.com/css?family=Audiowide);
p {
font-family: Arial, sans-serif;
}
.box {
padding: 2em;
@exarcheia-web
exarcheia-web / dabblet.css
Created January 21, 2014 19:46
CSS Triangle
/* CSS Triangle */
* { box-sizing: border-box }
.triangle {
width: 0; height: 0;
border-bottom: 50px solid black;
border-left: 20px solid transparent;
border-right: 70px solid transparent;
@exarcheia-web
exarcheia-web / dabblet.css
Created January 21, 2014 19:49
Space Invader
/**
* Space Invader
*/
.space-invader{
margin: 100px auto;
display: block;
width: 200px;
box-shadow:
0 0 0 1em red,
@exarcheia-web
exarcheia-web / dabblet.css
Created January 21, 2014 20:09
Sky and cloud with box shadow
/* Sky and cloud with box shadow */
body {
background: skyblue;
}
.cloud {
width: 200px;
height: 100px;
background: white;
/* SKY */
body {
background: skyblue;
}
.cloud {
width: 200px;
height: 100px;
background: white;
@exarcheia-web
exarcheia-web / dabblet.css
Created January 27, 2014 10:25
Paper Stack with pseudo elements
/**
* Paper Stack with pseudo elements
*/
*, *:before, *:after {
-webkit-box-sizing: border-box;
}
.paper {
width: 280px;
@exarcheia-web
exarcheia-web / dabblet.css
Created January 27, 2014 21:31
Paper Stack with box shadow (unsuccessful)
/**
* Paper Stack with box shadow (unsuccessful)
*/
*, *:before, *:after {
-webkit-box-sizing: border-box;
}
.paper {
width: 280px;