PUBLIC MARKS from decembre with tag css

t's a good practice usually only for very small CSS images that are going to be used together (like CSS sprites) when IE compatibility doesn't matter, and saving the request is more important than cacheability. It has a number of notable downsides: Doesn't work at all in IE6 and 7. Works for resources only up to 32k in size in IE8. It saves a request, but bloats the HTML page instead! And makes images uncacheable. They get loaded every time the containing page or style sheet get loaded. Base64 encoding bloats image sizes by 33%. If served in a gzipped resource, data: images are almost certainly going to be a terrible strain on the server's resources! Images are traditionally very CPU intensive to compress, with very little reduction in size.

Tutorial : How to create different interesting hover effects on circles with CSS transitions and 3D rotations.Border radius property, we can create circular shapes. Seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, we are going to create some special hover effects for it!

Lorsque vous développez un site Web ou une application Web, avoir les bons outils peut certainement vous aider à économiser beaucoup de temps. Dans cet article, j'ai compilé une liste d'outils utiles et super pour le codage CSS

nstead of loading dozens of images, it is way better to load one big image and use the technique called CSS sprites. Glue is a simple command line tool to transform a set of images into a single file so you can easily use CSS sprites on your website. Super useful.

It’s very hard to keep your CSS files clean and compact when coding for a big project. Don’t worry though, CSS Trashman is here to help. This useful online tool examines your site, compacts styles and finally let you download a super clean version of your site CSS file so you can safely delete them.

Equal height columns have been a need of web designers forever. If all the columns share the same background, equal height is irrelevant because you can set that background on a parent element. But if one or more columns need to have their own background, it becomes very important to the visual integrity of the design.

Solution pour des éléments flexibles qui gardent leurs proportions lors du redimensionnement . Jusqu'à présent, j'ai utilisé Javascript pour le redimensionnement des éléments. Mais l'utilisation de l'événement "resize" et "recalculate" pour la hauteur d'un élément est mauvais.... lors, qu'est- ce que c'est? SOLUTION : Définir un élément pseudo pour notre boîte et lui donner un margin-top de 100%. Cette valeur 100% se rapporte à la largeur de l' élément ... vous obtenez ( hauteur : 0; padding-bottom : 100%; devrait également fonctionner, mais vous devez alors ajuster la valeur padding-bottom chaque fois que vous modifiez la largeur ) . Donc, notre boîte est déjà plus élevé que large .../

The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.

Comment faites-vous pour que la couleur d'arrière-plan de la colonne de droite s'étende jusqu'en bas de la page ?. Le secret, embarrassant de simplicité, est d'utiliser une image d'arrière-plan qui se répète verticalement pour créer l'illusion de colonnes en couleur

Le module de positionnement multicolonnes (ou Multi-column Layout Module en anglais) permet, comme son nom l'indique, de faire s'écouler du contenu sur plusieurs colonnes de largeurs égales, tel qu'on peut le voir dans le monde de l'imprimerie. E

Pour un clic sur un onglet, masquer tous les panneaux, montrer celui qui correspond à l'onglet juste cliqué.

The following is a guest post by Parker Bennett. Parker has written for CSS-Tricks before, in his article Crop Top dealing with the positioning of fluid images. This is a great follow up to that, presenting another option in the never-ending responsive images saga. It's also an interesting contrast to yesterday's post on responsive images - so you can see how very different the approaches to this problem can be.

calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value). It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/). Being able to do math in code is nice and a welcome addition to a language that is fairly number heavy. But is it useful? I've strained my brain in the past trying to think of obviously useful cases. There definitely are some though.

When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is. So what if you don't know anything? It's still kinda doable.

If you know the exact width/height of an element, you can center it smack dab in the middle of its parent element easily with this classic trick: top and left set to 50% and negative margins half the width and height of the element. That's great if you know the width and height of the element you're trying to center, but what if they are percentages?

In this article, I'm going to guide you through a concrete problem I had to solve. Eventually, we'll see how to use percentage values in the background-position CSS property and how it solves a lot of tough issues.

Voici un tutoriel vidéo plus théorique que d'habitude qui vous permettra donc d'en apprendre un peu plus sur le positionnement CSS avec les attributs : Position, qui permet de définir le type de positionnement (absolute,relative...) Float/Clear, la propriété qui permet de modifier l'enchainement logique des éléments pour un enchainement horizontal (c'est plus clair en vidéo :) ) Display, la différence entre les élements inline et block Vous verrez aussi analyser la structure d'un site internet pour apprendre à développer vos propres structures...

The focus of this article will be to show you ways of doing things commonly reserved for innerHTML with only DOM methods. In each example, the innerHTML method will be shown, followed by its DOM based alternative

It's an adaptation for Greasemonkey's Scripts that i use a lot. I want : - More informations by page. - Hide some little things that i don't use always and Use "Hover Mouse" things to give them visibility when i need. - Less scrolling if possible. - Pleasant view, with more place for shots.

Entre Ibis Reader, le futur Kindle for the Web et bien d’autres services à venir, l’application de lecture semble s’affranchir de la plateforme pour revenir vers le web. Craig Mod a lancé il y a quelques jours un template qui plaira aux bidouilleurs. Bibliotype, un template HTML et Javascript avec un CSS adapté à la lecture sur tablette. Le designer a ajouté plusieurs fonctions pour modifier la mise en page du texte, que cela soit la taille de la police, ainsi que la couleur de l’arrière-plan. Les choix sont limités mais bien pensé : Bed, Knee et Breakfast. Trois moment typique de lecture avec leurs contraintes particulières (fond noir et police blanche pour la lecture du soir…). Bibliotype est une bonne base de travail que Craig Mod invite à venir modifier.Distribué sous une licence MIT (il est possible d’utiliser ce code à peu près n’importe comment, pour une utilisation commerciale ou non, du moment que le nom de concepteur reste mentionné) .....

This styles makes the map window bigger, you will find the search at the top left. Print-, email- and link-button are on the top right. Because someone asked: Since you need the "Stylish" extension for this, this is not available for Internet Explorer.

data: URI Generator The data: URI scheme allows you to build URLs that embed small data objects. data: URIs are supported by most modern browsers except for Internet Explorer. The lack of IE support is holding back widespread adoption of data: URIs, but they are still very useful in a couple of specific areas such as embedding graphics and other data items in Greasemonkey scripts. You can read more about data: URIs and see some examples of their use, or use the generator below to create your own. data: URIs are defined in RFC 2397.

Firefox: Si vous utilisez Firefox systématiquement à une distance lors de présentations ou de votre canapé, par exemple, cette combinaison intelligente de Tweaks Firefox la rend plus facile pour vos yeux. 1. Téléchargez ce fichier userChrome.css ici. 2. Placez le userChrome.css 'dans le dossier suivant: ~ / Bibliothèque / Application Support / Firefox / Profiles / [profil]-name / chrome / [Ed. Note: Ils utilisent Mac OS X, reportez-vous cet article de la Base de connaissances MozillaZine pour trouver l'emplacement du dossier de profil dans votre système d'exploitation.] 3. Installez le plugin en cliquant sur Non Squint ici. 4. Changer de page par défaut du plugin n Squint de «plein niveau de zoom" mise à 150%. 5. Installer un thème qui fonctionne avec la taille du texte augmenté. J'ai choisi Hexxya, Qui utilise également des icônes plus petites de sorte que vous pouvez voir plus de votre barre d'adressei. 6. Profitez de votre navigateur Firefox HD!Firefox Dix Mode Couch Foot

Nouvelle interface de programmation afin de faciliter davantage le développement de nouvelles extensions. Baptisé Jetpack, permet à n'importe qui capable de coder une page web de moduler le navigateur. Oubliez les redémarrages du logiciel, il suffira de cliquer sur un simple lien pour installer l'addon de son choix et de recharger la page en cours de consultation. « Nous voulons permettre à plus de gens de participer à la création des fonctionnalités du navigateur », explique Aza Raskin, en charge du département de l'expérience utilisateur chez Mozilla. Il précise que n'importe quel développeur web familier avec le HTML, le CSS ou le JavaScript peut se lancer dans l'aventure.

Traduction française de l'extension Web Developer de Chris Pederick (http://chrispederick.com/work/web-developer/). Cette magnifique extension propose plein d'outils facilitant le développement de site web.