Skip to content

Instantly share code, notes, and snippets.

View b4z81's full-sized avatar

Stefano Guglielmi b4z81

14 followers · 70 following
  • Rome
View GitHub Profile
@b4z81
b4z81 / Mixing vw and vh in font-size.markdown
Last active August 28, 2015 10:10
text that always fills the viewport

Mixing vw and vh in font-size

To create text that always fill the viewport, no matter what ratio. This is just a concept and not very well tested ;-)

A Pen by CrocoDillon on CodePen.

License.

@b4z81
b4z81 / Don't Overthink It Grids.markdown
Created August 28, 2015 13:10
Don't Overthink It Grids
@b4z81
b4z81 / 4 cubes → 12 small pyramids → 3 big pyramids.markdown
Created August 28, 2015 13:15
4 cubes → 12 small pyramids → 3 big pyramids

4 cubes → 12 small pyramids → 3 big pyramids

Pure CSS. Uses transform-style: preserve-3d, so it won't work in IE up to and including 11. Should work in the new Edge browser, but not actually tested. Tested & works for the most part in Firefox 39, 42 (nightly), Chrome 44, 46 (canary)/ Opera 31 beta on Windows 8. Firefox has 3D ordering issues, Chrome shows lines between parts. Update: Safari works the same as Chrome, while Edge seems to have a problem when combining into cubes (same as Firefox?) - see replies here. Inspiration:

gif

Forked from Ana Tudor's Pen 4 cubes → 12 small pyramids → 3 big pyramids.

A Pen by Stefano Guglielmi on CodePen.

@b4z81
b4z81 / hidden.scss
Created February 26, 2014 11:16
hidden an element in sass From http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/
%visuallyhidden {
margin: -1px;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip: rect(0, 0, 0, 0);
position: absolute;
}
@b4z81
b4z81 / gradient-text.css
Created July 1, 2014 09:52
From http://css-tricks.com/snippets/css/gradient-text/
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@b4z81
b4z81 / Pure-CSS-One-Div-Weather-Animated-Icons.markdown
Created August 6, 2014 08:52
A Pen by Fabrizio Bianchi.
@b4z81
b4z81 / hideaddrbar.js
Last active August 29, 2015 14:20 — forked from scottjehl/hideaddrbar.js
/*
* Normalized hide address bar for iOS & Android
* (c) Scott Jehl, scottjehl.com
* MIT License
*/
(function( win ){
var doc = win.document;
// If there's a hash, or addEventListener is undefined, stop here
if( !location.hash && win.addEventListener ){
@b4z81
b4z81 / dabblet.css
Created January 24, 2012 17:16 — forked from daneden/dabblet.css
Css: Light loader
/**
* Light loader
*/
* {
margin: 0;
padding: 0;
}
html {
@b4z81
b4z81 / 3dshadow.css
Created February 24, 2012 13:39
Css: 3d text
h1 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
@b4z81
b4z81 / An accessible image replacement method using pseudo-elements and generated-content. This method works with images andor CSS off with semi-transparent images doesn’t hide text from screen-readers or search engines and provides fallback for IE 6 and IE
Created March 13, 2012 10:16
Css: Nir image replacement
.nir {
height:100px; /* height of replacement image */
width:400px; /* width of replacement image */
padding:0;
margin:0;
overflow:hidden;
}
.nir:before {
content:url(image.gif);