https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228
C'est juste... beau. ../.http://warriordudimanche.net/plugins/WDD_replace/img/normal/sad.png
`
1
2
3
4
5
6
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}
`
../.http://warriordudimanche.net/plugins/WDD_replace/img/big/mouille.jpg
Via Plop linksSource image
repost automatique de mon site...
https://lokesh-coder.github.io/pretty-checkbox/
Une lib pour faire des checkboxes en pur css. C'est bôôôôô oOVia Marquetapages Shazen
repost automatique de mon site...
https://mobile.twitter.com/i/moments/880688233641848832
J'ai la flemme de résumer, mais je capture
Via https://links.kalvn.net/
repost automatique de mon site...
https://css-tricks.com/lets-look-50-interesting-css-properties-values/
Quelques trucs que je retiens pour moi :
`
body {
counter-reset: heading; /* init the counter for headings (you can give it any other name) /
}
h2 {
counter-increment: heading; / increments the counter on every tag /
counter-reset: subheading; / here we init or reset the subheading /
/ so that we get 1.1, 1.2, 1.3, then after new heading it will go 2.1, 2.2, 2.3 /
}
h2:before {
content: counter(heading) " - "; / using :before selector and counter() function we can add the index to the heading /
}
h3 {
counter-increment: subheading; / increment the subheading counter on every tag */
}
h3:before {
content: counter(heading) "." counter(subheading) " - ";
}
`
`
.parent {
color: #ccc;
border: 1px solid currentColor;
}
.child {
background: currentColor;
}
`
`
.pixelated {
-webkit-image-rendering: pixelated;
image-rendering: pixelated;
}
img {
width: 200px;
height: 200px;
}
`
`
.-shape-outside {
shape-outside: circle(50%);
float: left;
}
.circle {
width: 160px;
height: 160px;
background-color: #fff;
border-radius: 50%;
margin-right: 24px;
overflow: hidden;
border: 1px solid #eee;
img {
width: 100%;
height: 100%;
}
}
div {
text-align: justify;
}
html, body {
height: auto;
}
`
`
@supports (display: grid) {
.container {
display: grid;
}
}
@supports (image-rendering) {
img {
image-rendering: pixelated;
}
}
@supports (display: grid) and ((image-rendering: crisp-edges) or (image-rendering: pixelated)) {
}
`
`
:root {
--primary-color: #cccccc;
}
body {
color: var(--primary-color, #cccccc);/* le second est le fallback */
}
`
These values are used for sizing things relative to the viewport size. While width is alwasys relative to the parent container, vh or vw always use viewport size as a basis.
For a browser window that has a viewport 1280x655px, 1vh is equal to 6.55 pixels, 1vw is equal to 12.8pixels, vmin is 6.55 pixels (smallest of the two values), and vmax is 12.8 pixels (largest of the two values).
`
.vertical-rl {
writing-mode: vertical-rl;
}
.vertical-lr {
writing-mode: vertical-lr;
}
`
Source image
repost automatique de mon site...
https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29?gi=1edbfb5aef2d#.2cigjk6yi
Traduction rapide pour mémoire de ces 10 principes pour des animations fluides...
Via Kalvn's linksSource image
repost automatique de mon site...
http://www.heropatterns.com/
Vachement bien ça: on peut même adapter les couleurs ! ../.plugins/WDD_replace/img/normal/content.png Via Marquetapages ShazenSource image
repost automatique de mon site...
http://cssicon.space/#/
Fascinant d'efficacité, d’ingéniosité et de concision... ../.plugins/WDDreplace/img/normal/oooh.png ../.plugins/WDDreplace/img/normal/siffle.png
avec quelques classes css, il fait des icônes... ../.plugins/WDD_replace/img/normal/wow.png
Du coup, c'est plus léger que les font/img, plus élégant, on peut changer la couleur...
Via bookmarks.xavierbarbotSource image
repost automatique de mon site...
http://adrianroselli.com/2016/06/punch-out-avatar.html
hoooo c'est chouette ! Bonne idée
http://webagility.com/posts/remove-forced-yellow-input-background-in-chrome
Con de Chromium avec son fond jaune merdique sur les input pré remplis !
Un "bug" de 2008, quoi, chier...
Donc, un palliatif est d'utiliser un box shadow de la couleur qu'on veut:
`
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
`
Par contre, comme le dit l'auteur : « if you desperately need transparent background color you're doomed»
http://www.creativejuiz.fr/blog/tutoriels/creer-menu-sticky-avec-javascript-css
à regarder plus tard....
https://medium.com/truth-labs/how-to-make-complex-icons-with-only-css-e135e6dc2c5e
Oooooh oO du coup on comprend mieux...
edit: un complément, http://nicolasgallagher.com/pure-css-gui-icons/demo/
http://philipwalton.github.io/solved-by-flexbox/
Je me regarderai ça ce soir, tranquilou...
https://jdsteinbach.com/css/use-cases-css-variables/
Bien sympa, les variables en css, mais tant que ce n'est pas universellement supporté, ça ne sert à rien...
http://lehollandaisvolant.net/?d=2015/08/22/22/11/32-css-quelques-possibilites-apportees-par-le-modele-flexbox
Faut que je m'y mette, je fais régulièrement partie des délinquants ! ^^
http://www.frontendevelopers.com/footer-sticky-at-bottom-with-flexible-height/
\o/ merci Timo !
http://lehollandaisvolant.net/?mode=links&id=20150731185744
Tiens, j'ai eu besoin d'une astuce comme ça ya pas longtemps : merci !
Drirect dans mon snippetvamp ;-)
http://snippetvamp.warriordudimanche.net/snippetvamp.php?snippet=55bbb92ea7faf
https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda
Je croyais avoir déjà coudifié... donc, un résumé:
1- La lumière vient d'en haut: donner un effet 3d subtil en creux ou en relief
- en creux: text input, boutons pressés, ascenseur, bouton radio, checkbox
- en relief: boutons non pressés, bouton d'ascenseur, dropdown, cards, boutons d'un radio selectionné, popups
2- Noir et blanc d'abord:
- réaliser l'ensemble en N&B puis au final ajouter la couleur mais toujours avec un objectif précis (ça, il faudra que je le retienne ^^)
- ajout de la couleur: une seule couleur et ses variations (saturation ou luminosité) pour conserver la pertinence de la couleur
3- Doubler les espaces vides: espace entre les lignes, entre les éléments, entre les groupes d'éléments... ex: entre les items d'un menu, 2x la hauteur du texte.
4- Placer du texte au-dessus d'une image:
- directement dessus avec une image sombre et un texte blanc, lisible dans toutes les dimensions d'écran
- ajouter un overlay pour pouvoir gérer l'assombrissement (marche aussi très bien avec les thumbnails)
- texte avec fond de couleur ou noir (semi transparent ou pas)
- fond flouté (div avec le même fond flou ou texte placé sur une partie floue de l'image)
- dégradé doux vers une couleur unique (en général en footer) : permet d'améliorer la lisibilité du texte sans altérer l'image (effet possible via css: un fond dégradé de noir rgba de 0% à 20% d'opacité par exemple)
- on peut mélanger le flou et le dégradé
5- Faire ressortir le texte:
- diviser le css du texte entre ce qui en accroît la visibilité (gras, grand, capitalisé, italique, plus de marge ou de contraste etc) et ce qui la décroît (petit, fin, moins contrasté, moins de marge etc).
- hover/selected: jouer sur la couleur du texte, la couleur du fond, l'ombre, le soulignage, relief/creux, le changement de contraste (blanc>coloré ou coloré>blanc avec un fond subtilement assombri)
6- Utiliser les bonnes polices:
- clair et simple
- peu de polices différentes
- icon fonts
7- Chercher l'inspiration: observer les UI qu'on trouve belles et chercher pourquoi pour s'en inspirer
http://codepen.io/koheishingai/pen/uKvJF
C'est beau, j'en chialerais ^^ merci ;-) (hop dans mon snippetvamp: http://snippetvamp.warriordudimanche.net/snippetvamp.php?snippet=556ec5810fd0f )
{code
<div class="carousel">
<div class="carousel-inner">
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked"/>
<div class="carousel-item">
<img src="http://fakeimg.pl/2000x800/0079D8/fff/?text=Without">
</div>
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden=""/>
<div class="carousel-item">
<img src="http://fakeimg.pl/2000x800/DA5930/fff/?text=JavaScript">
</div>
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden=""/>
<div class="carousel-item">
<img src="http://fakeimg.pl/2000x800/F90/fff/?text=Carousel">
</div>
<label for="carousel-3" class="carousel-control prev control-1">‹</label>
<label for="carousel-2" class="carousel-control next control-1">›</label>
<label for="carousel-1" class="carousel-control prev control-2">‹</label>
<label for="carousel-3" class="carousel-control next control-2">›</label>
<label for="carousel-2" class="carousel-control prev control-3">‹</label>
<label for="carousel-1" class="carousel-control next control-3">›</label>
<ol class="carousel-indicators">
<li>
<label for="carousel-1" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-2" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-3" class="carousel-bullet">•</label>
</li>
</ol>
</div>
</div>
<style>html, body {
margin: 0px;
padding: 0px;
background: url("http://digital.bnint.com/filelib/s9/photos/whitewood4500x3000lores.jpg");
}
.carousel {
position: relative;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
margin-top: 26px;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-open:checked + .carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
}
.carousel-item img {
display: block;
height: auto;
max-width: 100%;
}
.carousel-control {
background: rgba(0, 0, 0, 0.28);
border-radius: 50%;
color: #fff;
cursor: pointer;
display: none;
font-size: 40px;
height: 40px;
line-height: 35px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
cursor: pointer;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
width: 40px;
z-index: 10;
}
.carousel-control.prev {
left: 2%;
}
.carousel-control.next {
right: 2%;
}
.carousel-control:hover {
background: rgba(0, 0, 0, 0.8);
color: #aaaaaa;
}
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 2%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
.carousel-indicators li {
display: inline-block;
margin: 0 5px;
}
.carousel-bullet {
color: #fff;
cursor: pointer;
display: block;
font-size: 35px;
}
.carousel-bullet:hover {
color: #aaaaaa;
}
color: #428bca;
}
width: 100%;
position: absolute;
padding: 0px;
margin: 0px auto;
text-align: center;
font-size: 27px;
color: rgba(255, 255, 255, 1);
font-family: 'Open Sans', sans-serif;
z-index: 9999;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}
</style>
code}
https://css-tricks.com/elegant-fix-jumping-scrollbar-issue/
Une astuce pour éviter le saut horizontal quand le contenu d'une page web dépasse soudainement la hauteur visible et que la scrollbar apparaît.
Je connaissais html { overflow-y: scroll; } mais pas html { margin-left: calc(100vw - 100%);
Bon, ben les deux marchent même s'il semble que le second soit plus "élégant" ^^
http://leaverou.github.io/awesomplete/#customization
Oui, elle est brillante, astucieuse, pro et en plus mignonne comme un coeur ^^
Son dabblet est une tuerie ^^
Lien vers le message anterieur http://bookmarks.ecyseo.net/?cyz2cQ
http://www.alsacreations.com/astuce/lire/1661-accelerez-vos-polices-d-icones.html
je me note ça pour plus tard...
une astuce pour intégrer seulement les webfonts nécessaires directement dans le fichier css...
http://tympanus.net/codrops/css_reference/
C'est juste... beau ^^
http://bada55.io/
Oh ça j'aime bien ! ^^
Les couleurs correspondantes à certains mots en anglais...
le premier: booops (#B000B5) :-P
http://korben.info/creez-vos-animations-css3-en-quelques-clics.html
peut-être sympa ça...
http://www.alsacreations.com/article/lire/1630-la-fonction-calc-en-css.html
Parcouru en diagonale, je reviendrai dessus plus tard -> coude
http://www.fabricecourt.com/formation/doit-on-justifier-un-texte-sur-le-web/
Sinon, il y a des trucs du genre ça
https://github.com/aristus/sweet-justice
pour 3ko de js (+jquery) ça fait une justification propre...
Lien vers le message anterieur http://lehollandaisvolant.net/?mode=links&id=20140319121006
http://css-tricks.com/flexbox-bar-navigation/
Flexbox c'est bô, flexbox c'est simple...
Mais bon, il faut quand même prévoir un fallback pour un truc compatible avec tout http://caniuse.com/flexbox
http://dev.opera.com/articles/view/css-viewport-units/
Ooooh que ça a l'air intéressant, ça, oooooh ! -> coude ! riditléteur
http://demosthenes.info/blog/775/Which-CSS-Measurements-To-Use-When
Tiens, un très bon résumé des unités en css et de leur contexte d'utilisation.
http://snippetvamp.warriordudimanche.net/snippetvamp.php?snippet=525ed47f87cde
Au passage, si ça peut servir:
en cas de bug d'affichage sous firefox quand on met overflow:hidden et que le contenu supposé invisible ne l'est pas, il suffit d'ajouter overflow: -moz-hidden-unscrollable; et ça fonctionne...
http://guidecss.fr/
un très bon tuto avec d'excellentes remarques.
http://lehollandaisvolant.net/?mode=links&id=20131205213747
Je note, pour la prochaine version d'auto_css, un jour ^^
Merci Timo ;)
http://matthewkosloski.me/labs/pixem/
Un convertisseur de px vers em ultra simple et minimaliste...
A conserver par devers soi ;)
https://github.com/LeaVerou/prism
Lea Verou, auteure de Dabblet entre autres, a fait un syntax highlighter...
Vu son niveau de maîtrise et la qualité de son travail en général, moi je dis que ça se teste...
http://css-tricks.com/centering-percentage-widthheight-elements/
Bonne idée ça: utiliser translate pour centrer un élément dont on ne connaît pas la taille.
http://www.grafikart.fr/tutoriels/html-css/box-sizing-427
un bon résumé des avantages du box-sizing (comment on a pu vivre avant ^^)
http://bajazet.fr/shaarli/?plATHg
Ces sélecteurs sont très utiles pour cibler des objets n'ayant pas de classe ou d'id quand tu n'as pas complètement la main sur la structure HTML du projet ou quand l'objet va se répéter dans la page et que l'ajout d'une classe pour chaque itération alourdirait le code inutilement.
De plus, ils permettent des fioritures uniquement via les css sans passer par un codage spécifique pour isoler les objets en questions (genre des styles spéciaux pour les liens qui s'ouvrent dans une nouvelle page ou qui ouvrent un document en particulier... on se passe d'une portion de js ou de php qui teste tout pour ajouter des classes à la pelle de chantier ^^)
C'est léger, ça allège le code html, ça simplifie la vie du codeur, c'est très bien pris en charge et ça maintient la séparation dev / design+maquette...
http://www.lafermeduweb.net/billet/helium-css-dectecter-le-css-non-utilise-sur-votre-site-1596.html
Tiens ça peut être utile ça... c'est vrai qu'à la fin d'une session hardcore de prog/intégration, on finit par voir flou en se disant qu'on optimisera les css plus tard...
C'est une bon début ^^
https://github.com/LeaVerou/CSSS
Oh ! Léa Verou, l'auteure du génial Dabblet ( https://github.com/LeaVerou/dabblet ) propose un système de slidesho via css ! Faut que je regarde ça !
via Seb http://sebsauvage.net/links/?7ysPMQ
http://lehollandaisvolant.net/?mode=links&id=20130530205926
ha oui, pas con ça ^^ Hop, SnippetVampirisé ;)
Meeeercitiiimo (merci Timooo!) (sur l'air de merci patron http://www.dailymotion.com/video/x1hlgpclip-video-les-charlots-merci-patromusic )
http://www.webresourcesdepot.com/self-hosted-and-embeddable-html-css-js-playground-editr/
Un éditeur bac à sable pour css+js+html à héberger sur son propre serveur ou à embed où on veut...
A tester !
(difficile de faire aussi bien que dabblet par exemple, mais ça m'a l'air bien quand même !)
http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html
Le contexte de block en CSS: excellent article qui permet de comprendre la réaction ubuesque de certains enfants en float...
http://learn.shayhowe.com/advanced-html-css/complex-selectors
les sélecteurs CSS complexes
quelques trucs à garder sous la main
http://www.positioniseverything.net/easyclearing.html
un clear fix crossbrowser
http://www.hteumeuleu.fr/arreter-media-queries/
Je +1 à fond !
http://www.creativejuiz.fr/blog/css-css3/difference-entre-pseudo-element-et-pseudo-classe/comment-page-1#comment-11794
http://www.creativejuiz.fr/blog/tutoriels/nth-child-css2-compatible-ie7/comment-page-1#comment-11793
Excellent truc pour remplacer nth-child en css2.1
http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/
Styler les ol li : un point sur couter en css : très intéressant.
http://perishablepress.com/wrapping-content/
couper du texte à la ligne dans les <pre>
http://www.knacss.com/
KNACSS est ce que l'on appelle un "framework CSS" comme il en existe tant d'autres.
Son but est de servir de base commune à tous les projets d'intégration web, grâce à une nomenclature et des conventions constantes. Mais aussi de faciliter les positionnements d'éléments, de gérer les alignements, les gouttières, etc. Le tout de la façon la plus propre et accessible possible
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
des ombres en perspective en css
http://www.noupe.com/css/15-css-habits-to-develop-for-frustration-free-coding.html
http://www.cleancss.com/
http://cssarrowplease.com/
http://bearcss.com/
http://bearcss.com/ vous demande simplement de lui envoyer votre fichier html, il se charge du reste et vous renvoie un css contenant :
Les noms de vos balises importantes
Les nom de vos classes
Les nom de vos id
Le tout séparé en types par des commentaires
http://www.99lime.com/elements/
http://dochub.io/#css/
http://imsky.github.com/cssFx
cssFx is a standalone polyfill that inserts the vendor-specific CSS3 properties necessary for old and new browsers. This saves you tons of time, maintenance, and bandwidth! Check it out:
http://www.lafermeduweb.net/billet/des-menus-css-originaux-pour-vos-applis-web-35.html
http://html5snippets.com
http://css-tricks.com/snippets
http://oldblog.pixarea.com/index.php/2007/01/07/62-dynamic-css-magic-with-php
http://lehollandaisvolant.net/index.php?2011/10/30/21/27/41-4-proprietes-css-meconnues
http://cssload.net
http://prefixmycss.com
http://perishablepress.com/press/2009/06/28/css-hacks-for-different-versions-of-firefox
http://www.spritecow.com
Sprite cow est un site plutôt utile pour tous les amateurs de sprite CSS. Le principe est de vous permettre de sélectionner un élément de votre sprite CSS par simple clic afin d’obtenir immédiatement sa position et sa taille (finis les retour sur photoshop ou autre pour trouver la position de tel ou tel élément ! ). Le service est très simple et assez efficace (à condition d’avoir une sprite CSS avec des éléments séparés par des espaces vide) et permet de gagner pas mal de
http://www.code-couleur.com
http://www.css3.me
http://www.puntogeek.com/2011/05/05/consejos-practicos-rapidos-para-desarrolladores-web-noveles
http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform
forms jquery
http://www.sprymedia.co.uk/index
http://min.frexy.com/lab/css-swap-hover
http://www.catswhocode.com/blog/8-javascript-solutions-to-common-css-problems
http://buildinternet.com/2009/09/sproing-make-an-elastic-thumbnail-menu
http://www.colorzilla.com/gradient-editor
http://procssor.com
http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html
La technique des sprites consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d'affichage sur l'une ou l'autre image ser
http://www.splashnology.com/blog/css/225.html
http://www.paperblog.fr/403463/des-tableaux-de-donnees-simples-standards-et-lisibles-en-css-et-php
Des tableaux de données simples, standards et lisibles en CSS et PHP
http://farhadi.ir/works/smartoptimizer
SmartOptimizer (previously named JSmart) is a PHP library that enhances your website performance by optimizing the front end using techniques such as minifying, compression, caching, concatenation and embedding. All the work is done on the fly on demand.
http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them
http://www.spry-soft.com/grids
http://www.cssdrive.com/imagepalette/index.php
http://www.webhostingsecretrevealed.com/featured-articles/30-must-see-web-generator-for-lazy-webmasters
générateurs web
http://line25.com/articles/10-usability-crimes-you-really-shouldnt-commit
10 problèmes d'ergonomie à éviter