Skip to content

Instantly share code, notes, and snippets.

View flexbox's full-sized avatar

David Leuliette flexbox

View GitHub Profile
@flexbox
flexbox / linkStyle.css
Created July 26, 2012 10:23
CSS3 : Style des liens en fonction des types de fichiers
/* Liens externes */
a[rel="external"]{
font-size:16px;
}
/* Liens Email
Le selecteur ^= permet de cibler tous les liens commençant par mailto:
:before ajoute une entite sous forme d'icone
*/
a[href^="mailto:"]:before{
@flexbox
flexbox / buttonNoImage.css
Created July 26, 2012 10:31
CSS3 : Boutons avec des icones sans images
.buttons
{
display: inline-block;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
@flexbox
flexbox / cdn.js
Created January 7, 2013 12:25
Clean code to call a CDN
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
@flexbox
flexbox / imgScale.css
Last active December 11, 2015 20:18
zoom img using CSS3 transition & transform
.map {
display: block;
overflow: hidden;
}
.map span{
display: block;
height: 250px;
background:url(../img/map.jpg) no-repeat top left;
transition: transform 0.2s linear 0s;
@flexbox
flexbox / markdown-shortcut
Last active December 27, 2016 14:04
Here is all the markup for markdown text files
Title
# h1
## h2
### h3
#### h4
##### h5
###### h6
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Dept, Title</th>
<th scope="col">Phone</th>
</tr>
</thead>
<tbody>
// Straightforward + simple.
$("button").on("click", function(event) {
event.preventDefault();
var button = $(this);
var numberElem = button.find(".number");
var number = Number(numberElem.text()) - 1;
numberElem.text(number);
if (number === 0) {
button.prop("disabled", true);
button.off("click");
@flexbox
flexbox / easterMediaQuery.css
Created March 29, 2013 13:00
A little Easter egg for responsive website
@media only screen and (min-width: 960px) and (max-width: 970px) {
body {
-webkit-transform : rotate(180deg);
-moz-transform : rotate(180deg);
-o-transform : rotate(180deg);
transform : rotate(180deg); }
}
@flexbox
flexbox / background-zoom.css
Last active December 16, 2015 22:39
[css] - transition : background zoom image
.bg-zoom {
background-position: center center;
background-size: 100% auto;
transition: background-size 0.5s ease 0s;
}
.bg-zoom:hover {
background-size: 150% auto;
}
@flexbox
flexbox / typography.sass
Created May 18, 2013 22:46
typography-heading-mixin
@mixin headings($from: 1, $to: 6){
@if $from >= 1 and $to <= 6{
$heading-selector: (unquote(""));
@for $i from $from through $to {
$heading-selector: $heading-selector, unquote("h#{$i}")
}
#{$heading-selector}{
@content
}
}