185 results for tags
css x
-
UnCSS
Je me met ça sous le coude: un outils pour vous aider à supprimer le code inutile de vos CSS. Il supporte même les CSS injectés par Javascript. (via http://links.la-bnbox.fr/?TxMGJQ)2014-04-14 10:25:38https://github.com/giakki/uncss
-
CSS Diner
C'est fun ! Un jeu où il faut attraper les objets en entrant les bons sélecteurs CSS. C'est pas bien difficile, mais amusant. L'idée est bonne est pourrait s'appliquer à d'autres choses.2014-02-11 18:03:21
(via http://colibri-libre.org/liens/?wHxzFQ)http://flukeout.github.io/
-
Liquidapsive (Liqui-dap-sive)
Pour saisir la différence entre designs "statiques", "liquide", "responsive" et "adaptive". (Même si je ne suis pas totalement d'accord avec la différence entre "adaptive" et "responsive".)2014-02-05 08:09:32
Sélectionnez un type de design en haut à droite, et redimensionnez la fenêtre pour voir comment la page se comporte.
Dommage qu'ils ne fournissent pas un CSS séparé pour chaque mode, cela aurait aidé à mieux comprendre.http://liquidapsive.com/
-
[MÀJ] Les préfixes CSS obsolètes - Le Hollandais Volant
Pensez à supprimer vos préfixes vendeurs inutiles CSS (-moz-/-webkit-/-ms-/-o-...). (Il faudra aussi que je le fasse, hein.)2014-02-02 15:13:29http://lehollandaisvolant.net/?d=2014/01/28/16/36/19-mAj-les-prefixes-css-obsoletes
-
CSS viewport units: vw, vh, vmin and vmax - Dev.Opera
Merci à mon collègue Loïc de m'avoir signalé ces unités: Cela permet d'avoir des tailles de polices proportionnelles au viewport.2014-02-01 19:28:27
Un exemple là pour le titre: http://sebsauvage.net/ambient/ et redimensionnez la fenêtre.http://dev.opera.com/articles/view/css-viewport-units/
-
Nettuts+ Prefixr
Un outils en ligne pour mettre automatiquement les préfixes vendeur. Pratique. (via Korben)2014-01-28 08:38:12http://prefixr.com/index.php
-
CSS: User Agent Selectors — Rog.ie
Ca c'est pas bête comme idée: ça permet d'appliquer des styles CSS particuliers pour certains navigateurs (ou même pour navigateurs tactiles), avec un minimum de javascript pour la "détection".2014-01-14 10:27:33
(via http://colibri-libre.org/liens/?s3iqXw)
Le javascript:
<script>
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
</script>
Et vous pouvez faire alors:
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}http://rog.ie/blog/html5-boilerplate-addon
-
CSS Transparency Settings for All Browsers | CSS-Tricks
Gérer la transparence CSS de manière la plus universelle possible pour les différents navigateurs:2014-01-12 09:29:09
.transparent { zoom: 1; filter: alpha(opacity=50); opacity: 0.5; }
(via http://hub.tomcanac.com/liens/?tT_06g)http://css-tricks.com/css-transparency-settings-for-all-broswers/
-
Note : les tables en responsive design. - Le Hollandais Volant
Une petite astuce pour faire des <table> de manière responsive. Pas mal !2014-01-07 19:55:33http://lehollandaisvolant.net/?mode=links&id=20140107205810
-
How to Hide your Email Address on Web Pages
Différentes manière de mettre votre adresse email dans une page web tout en empêchant les robots de la ramasser. Ces derniers étant généralement aveugles aux CSS et incapable d'exécuter le javascript, voici diverses solutions pour les abuser.2014-01-04 17:45:25http://www.labnol.org/internet/hide-email-address-web-pages/28364/
-
DevDocs/jQuery
Une webapp qui centralise de nombreuses documentations liées au web: html, css, dom, javascript, jQuery... En prime, c'est opensource: https://github.com/Thibaut/devdocs2013-12-18 15:48:53
(via http://www.slobberbone.net/shaarli/index.php?4aAj4w)http://devdocs.io/jquery/
-
W3Fools – A W3Schools Intervention
Une critique du site w3schools. (via http://hub.tomcanac.com/liens/?ie5Niw)2013-12-15 14:27:05http://www.w3fools.com/
-
Note : les préfixes CSS devenues inutiles en 2013 - Le Hollandais Volant
Pensez à nettoyer vos CSS des préfixes vendeurs qui ne sont plus nécessaires (-moz, -o, -ms...). (Merc Timo)2013-12-05 22:47:08http://lehollandaisvolant.net/?mode=links&id=20131205213747
-
Sprite Cow - Generate CSS for sprite sheets
Pour faire des sprites CSS: chargez une image, cliquez une zone, il vous donne automatiquement les coordonnées, la taille et le CSS qui va avec.2013-12-02 17:31:28
Ça fait gagner énormément de temps et évite d'avoir à aller cherchez à la main toutes les coordonnées.http://www.spritecow.com/
-
Can I use... Support tables for HTML5, CSS3, etc
J'oublie toujours cet excellent site qui vous rapporte la compatibilité des navigateurs avec certaines technologies, que ce soit css, html, javascript ou les codecs.2013-11-29 10:04:34
Exemple: Avec quels navigateurs peut-on utiliser Ogg Vorbis/Theora ? http://caniuse.com/ogv
Par contre, très curieusement, ce site a de gros oublis, comme le format MP3.http://caniuse.com/
-
Animatron
Un outils en ligne (pas opensource visiblement) pour créer des animations en HTML5. C'est assez sympa à utiliser. On peut créer des animations sans avoir à s'enregistrer.2013-11-15 14:28:48http://animatron.com/
-
Ink – Une boite à outils pour vos interfaces web | Korben
à tester, pour gagner du temps sur les dev web: http://ink.sapo.pt/2013-08-14 10:35:07http://korben.info/ink-outil-framework-interface-web.html
-
http://mathiasbynens.be/demo/css-without-html
Une page qui affiche quelque chose... sans le moindre code HTML.2013-08-13 00:00:17
Comment ça marche ? Le serveur web envoie dans les entêtes HTTP de réponse: Link:<css-without-html.css>;rel=stylesheet
Le navigateur va donc charger ces CSS: http://mathiasbynens.be/demo/css-without-html.css
C'est le CSS qui affiche quelque chose.http://mathiasbynens.be/demo/css-without-html
-
Absolute Horizontal And Vertical Centering In CSS | Smashing Coding
Centrage horizontal et vertical : quelques manières de faire. (via https://www.ecirtam.net/links/?sqnUlQ)2013-08-10 22:25:36http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
-
Dirty Markup · Tidy and Beautify your HTML, CSS, and JavaScript code
Un petit outils de "beautifier"/"tidy" de code html, css et javascript: Cela corrige le code incorrecte et reformatte pour que ça soit mieux indenté.2013-08-09 11:30:52
La partie HTML utilise HTML Tidy.http://www.dirtymarkup.com/
-
Font Stacks | CSS-Tricks
Je recherche à chaque fois mes font-stacks standard. Je me note ça là: http://sebsauvage.net/paste/?7d4413d0c2c733b9#kkprONO4FtFkZUe2skvpnSHb/coMdCYjO762xypzJmg=2013-08-09 10:40:04
En gros, c'est pour obtenir quelque chose de correct (par exemple du monospace qui n'est *PAS* cette horreur de "Courier") sans pour autant recourir aux webfonts.
Ces font-stacks référencent des polices proches visuellement, et couvre la plupart des systèmes (Windows, Mac, Linux).
Par exemple, pour la police monospace:
- Consolas, c'est pour Windows.
- "Lucida Console" pour les anciens Windows (qui n'ont pas Consolas).
- "DejaVu Sans Mono" est présent sur la plupart des systèmes Linux.
- "Liberation Mono" est pour Linux (généralement les RedHats).
- Monaco, c'est pour les Macs.
- etc.
- et enfin, si vraiment aucune font n'est dispo, ça retombe sur le défaut: monospace.http://css-tricks.com/snippets/css/font-stacks/
-
Leon Arnott's Site
La balise <blink> vous manque déjà ? Pas de panique, voici du CSS pour la restaurer (ainsi que quelques autres bricoles amusantes):2013-08-09 07:32:02
blink
{
text-decoration: none;
animation: fade-in-out 1s steps(1,end) infinite alternate;
-webkit-animation: fade-in-out 1s steps(1,end) infinite alternate;
}
@keyframes fade-in-out
{
0%,100% { opacity: 0 }
50% { opacity: 1 }
}http://leonarnott.neocities.org/
-
Pixem — A PX to EM converter
Normalement - si on faisait les choses bien - on devrait tous spécifier nos taille de polices en "em" et non en "px". Voici un petit outils en ligne minimaliste pour les convertir.2013-08-06 09:54:51
(via http://www.warriordudimanche.net/shaarli/?Qxk-KA)http://matthewkosloski.me/labs/pixem/
-
Apprendre les mises en page CSS
Quelques bases du layout CSS (via http://pixelcafe.fr/links/?l35Clg)2013-07-31 11:29:06http://fr.learnlayout.com/
-
Blog Stéphane Bortzmeyer: Recherche d'un nouveau logiciel de présentation
Stéphane Bortzmeyer recense plein d'outils de présentation à base d'html/css. Sympa !2013-07-25 09:42:52http://www.bortzmeyer.org/logiciel-presentation-nouveau.html
-
Note CSS3 : redimentionner une image automatiquement - Le Hollandais Volant
Merci ! ça me sera utile.2013-07-18 10:25:30
(Image en affichage pleine fenêtre du navigateur (hauteur et largeur) en gardant le ratio de l'image, juste en CSS.)http://lehollandaisvolant.net/?mode=links&id=20130718014626
-
Troubleshooting CSS | Codrops
Quelques gotchas CSS et comment y remédier. (via http://colibri-libre.org/liens/?Cno-Dw)2013-07-17 14:09:24http://tympanus.net/codrops/2013/07/17/troubleshooting-css/
-
CSS Balls - hop.ie
i M@N m'envoie cette page qui explique comment faire une sphère en CSS3. Et effectivement, l’œil me rappelle quelque chose ;o)2013-07-08 09:48:42http://hop.ie/blog/balls/
-
Nifty Modal Window Effects
Sympas, les effets de ces fenêtres modales ! (via http://colibri-libre.org/liens/?Q1tUWg)2013-06-26 10:25:55
(Même si dans l'absolu je ne suis pas fan des fenêtre modales.)http://tympanus.net/Development/ModalWindowEffects/
-
CSS3 Drop Shadows Generator - Application
Un très chouette générateur d'ombre CSS (via Korben)2013-05-30 13:18:14https://css3-drop-shadows.herokuapp.com/app
-
Editr - HTML, CSS, JavaScript playground
Un petit éditeur html/css/js en ligne dans le genre de jsFiddle.2013-04-30 13:10:20
Les sources sont là: http://git.io/editr
(via http://bajazet.fr/shaarli/?ndtptA)http://idered.pl/editr/
-
Top 10 CSS Generators | Webpop
Différentes générateurs de CSS: text avec ombre, dégradés, boutons...2013-04-23 23:40:28
(via http://lehollandaisvolant.net/index.php?mode=links&id=20130423223726)http://www.webpop.com/blog/2013/04/23/css-generators
-
The magic of “overflow: hidden” — Articles — Colin Aarts, freelance web developer
ça peut servir (via Le Hollandais Volant).2013-04-12 10:56:19http://colinaarts.com/articles/the-magic-of-overflow-hidden/
-
Introduction au responsive design : comment rendre son site responsive sans trop d’efforts ? | Soat blog
Quelques conseils pour passer ses feuilles de style au Responsive design (par HowTommy.net)2013-04-10 12:43:41http://blog.soat.fr/2013/04/introduction-au-responsive-design-comment-rendre-son-site-responsive-sans-trop-defforts/
-
Geo for Bootstrap, a Timeless Theme by Divshot
Un thème Bootstrap pour ramener votre site aux heures de gloire de Geocities. :-D2013-04-07 21:02:15http://divshot.github.io/geo-bootstrap/
-
Animatable: One property, two values, endless possiblities
Plein d'exemples d'animation de propriétés CSS3. C'est du pure CSS ! (via http://lehollandaisvolant.net/index.php?mode=links&id=20130327013024)2013-03-27 13:40:40http://leaverou.github.com/animatable/
-
Aptiverse.com blog: Three CSS features you need to know about
Woao... il y a des choses sympa en CSS3.2013-02-26 13:07:59http://aptiverse.com/blog/css_features/
-
A collection of best front-end frameworks with comparison | By usabli.ca
Perdu dans les frameworks CSS ? Voici une petite compilation.2013-02-23 23:53:45http://usablica.github.com/front-end-frameworks/compare.html
-
Standards du Web : les développeurs devront cesser de privilégier WebKit
Youpi... l'alerte levée par Daniel Glazman il y a quelques mois fait enfin la une de Clubic.2013-02-12 18:31:07
(cf. http://sebsauvage.net/rhaa/index.php?2012/02/09/12/07/25-le-web-ouvert-est-menace)http://pro.clubic.com/creation-de-site-web/langage-programmation/html-5/actualite-540606-standard-web-webkit-navigateur-css-html.html
-
CSS 3D Clouds
Des nuages. Très joli.2013-02-09 18:59:25http://www.clicktorelease.com/code/css3dclouds/
-
HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck
Des tonnes d'astuces/exemples CSS.2013-02-04 16:39:38http://cssdeck.com/
-
hint.css - A tooltip library in CSS
Des tooltips en pur CSS. Sympa !2013-02-04 16:35:58http://kushagragour.in/lab/hint/
-
Home - OK-Studios - Corporate Design & Brand Creation - Typo3 & Magento Agentur Hamburg
Nono m'envoie ce lien vers cette page qui utilise un effet parallaxe quand on scrolle vers le bas. Très joli.2013-01-18 14:09:04http://www.ok-studios.de/home/
-
Ui Parade - Live Tools
De chouettes générateurs de boutons, formulaires et autres, fournissant ensuite le code html et css. Rudement bien !2013-01-16 09:06:22
(Note: ne marche pas dans Opera)http://livetools.uiparade.com/