This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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%;} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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;} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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;} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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;} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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;} |