CSS hacks & browser detection
More and more web developers are ditching tables and coming round to the idea of using CSS to control the layout of their site. With the many benefits of using CSS, such as quicker download time, improved accessibility and easier site management, why not? The problem with CSS Historically the main problem with using CSS has been lack of browser support. This is no longer the case as version 5 browsers, which all have good support for CSS, now account for over 99% of browsers in use. Instead, the problem is that browsers can sometimes interpret CSS commands in different ways, causing developers to throw their arms up in the air and switch back to pixel-perfect table layouts. How browser detection using CSS hacks works The way browser detection using CSS hacks works is to send one CSS rule to the browser(s) you're trying to trick, and then send a second CSS rule to the other browsers, overriding this first command. The first command is intended for IE, the second for all other browsers.
La propriété border-image en CSS3
Par Estelle Weyl Bien que ce ne soit pas vraiment une nouveauté pour les navigateurs, la propriété border-image est désormais disponible dans la spécification CSS3. border-image (littéralement : image de contour, NdT) offre une méthode pour ajouter des contours décoratifs à n’importe quel élément. Avec les propriétés de border-image, vous pouvez créer des contours décoratifs pour des éléments qui vont bien au-delà des simples coins arrondis, avec des images très légères ou même avec des dégradés. La propriété border-image vous permet de prendre une petite image, de la découper virtuellement en neuf tronçons, et de disposer ou d’étirer les morceaux de votre petite image au sein d’un autre élément beaucoup plus grand. Vous pouvez prendre une image et l’étirer sur toute la largeur d’un bouton ou d’une page entière. Dans ce second exemple, au lieu d’étirer le milieu de l’image de contour, nous l’avons répété. La propriété border-image est un raccourci qui permet de déclarer : border-image-width
Domptez vos puces, dressez des listes
Par Mark Newhouse Dès juillet 1999, je pontifiais à propos des vertus des feuilles de style dans diverses listes de discussion. Certaines choses ne changent pas. Mais ce qui a changé, c'est la façon dont je réfléchis à la mise en forme CSS et à la structure (X)HTML sous-jacente à laquelle elle est appliquée. Bien sûr, la raison pour laquelle nous ne les implémentons pas de cette manière est que nous ne voulons pas d'une puce devant chacun des liens de notre menu. Aujourd'hui, je vais montrer comment utiliser les CSS pour reprendre le contrôle de listes peu maniables au premier abord. Préparer le terrain Dans le cadre de cet article, j'utilise des listes non ordonnées. <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5 - un peu plus long pour avoir plusieurs lignes</li></ul> Chaque liste est simplement placée dans un div différent, et le code CSS définit le comportement de chaque liste en fonction du div où elle se trouve. Le positionnement Les puces La navigation
Gérer les débordements de contenus grâce à CSS
Sommaire Précision : cet article se limite volontairement au dépassement de contenus et non à d'éventuelles erreurs de conception de design, de mauvaise gestion de la fluidité, ou à des débordements de blocs flottants. Préambule J'ai une mauvaise nouvelle pour vous : le Web n'est pas un média figé ou paginé tel que le média d'impression. Vous n'êtes pas maître de votre contenu et il va falloir vous y faire. Puisque - heureusement - il n'est plus possible de fixer la taille, voici un point sur les différentes techniques modernes permettant de canaliser les caprices de vos contributeurs… overflow: hidden : circulez, y'a rien à voir ! La propriété CSS2 overflow a été conçue pour administrer les débordements d'éléments au sein d'un bloc. A l'heure actuelle, le peu de valeurs prises en charge par cette propriété la rend quelque peu abrupte : soit le contenu est tronqué et masqué (valeur hidden), soit de laides barres de défilement apparaissent (valeur scroll ou auto). Exemple (HTML) : Partie CSS :
25 Excellent CSS3 Animations
CSS3 has brought about a number of impressive new features. CSS3 animations is one of the most fun a new feature of CSS3. CSS3 Transitions in real use were introduced in late 2007 by Safari. At that time, they were referred as “CSS Animations”, but the terminology changed when Safari introduced their proprietary features also called CSS Animations. On previous post we are published article “15 CSS3 Menu Navigation Tutorials”. Create Animated Landscape using Pure CSS3 This tutorial is based on a simple animated experiment that showcases just one of the amazing things you can create using CSS. Some months ago we have created an animated landscape using Photoshop and jQuery. CSS3 Hover Image Gallery FormBox – A jQuery & CSS3 Drop-Down Menu With Integrated Forms FormBox is a jQuery and CSS3 powered navigation menu that supports integrated forms. CSS3 Car Animation CSS3 Progress Bar Our Solar System in Modern Browsers Ajax Style Loading Animation in CSS3 (no Images) CSS3 Accordion Snow
50 Awesome CSS3 Animations
CSS3 has brought some amazing new features. And the most fun is playing with the CSS animation. Here is a compilation of 50 CSS3 animation that allows you to perform many motion-based functions normally Delegated to JavaScript. 1. Use the basic features of the CSS3 Transform: rotate. 2. Analogue clock created using webkit transition and transform CSS. 3. 3D Cube That Rotates Using Arrow Keys You can Use up, down, left and right keys to navigate the 3D cube. 3D cube built using -webkit-perspective, -webkit-transform and -webkit-transition. 4. Multiple 3D Cubes using CSS3 and proprietary ‘transform’ and ‘transition’ properties. 5. An accordion effect using only CSS. 6. Auto-Scrolling Paralax is an animated parallax effect using WebKit’s CSS transition property,Auto-Scrolling Paralax no need JavaScript 7. Isocube is like 3DCube but have litle different. 8. 9. The Matrix is one of the best sci-fi films of all time. 10. 7 Javascript-effect Alternatives Using CSS3 11. 12. 13. 3D Meninas 14. 15.
