Skip to content

Instantly share code, notes, and snippets.

View gcyrillus's full-sized avatar

gcyrillus gcyrillus

View GitHub Profile
@gcyrillus
gcyrillus / dabblet.css
Created May 27, 2013 12:22 — forked from anonymous/dabblet.css
animation marquee like: animation + attr data-
/* animation marquee like: animation + attr data- */
div {text-align:center;}
p , article{display:inline-block;margin:3em auto;border:double;background:orange;padding:5px 0;
position:relative;overflow:hidden;table-layout:fixed; box-shadow:0 0 15px green}
strong {display:block;animation:linear marqueelike 12s infinite ;margin-left:-100%;padding:0 5px;text-align:left;}
strong:after {content:attr(data-text);position:absolute;white-space:nowrap;padding-left:10px;}
@keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@gcyrillus
gcyrillus / dabblet.css
Created May 25, 2013 14:07 — forked from anonymous/dabblet.css
hover hide/show + delay
/* hover hide/show + delay */
html {display:table;width:100%;height:100%;}
body {display:table-cell;vertical-align:middle;height:100%;}
table {width:80%;margin:0 auto;border-collapse:collapse;}
tbody,tr {width:100%;}
td {width:10%;border:1px solid red;}
img {width:100%;vertical-align:top;opacity:0;transition:5s}
td:hover img {opacity:1;transition:0.25s}
@gcyrillus
gcyrillus / dabblet.css
Created May 25, 2013 10:27 — forked from anonymous/dabblet.css
scrolling table ?, Yep!
/* scrolling table ?, Yep! */
#blocTableaux {
font-size:16px;
width:92em;
height:320px; /* set height here */
margin:3em auto;position:relative;padding:0;border:1em solid transparent;box-shadow:0 0 5px;border-radius:0.25em;text-align:center}
#blocG, #blocD{display:inline-block;width:45.45em;height:100%;margin:0 0.1em;overflow-y:scroll;box-shadow:0 0 0 1px;background:#ddd}
#tabG, #tabD {text-align:center;
font-size :10px; /* !!! */
width:100%;table-layout:fixed;}
/* form revisité de https://about.telus.com/ */
body {background:white url(https://about.telus.com/plugins/careerconnection/resources/images/phone_body.png) no-repeat;}
form { width:258px;;text-align:center;
background:white;margin:107px 25px;padding:3px;
box-shadow:0 0 15px ;}
form > label:nth-child(1n) {width:48.5%;margin:0;}
form > label:nth-child(n+4) ,label, a {width:98%;display:inline-block;text-align:left;}
form > input , form >label > input {display:block;width:97%;;margin:auto;}
form a , :visited {border:1px solid;color:#333;text-decoration:none;}
a[href="#none"] {position:absolute;left:0;top:1.25em;z-index:-1;}
@gcyrillus
gcyrillus / dabblet.css
Created May 22, 2013 01:12 — forked from anonymous/dabblet.css
don't ask
/* don't ask */
.table {display:table;width:100%;background:white;height:auto;border-spacing:5px;padding:0;}
.table.table {height:50%;margin:0;}/* <= here */
.cell {display:table-cell;vertical-align:middle;border:solid;text-align:center;
background:turquoise;}
.cell .cell {min-width:50px;}
.w250 {width:250px;}
.table .table .cell:nth-child(1n) {background:white;}
.table .table .cell:nth-child(2n) {background:gold;}
.table .table .cell:nth-child(3n) {background:#ddd;}
@gcyrillus
gcyrillus / dabblet.css
Created May 18, 2013 21:49 — forked from anonymous/dabblet.css
elastic , rubber menu
/* elastic , rubber menu */
p#nav {text-align:justify;background:#48a;
box-shadow:
inset 0 0 0 1px #aaa,
0 40px 1px -38px #6CD000,
0 -40px 1px -38px #6CD000,
-23px 0 1px -20px #6CD000,
23px 0 1px -20px #6CD000,
0 40px 1px -34px #48a,
0 -40px 1px -34px #48a,
@gcyrillus
gcyrillus / dabblet.css
Created May 16, 2013 16:18 — forked from anonymous/dabblet.css
scalable, reponsive image map + font-size so are em values for radius & shadow
/* scalable, reponsive image map + font-size so are em values for radius & shadow*/
html {
font-size:30px;
min-height:100%;
background:linear-gradient(0deg, transparent,gray);}
p , h1{text-align:center;
position:relative;text-shadow:1px 1px #999
}
.image_map {
width:640px;height:480px;
@gcyrillus
gcyrillus / dabblet.css
Created May 15, 2013 18:22 — forked from anonymous/dabblet.css
Resize image <map> : apply and change background <area> for webkit
/* Resize image <map> : apply and change background <area> for webkit */
div {display:inline-block;position:relative;border-radius:1em;border:inset #333;
box-shadow:0 0 5px #fff;height:800px;width:1300px;overflow:hidden;}
div p {height:25%;width:25%;position:absolute;z-index:3;top:0;left:0;padding:10px;margin:0;background:purple;color:white;font-size:1.5em;box-shadow:0 0 500px 30px gold, 0 0 800px 100px white;border-radius:0 0 1em 0 ;border-right:outset #333;border-bottom:outset #333}
img {display:block;margin:0 auto;}
div > img {position:absolute;top:0}
html {
background: #f06;
background: linear-gradient(45deg, #159, turquoise);
@gcyrillus
gcyrillus / dabblet.css
Created May 15, 2013 10:53 — forked from anonymous/dabblet.css
column css, exemple pour 1 topic
/* column css, exemple pour 1 topic */
body {
column-width:300px;
column-rule:dashed 1px gray;
column-gap:1em;
column-fill:balance;
width:80%;
margin:0 auto;
padding:0 1em;
background:ivory;
@gcyrillus
gcyrillus / dabblet.css
Created May 14, 2013 21:52 — forked from anonymous/dabblet.css
px, pt, em, tronquage sur x lignes et fond a l'echelle
/* px, pt, em, tronquage sur x lignes et fond a l'echelle */
body {background:gray;font-size:85%;text-shadow:1px 1px #444;color:orange;font-weight:bold;text-align:justify;}
p {width:30em;margin:1em auto;padding:0 0.25em;
line-height:1.4em;
max-height:4.2em;/* 1.4em X3 = 3 lignes = 4.2em */
border:solid;
overflow:hidden;
background:repeating-linear-gradient(180deg, transparent 0, transparent 1.3em, #159 1.3em, #159 1.4em) ,linear-gradient(-15deg,turquoise,#159)
}
h1 {color:white;background:#48a;margin:1em auto;box-shadow:0 0 15px gold;;padding:0.5em;width:80%;text-align:center;}