Skip to content

Instantly share code, notes, and snippets.

View marciobarrios's full-sized avatar

Marcio Barrios marciobarrios

72 followers · 76 following
View GitHub Profile
@marciobarrios
marciobarrios / dabblet.css
Created February 27, 2012 16:32
Eunicinha thumbnail
/**
* Eunicinha thumbnail
*/
body { padding: 10em 0; text-align: center; background: url(http://cl.ly/EXdC/darkdenim.png) }
a, span { position: relative; display: inline-block; }
img { display: block; }
span { overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,1); }
span:before {
content: "";
@marciobarrios
marciobarrios / dabblet.css
Created February 27, 2012 17:47
CSS3 thumbnail inspired by Gloria Langreo
/**
* CSS3 thumbnail inspired by Gloria Langreo
*/
body { padding: 10em 0; text-align: center; background: url(http://cl.ly/EXdC/darkdenim.png) }
a, span { position: relative; display: inline-block; }
img { display: block; }
span { overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,1); }
span:before {
content: "";
@marciobarrios
marciobarrios / dabblet.css
Created March 2, 2012 10:06 — forked from daneden/dabblet.css
Picture frame
/**
* Picture frame
*/
* {
margin: 0;
padding: 0;
}
html {
@marciobarrios
marciobarrios / dabblet.css
Created March 2, 2012 10:16
Pure CSS Picture Frame
/* Pure CSS Picture Frame */
html {
background-color: #653845;
background-image: linear-gradient(45deg, hsla(0,0%,0%,.1) 50%, transparent 50%),
linear-gradient(-45deg, hsla(0,0%,0%,.1) 50%, transparent 50%);
background-size: .25em .25em;
box-shadow: inset 0 0 500px hsla(0,0%,0%,.5);
height: 100%;
}
@marciobarrios
marciobarrios / zepto.timeago.js
Created March 4, 2012 23:12 — forked from gazs/zepto.timeago.js
/*
* timeago: a jQuery plugin ported to Zepto, version: 0.9.3 (2011-01-21)
* @requires Zepto.js 0.4
*
* Timeago is a jQuery plugin that makes it easy to support automatically
* updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago").
*
* For usage and examples, visit:
* http://timeago.yarp.com/
*
@marciobarrios
marciobarrios / README.md
Created March 16, 2012 09:59 — forked from necolas/README.md
Experimenting with component-based HTML/CSS naming and patterns

Template Components

Used to provide structural templates.

Pattern

t-template-name
t-template-name--modifier-name
t-template-name__subcomponent-name--subcomponent-modifier-name
@marciobarrios
marciobarrios / dabblet.css
Created March 19, 2012 09:33
Dropdown in pure CSS, by Ryan Collins
/**
* Dropdown in pure CSS, by Ryan Collins
* http://www.ryancollins.me/?p=1041
*/
body { width: 180px; margin: 100px auto 0; background: url(http://cl.ly/F90D/blue-grey-textured.jpg); }
.wrapper {
display: inline-block;
width: 180px;
@marciobarrios
marciobarrios / dabblet.css
Created March 21, 2012 14:21 — forked from daneden/dabblet.css
Gallery concept
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAVUlEQVQYGV2OgQ0AIQgDu4ZzMKBDMSBPeTEVEyQEri0AWESAlW9nLZm9F8alLFbOXlB9P6lK3krZH5JKRR6QSsNzZpJLJW+mDnk9ZyZaKEnPzaNzaB+YaWuR6GfrqQAAAABJRU5ErkJggg==),
linear-gradient(#456,#123);
min-height: 100%;
@marciobarrios
marciobarrios / zscroll.html
Created March 23, 2012 11:39
Scrolling along the Z-Axis
<html>
<head>
<title>Scrolling along the Z-Axis</title>
<!--
Example from http://eng.wealthfront.com/2012/03/scrolling-z-axis-with-css-3d-transforms.html
Assumes browser window is sized at a height of 400px (the size of the black box).
-->
<style>
body{height:600px;}
#viewport {
@marciobarrios
marciobarrios / dabblet.css
Created March 30, 2012 09:25 — forked from JoelBesada/dabblet.css
CSS States
/* CSS States */
body {
background: url(http://dabblet.com/img/noise.png);
background-color: #F5F2F0;
font-family: Georgia, serif;
font-size: 18px;
line-height: 1.6em;
text-shadow: 0 2px 0 white;
color: #222;
}