CSS
Get flash to fully experience Pearltrees
Modular front-end development with LESS
I am constantly looking for ways to make my work as a front-end developer easier and more efficient, but it is only recently that I have paid my good friend CSS any real attention. This article will explore the benefit of organizing your code efficiently while keeping it reusable and modular. I am constantly looking for ways to make my work as a front-end developer easier and more efficient, but it is only recently that I have paid my good friend CSS any real attention. The whole movement to make this sector of front-end development easier started with grid systems and the idea of object-oriented CSS , and has since been made easier with extensions to the language itself in the form of CSS pre-processors — the two most well-known being LESS and Sass . This article will explore the benefit of organizing your code efficiently while keeping it reusable and modular. Let’s get started!
Page Transitions with CSS3
In the last few years, we've seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Well, now I'm gonna teach you how you can have your own, but instead I'll be using CSS Transitions and the :target property to do all the magic. View demo Download sourceCSS3 exemples
CSS3 Image Styles
When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I'm going to revisit the topic and show you how much more you can do with the background-image CSS trick. I will show you how to use box-shadow, border-radius and transition to create various image styles. View Demo Image StylesBelow is a list of CSS snippets that will help you minimize headaches, frustration and save your time while writing css, and I hope you will find it useful. Whether you are a experienced web developer, or just getting started with css, they are all worth checking out. Source
Incredibly Useful CSS Snippets
Typography is everyone’s favorite toy in web design. The CSS3 text-shadow property is commonly used to recreate Photoshop’s Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. But this isn’t all the text-shadow property is capable of. With a little ingenuity and creativity text-shadow can create some remarkable effects. Today we’re going to run through several CSS3 text-shadow examples that you can copy and paste for your own work. The syntax includes four variables to work with, the first two set your shadow’s position (horizontal and vertical), the third sets the amount of blur and the fourth the color of the shadow.
Fun with CSS3 Text Shadow Property
cssSandpaper - Une librairie Javascript pour simuler du CSS3
cssSandpaper est une librairie Javascript pour manipuler vos feuilles de style avec du CSS3 , dans le but de rendre compatible votre CSS3 avec IE et également pour aller plus loin dans les effets possibles. cssSandpaper est vraiment une librairie JS utile, après l'avoir inclue dans votre document HTML, vous pouvez simuler certains effets comme box-shadow sur tous les navigateurs, qu'ils prennent ou non en compte le CSS3 ! Côté pratique, la librairie est vraiment bien pensée, car vous rajoutez directement les propriétés dans votre CSS, sans forcément passer par des scripts JS (le choix reste possible). Vos intégrateurs HTML/CSS n'ont donc pas à se soucier du JS et font juste leur boulot de d'habitude: ajouter les propriétés CSS voulues. Installation:
Une feuille de styles de base pour le Web mobile - Alsacréations
Parce que faire un site web pour terminal mobile, ce n’est pas fixer sa largeur à 320 pixels ou proposer une version iPhone uniquement, je vous propose un tour d’horizon de quelques solutions offertes par CSS pour adapter une présentation existante aux mobinautes : gérer la largeur, redimensionner les éléments, passer à une seule colonne, gérer les débordements, supprimer le superflu, adapter les liens et les tailles de polices selon l'orientation. Pour vous faciliter la tâche, voici ci-dessous une feuille de style dédiée au média mobile qui condense diverses bonnes pratiques et astuces. Ces règles peuvent être externalisées dans un fichier CSS séparé, ou incluses directement au sein du document de styles global, déclarées à l’aide d'une règle media query de type @media (max-width: 640px) {...} . L’objectif de cette feuille de styles est avant tout de poser un socle de bases communes que vous pourrez adapter à vos convenances ou besoins personnels. Préambule : fixer le Viewport
Cette partie du site n'est plus maintenue, elle reste en ligne pour la postérité. Date de mise en ligne : 13 décembre 2004 Cet article est l'adaptation en langue française (pas une traduction exacte) de l'article Understanding The Cascade Article original par Holly 'n John ©positioniseverything
Comprendre la cascade en CSS | Tutoriaux | MarcArea.com
Pourtant l'une des propriétés les plus utilisées en matière de CSS, float , avec ses valeurs left , right et none , reste celle dont le comportement est le moins prédictible par les designers Web même non débutants. Combiné à la propriété clear , et ses valeurs left , right , both et none , cela donne parfois des arrangements de règles hasardeuses dont l'affichage final est le résultat avant tout à d'une suite de tâtonnements et de rechargements de page. Comprendre le comportement de float implique une compréhension plus globale de la philosophie des CSS, notamment celle du flux. Les CSS sont en effet conçues pour afficher les éléments au sein d'un flux : pour simplifier, les éléments en ligne, ou inline , sont affichés les uns à la suite des autres, tandis que les éléments conteneurs, ou block , amènent un retour à la ligne après leur affichage.
CSS : comprendre le fonctionnement de float et clear
Par Joe Gillespie Cet article est le premier d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages.
CSS : on reprend tout à zéro !
Netprof.fr est un site gratuit qui diffuse des publicités car il est impossible d'être gratuit et sans publicités. 50% des revenus financent les charges de structure de netprof.fr (ex: serveurs) et 50% des revenus sont reversés aux professeurs. Si vous ne souhaitez pas visualiser de publicités sur netprof.fr, vous pouvez créer un compte premium pour 1 € en cliquant sur le lien suivant : Créer un compte premium . Si vous préférez visualiser les cours gratuitement et donc avec publicités, vous devez désactiver ou configurer le ou les logiciels qui, sur votre machine, bloque l’affichage des publicités. Le plus célèbre des logiciels de blocage de publicité est AdBlock. Pour visualiser des cours sur netprof.fr avec AdBlock installé sur votre machine, vous devez sélectionner l'option "Désactiver pour netprof.fr" si vous utilisez Firefox ou l'option "Ne rien bloquer sur les pages de ce domaine" si vous utilisez Chrome.
Regardez le Cours Feuilles CSS : Créer un formulaire en Vidéo 100% Gratuit
Une demonstration de ce qu'on peut accomplir lorsqu'on utilise les CSS pour la conception web. Sélectionez n'importe quelle feuille de style listée pour charger le résultat sur cette page. Téléchargez les fichiers d'exemple html et css Le chemin vers l'édification Les reliques passées des sélecteurs spécifique aux navigateurs, des DOM s incompatibles, et du manque de support des CSS encombrent un long chemin sombre et morne. Aujourd'hui, nous devons nous clarifier l'esprit et nous débarassez des pratiques passées.