Petit outil qui permet de générer des animations CSS3.
On peut faire des trucs bien fun, et aussi probablement des trucs imbuvables qui donnent le mal de mer.
Article qui explique les subtilités du CSS. Avec tout ça en tête, je ne pense pas qu'il y aie beaucoup de problèmes qui résistent longtemps.
Concurent de prefix-free (http://gregoire.surrel.org/links/?FaV9uA) pour n'utiliser que les codes CSS sans préfixes dépendent du browser
Même si je n'approuve pas tout (surtout le coup des espaces), c'est un bon recueil de CSS avec plein de liens intéressants.
(via Le Hollandais Volant)
Librairie Javascript pour ajouter les préfixes/extensions des navigateurs pour le CSS3.
Petit toolkit CSS pour avoir des formulaires pas trop moches dans les pages web.
Des templates HTML5/CSS3 qui sont en responsive design. A voir si c'est intéressant.
Des sites qui exploitent les possibilités offertes par l'HTML5 et CSS3. Source d'inspiration ou briseur de barrières ?
Personnaliser le Twitter Bootstrap
Voici une feuille de style faite pour rendre les exports Markdown > CSS plus jolis.
En rapport avec cet autre post : http://gregoire.surrel.org/links/?l3ILYw
<style>
/* #####################
CSS rules for all
##################### */
/ Text style /
html{
font-family: 'Georgia', serif;
}
h1,h2,h3,h4,h5,h6{
font-weight: normal;
color: #111;
line-height: 1em;
margin-bottom: 0.5em;
}
h4,h5,h6{ font-weight: bold; }
h2{ font-size:1.8em; margin-left: 7mm; }
h3{ font-size:1.5em; margin-left: 12mm; }
h4{ font-size:1.2em; margin-left: 16mm; }
h5{ font-size:1.0em; margin-left: 18mm; }
h6{ font-size:0.9em; margin-left: 20mm; }
p{
text-align: justify;
}
/ Tables, figures /
figure{
text-align:
center; margin: 0;
}
img{
max-width:100%;
padding: 8px;
display: block;
margin: auto;
}
figure > img {
border: 1px #DDD solid;
}
figcaption, caption{
font-style: italic;
margin: auto;
padding: 0;
border: 1px #AAA solid;
}
figcaption{
display: inline-block;
padding: 3px;
margin-top: -1px;
border-top: 1px #DDD solid;
background: white;
}
caption{
border-bottom-width: 0;
}
tbody{
border-top: 4px #AAA solid;
}
table{
border-collapse: collapse;
border-spacing: 0;
border: 1px #AAA solid;
margin: auto;
}
td, th{
vertical-align: top;
padding: 0 3pt;
}
tr ~ tr{
border-top: thin rgba(0, 0, 0, 0.05) solid;
}
/ Text blocks /
blockquote, pre{
margin: 0;
padding:0.1cm 1cm;
padding-left: 1em;
display: inline-block;
}
blockquote{
border-left: 0.5em #DDD solid;
border-radius: 12pt 4pt 4pt 12pt;
}
pre,code,kbd,samp{
font-family: monospace;
max-width: 85%;
white-space: pre-wrap;
word-wrap: break-word;
}
dl{
margin-left: 0.8cm;
}
dt{
font-style: italic;
}
/ Spacing glitches /
pre + figure, h1 + blockquote, figure + figure{
margin-top: 1cm;
}
li > p{
margin: 0.2em;
}
/ Title counters /
body{ counter-reset: ch1; }
h1{
counter-increment: ch1;
counter-reset: ch2;
}
h1:before { content: counter(ch1) " - "; }
h2{
counter-increment: ch2;
counter-reset: ch3;
}
h2:before { content: counter(ch1) "." counter(ch2) " - "; }
h3{
counter-increment: ch3;
}
h3:before { content: counter(ch1) "." counter(ch2) "." counter(ch3) " - "; }
#TOC{
counter-reset: ch1;
}
.title:before, .author:before , .date:before, .TOC-header:before{
content: "";
}
/* ########################
CSS rules for screen
######################## */
@media screen{
/ Media style /
html{
padding: 1cm;
background: #eee;
}
body{
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAA9CAYAAAAXgFT/AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFtSURBVHic7dxBSsNAAEDRRLyAK6nrev8DuRfc1CPoVhBkCpkkH99blyaZpJ8JyXS9Xa5fC0DAw9E7ADBKsIAMwQIyBAvIECwgQ7CADMECMgQLyBAsIONx9INP72/rjB34fHk97Zv2ex3zrO3sua29zuPMseJvP8/x1udh9PoxwwIyBAvIECwgQ7CADMECMgQLyBAsIEOwgAzBAjIEC8gYXpozi6UWwCgzLCBDsIAMwQIyBAvIECwgQ7CADMECMg5/Dwvucca/1J7xLuEZj/MMzLCADMECMtwSsonKEiu3Wm1mWECGYAEZggVkCBaQIVhAhmABGYe/1nDmx8yVR/XwX5hhARmCBWQIFpAhWECGYAEZggVkCBaQIVhAhmABGYIFZAgWkLHeLtfRtXwfk/bhedL3lswa22X5Pb4zt1Uw43qbMaZn/11sfcxDx3tPsAAO5ZYQyBAsIEOwgAzBAjIEC8gQLCBDsIAMwQIyvgF8RjQAaIW6pAAAAABJRU5ErkJggg==) no-repeat;
background-size: 256px;
background-position: 16px 16px;
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
font-size: 16px;
line-height: 1.5em;
padding: 3cm 1cm;
margin: auto;
max-width: 62em;
min-width: 42em;
border: 1px black solid;
}
:target{ background: rgb(181, 230, 29); padding-left: 3mm; padding-right: 3mm; }
/ Document title /
header{
text-align: center;
}
.title{
border-bottom: 1px black solid;
}
.author{
margin: -1px 0 1cm;
margin-bottom: 1cm;
background: #eee;
display: inline-block;
padding: 10pt 15pt;
border: 1px black solid;
border-radius: 0 0 5pt 5pt;
border-top-width: 0;
}
.date{
font-variant: small-caps;
margin: 1cm 0 3cm;
}
/ Text style /
p{ margin:1em 0; }
h1{ font-size:2.5em; background:#eee; padding: 5pt; margin:1cm -1cm 0; border-top: 1px black solid; }
a{ color: #0645ad; text-decoration: none; border-bottom: 1px dotted #0645ad;}
h1 > a, h2 > a, h3 > a{ color: black; }
a:visited{ color: #0b0080; }
h1 > a:visited, h2 > a:visited, h3 > a:visited{ color: black; }
a:hover{ color: #06e; }
a:active{ color: #faa700; }
a:focus{ outline: 1px dotted; background: #fdca23}
a:hover, a:active{ outline: 0; }
/ Tables, figures /
figure > *{
box-shadow: 3px 3px 3px #ccc;
}
blockquote{
background: #EEE;
}
hr{
display: block;
height: 2px;
border: 0;
border-top: 1px solid #aaa;
border-bottom: 1px solid #eee;
margin: 1em 0;
padding: 0;
}
pre {
border: 1px #aaa solid;
border-radius: 5px;
background: #f8f8f8;
padding: 3pt;
margin-left: 1cm;
padding:0.1cm 1cm;
}
b, strong{ font-weight: bold; }
dfn{ font-style: italic; }
ins{ background: #ff9; color: #000; text-decoration: none; }
mark{ background: #ff0; color: #000; font-style: italic; font-weight: bold; }
sub, sup{ font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup{ top: -0.5em; }
sub{ bottom: -0.25em; }
ul, ol{ padding: 0 0 0 2em; }
li { margin: 0 }
/p:last-child{ margin:0 }/
dd{ margin: 0 0 0 2em; }
td:nth-child(even), th:nth-child(even) { background: #F1F1F1 }
dt{ font-weight: bold; }
dl{ padding: 0 5mm; }
.footnotes{
background: #FDFCF2;
padding: 0 1em;
}
}
/* #######################
CSS rules for print
####################### */
@media print{
body{ font-size:12pt; max-width:100%; }
a{ text-decoration: underline; }
hr{ height: 1px; border:0; border-bottom:1px solid black; }
hr:after{ height: 1px; border:0; border-bottom:1px solid black; }
a[href]:after{ content: " (" attr(href) ")"; }
abbr[title]:after{ content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after{ content: ""; }
pre, blockquote{ border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; }
tr, img{ page-break-inside: avoid; }
img{ max-width: 100% !important; }
@page :left{ margin: 15mm 20mm 15mm 10mm; }
@page :right{ margin: 15mm 10mm 15mm 20mm; }
p, h2, h3{ orphans: 3; widows: 3; }
h1, h2, h3{ page-break-after: avoid; }
}
</style>
Embryon de code à adapter selon les browsers, ajouter un :hover et un :active.
<input type="button" value="Coucou" style="
font-size: 5mm;
color: white;
text-shadow: 1px 1px 3px black;
border-radius: 8px;
border: thin black solid;
background: hsl(0, 100%, 42%);
background: hsl(0, 100%, 42%)
-webkit-linear-gradient(top,
rgba(255, 255, 255, 0.5) 1%,
rgba(255, 255, 255, 0) 30%,
rgba(0, 0, 0, 0) 70%,
rgba(0, 0, 0, 0.25) 100%);
padding: 10px 20px;
margin: 1cm;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
">
Pleins de trucs et astuces en CSS (par le créateur d'Alsacréations)
(via http://sebsauvage.net/links/)
Tout un tas d'outils modernes pour faire du web...
google-styleguide - Style guides for Google-originated open-source projects - Google Project Hosting
Guidelines de Google pour faire du code. Probablement un bon recueil de conseils.
Snippets HTML / CSS / JavaScript qui semblent sympas.
Autre feuille de style CSS pour un layout en grilles. Ca semble léger, mobile friendly et efficace.
(voir aussi http://gregoire.surrel.org/links/index.php?XaNH-A)
Framework fort intéressant pour développer une interface utilisateur riche. Fournit du CSS et du JS, le layout s'adapte tout seul en fonction de la largeur d'écran de manière fluide.
C'est la version sur amphétamines de CSSGrid (http://cssgrid.net/) qui propose une feuille de style pour créer un layout fluide qui peut utiliser jusqu'à 12 colones.