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 !
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:
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é.
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
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 !
45 Resources & Tutorials for designers and developers cheatcheets, codes, css3 cheat sheet, designers, developers, drupal, drupal cheat sheet, Freebies, html 5 cheat sheet, HTML5, javascript, javascript javascript resources, List, php cheat cheet, php tutorial, resources, resources for designers, resources for developers, themes, wordpress cheat sheet With the web constantly changing and technology always improving it can be very difficult to keep up with everything especially if you’re a designer or developer. In this Article I have listed 45 tutorial & Resources for designers and developers that you might find useful. After this post you should have a good start or lead in the web development field. Enjoy HTML 5 Cheat Sheets Smashing Magazine has release a great HTML 5 cheat for designers and developers who looking forward to learning more about HMTL 5. Javascript Starbox Rating – Starbox allows you to easily create all kinds of rating boxes using just one PNG image. WordPress WordPress Cheat Cheet Drupal Drupal Cheat Sheet CSS 3 Cheat Sheet
Les ombrages en CSS3 Grâce à des propriétés telles que box-shadow, text-shadow et border-colors, les feuilles de style offrent la possibilité de créer des ombrages sur les différents éléments de votre page sans nécessiter d'image décorative et de découpes intempestives. Tout n'est pas rose puisque certains navigateurs à la traîne ne reconnaissent pas encore ces différentes propriétés et nécessitent des adaptations personnalisées. Faisons le tour du propriétaire... Box-shadow La propriété CSS box-shadow a été incluse dans le module "borders" de CSS3 et permet de générer une ombre portée sur n'importe quel élément HTML. Parmi les différentes valeurs utilisables, il est possible d'indiquer le décalage vertical et horizontal ainsi que la force du dégradé. En voici une illustration (Voir le résultat sur votre navigateur) : Syntaxe Compatibilité et utilisation concrète Seuls les navigateurs modernes, reconnaissent la propriété box-shadow. Adaptation pour Internet Explorer <9 Le filtre Shadow Le filtre Glow La syntaxe :
Showcase of Beautiful Designers Websites Looking back at what others have done before you is a great way of obtaining inspiration. This also can lead to innovative designs. With this in mind where can we go? The answer is, other web designers. Their aim is promote their skills, style and attention to detail, whilst communicating necessary information. This collection of websites showcases the best in bright/collage, illustrative, graphic, and flash based designs and demonstrates how we can incorporate typographic elements, stunning color palettes and strong graphical images to create a dynamic experiences for the viewer. More posts we’ve done in the past that might give you some inspiration: Bright & Collage Designs They Creative Amazee Labs Kev Adamson Acko.net Foxie Designs Simply Creative Prakash Soni Art Flavours Studio 83 Studio IMG Illustrative Designs Piconeers Sprocket House I love Colors Meomi Designs Monster CSS Hugs For Monsters Denise Chandler The Happy Time Cafe Coo Coo Core Duirwaigh CHiRAG J Solanki MK Leyne Sylvain Rouvier CSS Addict
La transparence de couleur avec RGBa en CSS3 Le module de couleurs de CSS3 introduit la notion de transparence dans les valeurs associées à une couleur, l'écriture RGBa. Cette composante de la couleur permet de jouer sur les effets d'opacité entre les différentes couches d'éléments HTML. Contrairement à ce que l'on peut croire, le principe de la transparence RGBa est radicalement différent de la propriété opacity (également CSS3 mais assez ancienne déjà) : cette dernière est une propriété qui s'applique à l'élément dans son intégralité (ainsi qu'à tous ses descendants) tandis que RGBa est une valeur qui s'applique à une propriété de l'élément sélectionné uniquement. De ce fait, RGBa est susceptible de s'appliquer à toutes les propriétés dont la valeur peut être une couleur : background-color, color, border-color, box-shadow, text-shadow, etc. Voici une illustration du principe de transparence de la couche Alpha (RGBa) (Voir le résultat (RGBa) sur votre navigateur) : Principe de la notation RGBa <div><h1>Joli titre</h1></div>
Web Design Trends in 2011 There is a thin line between design and development, and as we move into a new decade, this line is becoming extremely blurry. Is it enough to draw beautiful mock ups in Photoshop? Maybe 5 years ago. These days, the average internet user requires more. How will you stay relevant as a designer in 2011? Take a gander at the top 11 trends for 2011. 1. What a gratifying sigh of relief! Now that’s shown, please understand that Flash and HTML5 are not equal opponents. Perhaps even more exciting is the fact that CSS3 is available to us in a real way this year. 2. Simplicity. Shades of green create this Twitter visualization tool. Red can be jarring if done incorrectly. 3. Smartphones, iPads, netbooks, oh my! Creating a mobile ready website is not simply removing the bells and whistles from your design. With the help of CSS3, primarily media queries, mobile web design has taken a big leap forward (more on this later). 4. Parallax scrolling: not just for old school video games. 5. 6. 7. 8. 9.