Alternative CSS3 pour IE Alternative CSS3 pour IE Cet article a 4 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 3 230 fois. CSS3 est un tel changement pour la construction de page Web et de designs ergonomiques que son apport sur les navigateurs modernes ne cessent d’être retranscrit en JavaScript sur les (le ?) Performant est peut-être un gros mot ici, en effet il s’agit pour cette méthode de passer par un fichier .htc qui est exécuté à chaque fois que l’on fait un appel au fichier, à savoir donc, à chaque élément stylé grâce à CSS3 et que l’on souhaite voir apparaitre sous IE. Les plus Les moins La nature même de cette solution (.htc) qui est, à ma connaissance, un programme JavaScript exécuté à chaque occurrence de l’appel du fichier.Certains bogues rencontrés lors de l’utilisation de la bibliothèque jQuery en production (sous IE), des affichages qui partent en cacahuètes, des éléments qui disparaissent. Une solution à tester donc. Bonux Bonne application !
Les propriétés CSS :nth-child et :first-child Afin de styliser en CSS une liste d’éléments, que ce soit pour la navigation de votre site web ou pour une liste dans vos contenus, vous pouvez utiliser un « ID » différent pour chacun de vos items. Cependant, cela aura comme inconvénient de vous créer plusieurs lignes de codes qui auraient pu être évitées à l’aide de différentes propriétés telles que :nth-child, :nth-of-type, :first-child et :last-child. Ces propriétés sont également très utiles lorsque vous avez une liste avec énormément d’éléments. Voici un article illustrant à merveille l’utilisation de chacune de ces propriétés CSS dans différents contextes afin d’avoir un contrôle absolu sur vos listes HTML. L’article suivant a été écrit par Chris Coyier du site web CSS-Tricks.com Sélectionner seulement le 5e élément Si vous devez sélectionner seulement le 1er élément de la liste, vous pouvez utiliser ceci li:first-child ou tout simplement li:nth-child(1). Tout sélectionner sauf les cinq premiers Sélectionner seulement les cinq premiers
30 Exceptional CSS Based Layouts This post is about 30 exceptional CSS based layouts for inspiration . CSS has tremendous power to control the layout of web pages and change them instantly with one click just like WordPress themes . CSS based layouts play an important role in the performance and search engine rankings. So their selection is very important and critical step. 1. Fruit Ninja 2. Magnifico 3. Kirk Whalum Website 4. eCoverSuiteElite eCoverSuiteElite 5. Radiant WebSoft 6. Delibarapp 7. Hey Indy 8. Jan Kovacs Website 9. Madebytinder 10. LiveResto 11. MetaLab 12. Osvaldas 13. Kelt 14. Fluid Theme 15. Coocoocore 16. Gosco Valves 17. Atebits 18. Mascara Design 19. Stick It USB 20. Atombicycles 21. Alexswanson 22. Florida Flourish 23. Fresh Canned 24. Sean Haplin Website 25. Duirwaigh Studios 26. Musicthoughts 27. Istyle 28. Designdisease 29. Electric Pulp 30. Morphix
Timing des animations et des transitions en CSS3 L'arrivée de CSS3 il y a quelques années a pour plusieurs d'entre nous grandement révolutionné la manière dont nous intégrions un site Web. D'abord, ce furent les propriétés purement graphiques (coins arrondis, ombres portées) qui frayèrent leur chemin jusqu'en mode production. Ces propriétés étaient les mieux supportées des différents navigateurs, et elles étaient facilement imitables sur les plus anciens grâce aux outils à notre disposition (Par exemple: Css3Pie, Selectivizr, Modernizr, etc). Même la tâche redondante consistant à préfixer nos propriétés CSS3 est aujourd'hui facilitée avec Prefixr et PrefixFree. Aujourd'hui, l'étendue des possibilités auxquelles a accès un intégrateur est assez impressionnante. Et enfin, les propriétés de transition et d'animation sont plutôt bien supportées par l'ensemble des navigateurs modernes, y compris à partir d'Internet Explorer 10. Le sujet des transitions et des animations a déjà été traité par maints auteurs. Quelques Références Transitions:
CSS Grid Layout Abstract This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a flexible or fixed predefined layout grid. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. Status of this document This is a public copy of the editors’ draft. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. Table of Contents 1 Introduction and Overview Grid layout contains features targeted at web application authors. 1.1 Background and Motivation The capabilities of grid layout address these problems. 1.2 Adapting Layouts to Available Space In grid layout
30 New Free High-Quality Fonts - Smashing Magazine Advertisement Every now and then we look around, select fresh high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually time you should be investing in your current projects. We search for them and find them so that you don’t have to. In this selection, we’re pleased to present Piron, Nobile, St Marie, Code, Arcus, Crimson Text, Quadranta, Juice, Prociono, Mr Jones, Ibarra Real and various useful symbol fonts. Please note that some fonts are for personal use only and are clearly marked as such. New Free High-Quality Fonts Piron1 Piron is a highly legible typeface, very well suited to any display or text usage: Web, print (especially magazines), brochures, logos, posters, flyers, motion graphics. St Ryde Regular2 (Registration required, PDF Specimen3) St Ryde is a sans-serif, very casual typeface, that works perfect in your bodycopy within the regular weights. 01.BASE42 This free font is bold and experimental.
Arrière-plans avec CSS3 Backgrounds La propriété CSS background-size spécifie la taille de l'image dans l'arrière plan. Syntaxe background-size: x y; x détermine la dimension horizontale (pixels, em, auto, pourcentage %, etc.), y détermine la dimension verticale (pixels, em, auto, pourcentage %, etc.) Valeurs possibles Dimensions : par exemple "px" ou "%" : précise la hauteur ou la largeur de l'image. Fond qui occupe tout l'espace de l'élément Code source : Fond qui occupe 30% de la largeur du bloc avec une répétition. Démonstrations "Full-Background" sans déformation Avec la valeur background-size: cover, l'arrière-plan "couvre" au mieux tout le fond. Un tutoriel expliquant plus en détails cette technique (entre autres) : Créer un arrière-plan extensible intelligent Démonstrations Prise en charge Le préfixe -moz-, -webkit-, -ms- ou -o- pourra être requis pour les navigateurs utilisant des pré-versions de cette propriété.
Test géographique des états unis | Jeux d'éducation Test géographique Ce jeu est des quiz pour les connaisseurs des Etats-unis! Il existe un mode "étude" et un mode "quiz". Dans le mode étude, on te montre la carte de l'Amérique, et tu vois les noms des différents états. Dans le mode "quiz", l'ordinateur te donnera des noms d'états, et c'est à toi de les placer correctement sur la carte. Ce n'est pas facile, mais tu apprendras beaucoup sur une grande nation! Notez le jeu : Test géographique Les autres jeux de la catégorie Jeux d'éducation : Apprendre en jouant, c'est facile et c'est ludique! Juste ou faux Ce petit jeu en ligne va tester votre culture générale et votre capacité de réfléchir et d'observer dans un petit quizz. Jeu de math Pour tous ceux qui veulent s'entrainer dans les math et voir si ils savent multiplier vite et juste, ce jeu en ligne est parfait! De 1 à 10 Savez-vous compter de 1 à 10? La somme des chiffres Le but de ce jeu de chiffres est d'éliminer tous les chiffres de la zone de jeu. Vitesse de frappe Jouez au piano
Tutoriel de webdesign : Créer un site d'entreprise de A à Z | Living Tuts : Tutoriels de qualité pour apprendre Photoshop, le webdesign, le développement web, le digital painting, etc... Design Spartan (Gaétan Weltzer) vous montre comment créer un site d’entreprise de A à Z en commençant par la phase de réflexion puis le webdesign. L’objectif de ce tutoriel assez long est d’offrir un cas pratique avec une réflexion derrière. En situation réelle pour une entreprise, comment se passe la réalisation d’un site Internet de présentation ? Par où commence-t-on et comment finit-on, voici ce que nous allons voir ensemble. A lire avant de commencer Plutôt que de faire un simple tutoriel de webdesign, je souhaite vous emmener dans la création d’un site Internet pour une entreprise fictive de A à Z : de la phase de réflexion jusqu’à la mise en ligne du site en passant par le webdesign, l’intégration et le développement. Pour cet exercice, je vais vous montrer le procédé de création d’un site-vitrine qui est à peu près le même pour la majorité des entreprises souhaitant présenter leur activité et entrer en contact avec de potentiels clients. Ce tutoriel est découpé en 3 parties :
CSS3 Shadows CSS3 nous apporte des brides du côté obscur de la force en proposant de gérer des ombres diverses et variées directement depuis votre feuille de styles : blocs et textes sont concernés avec également la combinaison de plusieurs ombrages pour obtenir des effets avancés. Les ombres portées prennent aujourd’hui une place importante dans le web design et permettent la mise en exergue d’éléments importants, ou l’ajout d’une touche de profondeur dans vos graphismes. Il est possible de dire adieu aux images superflues uniquement destinées à la réalisation d’ombres portées ; adieu à la soupe de <div>, <span>, et autres structures en tableau pour réaliser des effets graphiques riches. Deux types d’ombres existent en CSS : les box-shadow, les ombres ajoutées aux éléments de type bloc, les text-shadow, les ombres ajoutées au contenu textuel. Il est évident, comme tout effet graphique, que l’utilisation des ombres doit être faite avec parcimonie et ne pas gêner l'utilisateur. Syntaxe de box-shadow
Tuto : animation sans Flash avec HTML 5 et CSS 3 | Web y es-tu ? – Le Blog : Conseils et outils pratiques sur le monde impitoyable du web. Ce billet est une traduction réalisée par mes soins de Flashless animation : un très bon article de Rachel Nabors sur 24ways.org (merci Julien). Abordable et très instructif dès les premiers paragraphes, cet article est juste génial pour découvrir l’animation sans Flash et sans JavaScript. MAJ : Si les animations sont figées chez vous, passez la souris dessus et cliquez sur le bouton « rerun » pour la rejouer une fois ou sur « edit on Codepen » pour la voir fonctionner en boucle. Attention : Utilisateurs d’Internet Explorer 9 et précédent, votre charmant navigateur ne prenant pas en charge la propriété animation de CSS3, vous ne pourrez pas apprécier nos exemples animés (et quelque part, c’est bien fait pour vous, depuis le temps qu’on vous dit de changer de crèmerie…) ——————– Quand je suis arrivée dans le monde du webdesign il y a quatre ans, la première chose que je voulais faire était d’animer un dessin dans le navigateur. Les choses sont différentes maintenant. Le cycle de marche
50+ Awesome CSS3 Techniques for Better Designs CSS3 is gaining momentum, despite the fact that the standard hasn’t even been finalized. There are hundreds of tutorials out there to teach designers how to use it, but unfortunately a lot of them cover the same ground. And some of the tutorials teach designers to do things that they might not think of as useful, though the techniques can usually be adapted to fit a project perfectly. Below are more than fifty awesome CSS3 tutorials. Many are strictly CSS and HTML based, while others also incorporate JavaScript. If you have a favorite technique or tutorial that’s not included below, please share it in the comments! Using CSS3 For Imageless Illustration Various new methods in CSS3 allow a number of very complex graphics to be created using pure CSS and no images. Pure CSS iPhone Illustration A mixture of borders, transforms and gradients to make an animated image of an iPhone. Creating The Opera Browser Logo in CSS3 A clean illustration of the Opera logo rendered using CSS3 techniques.
Créer des coins arrondis en CSS et sans images Vouloir créer facilement des blocs aux coins arrondis est un rêve de webdesigner aussi vieux que le Web lui-même. Traditionnellement, depuis les débuts du web, on réalisait ceci à l'aide de plusieurs éléments <div> imbriqués (ou autres), ou à l'aide d'un tableau à 9 cellules : la cellule du centre accueillait le contenu, tandis que les autres recevaient des images ou des images de fond étirables afin de dessiner les quatre coins et les bordures. Cette technique est généralement lourde et peu accessible. C'est pourquoi depuis quelques années et l'avènement des feuilles de style, de multiples techniques ont vu le jour pour proposer des solutions que l'on peut regrouper selon les critères suivants : avec ou sans images, avec ou sans JavaScript, avec ou sans ajout de markup (éléments dans le code HTML), fluide ou non fluide (blocs étirables en hauteur et/ou en largeur selon le contenu), toutes plus ou moins accessibles. Simple et approprié : border-radius Exemple : Et c'est tout !
CSS Débutant : cours et tutoriels sur les feuilles de style CSS 1,2 et 3