gcyrillus

/* 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

/* 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

/* 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;}

gcyrillus

/* 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

/* 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

/* 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

/* 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

/* 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

/* 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

/* 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;}