Tag: css

JS : Afficher un menu qui ce cache quand on clique ailleurs que sur un élément du menu

Cas d'utilisation : un menu déroulant qui s'affiche lors d'une recherche (le menu contient des éléments cliquables et quand on clique ailleurs sur la page on souhaite masquer le men...

Transformer votre CSS en SCSS

Il peut arriver de vouloir migrer un "vieux" CSS en SCSS pour factoriser les variables et centraliser les urls des ressources par exemple. Voici un outil complet qui contie...

L'attribut form d'html5

Vous avez peut-être un jour souffert des formulaires en html. html5 introduit une nouveauté l'attribut form, celui-ci permet de placer les input/select/button partout dans votre page...

jQuery Highlight : Mettez vos résutats de recherche en évidence !

Il existe un plugin jQuery pour mettre en évidence une chaîne de caractères dans un paragraphe. Voici le résultat : Attention ce code est particulièrement compliqué :-) : $("#i...

Display:inline-block les espaces indésirables

Je faisais des tests d'intégrations et en travaillant au pixel près j'ai découvert le problème des espaces indésirables entre les éléments inline-block.  En bidouillant sur chrome, j...

::selection la pseudo class CSS

Je me baladais sur le net ( https://htmlemailboilerplate.com/ ), je ne sais plus trop ce qu'il m'a pris mais j'ai selectionné du texte (essayez), la selection sera rose (magenta). Ca...

Les ressources / articles web dev de ces derniers jours

Voici les quelques ressources que j'ai trouvé intéressante ces derniers jours (ça fait office de post-it en ce qui me concerne). Framework html / css / js : https://www.99lime.com/ j...

Barre de progression en html, css3

Ca vous dit une petite barre de progression (progress bar) ? Certain diront qu'il existe <progress> et <meter> d'html5, c'est juste utilisez-les ! Là il s'agit plus de l'...

Effet de vignettage en CSS3

Suite à la demande de Geoffrey Dorne sur twitter, je me suis dit que ça devait intéresser d'autres personnes. Voici la ligne de css à mettre dans une class ou un id pour obtenir un e...

Ubuntu 11.10 : une copie web du système d'exploitation

Aujourd'hui c'est aussi la sortie d'ubuntu 11.10. Ubuntu a lancé un site internet qui copie l'interface de ubuntu 11.10 : voici la page web quelques petites choses fonctionne bien sh...

Préparer MarkItup pour rails 3.1

Bon voilà dans l'attente d'un gros article, en voici un plus petit qui explique comment préparer markitup pour rails 3. Je pars du principe que vous êtes dans votre projet rails. Tél...

Albino le gem ruby qui colorise votre code - syntax highlighter

Il existe un gem qui colorise votre code, il permet de mettre en évidence la syntaxe de votre code. Installation : sudo aptitude install python-setuptools sudo easy_install pygments ...

Cours sur l'intégration html/css par BBX

Le créateur de https://bbxdesign.com/ vient de lancer un site / tutorial sur l'intégration html / css. Il est vraiment bien fait (je l'ai survolé), si vous n'y connaissez rien, je v...

10 astuces d'intégration html css

Voici quelques petites astuces  pour les intégrateurs web 1) Z-index ne fonctionne pas : z-index ne fonctionne que sur les éléments positionnés (Ah ok je fais quoi alors : => posi...

Less fonctionne maintenant en javascript

Bon l'outils en ligne de commande lessc c'est un peu has-been du coup ! Less s'utilise maintenant coté client avec le script javascript. Du coté serveur ça tourne avec Node.js, un pe...

Pendule : le plugin chrome indispensable pour le développeur web

J'ai cherché assez longtemps pour trouver un outil de mesure ( ruler ou règle ) de pixel. Bien pratique pour l'intégration, il suffit d'ouvrir une image avec chrome, et vous pouvez m...

HTML / CSS 3 : background 100% quelque soit la résolution

Voici un petit tricks CSS pour avoir un background qui s'affiche à 100% en hauteur et largeur. L'image de fond doit être de bonne qualité (en jpg c'est mieux). J'ai utilisé CSS3 donc...

Highlight : Coloration syntaxique de code en html pour mettre en évidence des bouts de code sur des blogs

Bon voilà je sais que ce blog n'est pas très beau, la mise en évidence du code est foireuse, et je viens de chercher comment faire la mise en évidence de la syntaxe. (Oui je viens se...

jNotify : plugin jquery pour l'affichage de message de notification

J'ai trouvé ce plugin vraiment clean donc j'en fait profiter ! Il permet d'avoir des messages box d'avertissement, succès ou d'erreur qui disparaissent au bout d'un délai personnalis...

CSS 3 : border-image démystifié

Il y a une nouvelle propriété css dans css3 qui permet de faire ce que l'on a toujours voulu faire en html / css : Faire une boite de notre cru avec dégradé ombre interne externe... ...

40 layouts html css

Voici une quantité astronomique de layouts de base pour faire des sites web. Ca laisse du choix et du temps plutôt que de ré-inventer la roue ! C'est gratuit profitez-en ! Le lien : ...

Ascenseur ou scrollbar en html css javascript jquery

Bon je n'ai pas l'habitude de faire des billets sur mes flux rss mais bon. De nombreuses personnes cherchent comment personnaliser les scrollbars (ascenseur) en html css. Bon en fait...

Plugin jquery - header de table toujours visible

Voici un petit plugin jquery bien pratique qui permet d'avoir un header de table toujours visible en haut du tableau quand on scroll. Non seulement le plugin fait ce qu'on lui demand...

Comparatif des frameworks de développement mobile

PhoneGap, Titanium... mais si, vous savez ces frameworks qui vous permettent de développer des applications pseudo-natives sur mobile ! Vous faites du html/css et ces frameworks &quo...

$(document).ready(); VS $(window).load();

J'ai eu un petit bug aujourd'hui pour centrer verticallement un div (enfin une image !) J'utilise cette fonction jquery (function ($) { // VERTICALLY ALIGN FUNCTION $.fn.vAlign = fun...

Background auto-resize - Redimmentionnement automatique d'un background image

Bon tout est dans le titre. Ce plugin jquery permet à votre background de s'adapter à la taille du navigateur (et donc de votre écran). Tout se passe ici : https://www.aaronvanderzwa...

HTML/CSS element bloc qui ajuste sa hauteur en fonction du contenu

Comment ajuster automatiquement la hauteur d'une balise de type bloc (div principalement) en fonction de son contenu en HTML/CSS ? En général j'ai l'habitude de spécifier des taille...

Concours développement Web - Développez.net - Horloge

Il y a en ce moment un concours sur developpez.net pour concevoir une horloge originale ! Donc à votre clavier et que le plus innovant gagne ! J'ai fini le mien ! Même s'il est pas ...

Cheatsheets CSS, JAVASCRIPT, HTML, PHP, WEB, DESIGN, SEO

Voici une bonne panoplie de cheatsheets CSS, JAVASCRIPT, HTML, PHP, WEB, DESIGN, SEO https://spyrestudios.com/mega-collection-of-cheatsheets-for-designer-developers/ Régalez-vous !

@font-face css3 - Des polices exotiques dans nos sites web compatible internet explorer - firefox - chrome - safari - opera

Oui on en a tous rêvé un jour ! Mettre notre police préférée sur notre site web ! Et bien c'est possible avec tous les navigateurs ! - Internet Explorer 4+ - Safari / Webkit 3.1+ - F...

HTML - CSS Position relative absolute fixed static différences et utilisation

En css il existe une propriété particulière (très connu mais mal comprise) : position Static (par défaut): Se positionne à la suite de l'élément précédent (dans le flux) Fixed : Se ...

Compass VS Less css compiler (compilateur css) avec Ruby

Un compilateur css kesako ? Vous réviez d'utiliser des variables dans vos css, les fichiers qui passent par les compilateurs css supportent les variables mais aussi les mixins (liste...

Centrer un div position:fixed avec jquery et css

Bon marre de me battre avec CSS pour faire des choses pas conventionnelles... Je voulais centrer un div en position:fixed avec jquery (avec des div de taille différente). Réponse tro...

Liens utiles sur le design web,intégration html css, javascript, rubyonrails et geek attitude à avoir dans ses flux rss

Voici les adresses des sites dont je suis l'actu : Design Web et intégration html/css https://www.smashingmagazine.com/ https://cssglobe.com/ https://webdesign.2803.com/ https://ww...