Skip to content

Instantly share code, notes, and snippets.

View orioltf's full-sized avatar

Oriol Torrent Florensa orioltf

18 followers · 22 following
  • Unic AG
View GitHub Profile
@orioltf
orioltf / custom_accessible_checkbox_radio.css
Last active December 13, 2015 22:49
#HTML #CSS #FORM: Custom accessible checkboxes and radio buttons. http://www.456bereastreet.com/archive/201211/accessible_custom_checkboxes_and_radio_buttons/ http://www.456bereastreet.com/lab/custom-checkboxes-radio-buttons/ http://cdpn.io/aBLqv
/*
Use a media query to hide custom checkbox and radio button CSS from less capable browsers
See http://www.456bereastreet.com/archive/201206/using_media_queries_to_hide_css3_from_older_browsers/
*/
@media only screen {
.checkbox, .radio {
/* Enable absolute positioning of the hidden form controls */
position:relative;
/* Just a bit of space. */
@orioltf
orioltf / dabblet.css
Created February 9, 2013 08:03 — forked from LeaVerou/dabblet.css
#CSS #CSS3: Background pattern semi-circles. http://dabblet.com/gist/4744547 Forked from http://dabblet.com/gist/1454230
background-color:silver;
background-image:
radial-gradient(100% 150%, circle, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
radial-gradient(0 150%, circle, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
radial-gradient(50% 100%, circle, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent),
radial-gradient(100% 50%, circle, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent),
radial-gradient(0 50%, circle, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent);
background-size:100px 50px;
@orioltf
orioltf / auto_resize_textarea.html
Last active December 12, 2015 05:28
#JQUERY: Autoresize textarea. The textarea will resize itself automatically as you add/remov content. For sure can be improved! http://codepen.io/orioltf/pen/euImv
<textarea id="comment" rows="0" cols="50"></textarea>
@orioltf
orioltf / Plain_Text_Editor_with_preview_and_save_button.html
Created January 31, 2013 14:56
#BOOKMARK: Convert browser into a Plain Text Editor with live preview and save button
data:text/html;charset=utf-8,
<html>
<head>
<title>Plain Text Editor</title>
<style>
html{background-color: #f2f2f2;}
body{background-color: #fff; margin:0; font-size: 1rem; line-height: 1.4; background-color: rgba(0,0,0,0.1);}
pre {margin: 0; width: 38%; padding: 0 1em;}
iframe {border: none; width: 56%; background-color: #fff;}
pre, iframe {float: left; height: 100%;}
@orioltf
orioltf / Plain_Text_Editor_with_save_button.html
Created January 31, 2013 12:44
#BOOKMARK: Convert browser into a Plain Text Editor with save button
data:text/html;charset=utf-8,
<html>
<head>
<title>Plain Text Editor</title>
<style>
html{background-color: #f2f2f2;}
body{background-color: #fff; margin:1.5rem auto; max-width: 80rem;}
body, textarea {font-size: 1rem; line-height: 1.4;}
textarea {border: none; height: 90%; width: 100%;}
</style>
@orioltf
orioltf / script.js
Created January 18, 2013 12:26
#JS: iOS detection. Adds an "ios" class to <html> if device is iOS
if ( navigator.userAgent.match(/(iPad|iPhone|iPod)/i) ) {
document.documentElement.className += " ios";
}
@orioltf
orioltf / css_tables_polifyll.html
Last active December 11, 2015 04:58
#JQUERY #CSS: Using jQuery To Detect CSS-Based Table Display Capabilities. From http://www.bennadel.com/blog/1768-Using-jQuery-To-Detect-CSS-Based-Table-Display-Capabilities.htm
<!DOCTYPE HTML>
<html>
<head>
<title>
Detecting CSS-Based Table Display Support With jQuery
</title>
<style type="text/css">
div.table {
display: table ;
width: 100% ;
@orioltf
orioltf / jqplugin.sublime-snippet
Created December 5, 2012 16:14
#JQUERY #SUBLIME: my jQuery plugin boilerplate as sublime snippet
<snippet>
<content><![CDATA[
/*
* Project : ${1}
* Description : ${2}
* Author : ${3:Oriol Torrent Florensa @ Unic AG}
* License : ${4:All rights reserved} ${5:Client Name}
*/
// the semi-colon before function invocation is a safety net against concatenated
@orioltf
orioltf / my_jquery_plugin_boilerplate.js
Created December 5, 2012 16:11
#JQUERY: My jQuery plugin boilerplate
/*
* Project :
* Description :
* Author :
* License :
*/
// the semi-colon before function invocation is a safety net against concatenated
// scripts and/or other plugins which may not be closed properly.
;(function($, window, document, undefined) {
@orioltf
orioltf / style.scss
Last active October 10, 2015 22:38
#CODEPEN #WIDGET #SCSS: Social Switchbook. Pretty simple draft with transform rotate. FontAwesome for icons.
@import "compass";
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
* { box-sizing: border-box; }
body {
overflow: hidden;
background:#c6c6c6;
-webkit-font-smoothing: antialiased;
}