background preloader

Les sprites CSS

Les sprites CSS
Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est, comme le temps des Elfes de la Terre du Milieu, définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS. La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d'affichage sur l'une ou l'autre image sera définie en CSS grâce à la propriété background-position. Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives). Il est donc déconseillé de l'employer pour des images dont le contenu est pertinent (menu par exemple). Les avantages des sprites CSS sont multiples : La technique des sprites CSS Principe (avec sprite)

http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html

Le top 10 des propriétés CSS3 : compatibilité inter-navigateur La liste des propriétés qui suivent n’inclue pas toutes les propriétés CSS3 existantes à ce jour. C’est une sélection des 10 propriétés qui vous donneront une bonne base pour vos développements front-end futurs et qui vous permettra de vous faire gagner du temps. Note : à l’exception de @font-face, ni IE6, IE7 ou IE8 ne supportent les propriétés CSS3. IE9 en supporte quelques une, ce sera indiqué lorsque ça sera le cas. @font-face @font-face permet aux polices d’écritures d’être téléchargé du serveur vers le navigateur client afin d’afficher une police donnée de façon correcte.

Mise à jour du tutoriel sur les coins arrondis Le tutoriel "Créer des coins arrondis sans images", rédigé le mois dernier, vient d'être partiellement remis à jour. La version initiale proposait, en guise d'alternative pour Internet Explorer, la technique JavaScript "Roundies", qui nous a paru à la fois légère et simple à mettre en œuvre. Une autre technique vient d'être ajoutée au tutoriel : celle des comportements .htc spécifiques à Microsoft. Dans la pratique, cette méthode très simple semble plus compatible que Roundies pour les cas particuliers (transparence, images d'arrière-plan). Le rendu visuel avec .htc nous semble également plus réussi sur Internet Explorer. css float image flottante floatleft : image flottante gauche dans paragraphe Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mauris. Nunc commodo odio at ipsum. Nam lacinia tempor dui. Sed elit.

Mes meilleurs ressources Web - Madmic Je viens juste d’ achever une formation de 10 mois sur le Web design et pendant cette période d’ apprentissage j’ ai récupéré des ressources web qui me servent tous les jours dans ma passion qui est la création numérique. j ‘ai classé ma sélection par matières abordées lors de mon cursus. Mes choix d’ adresses restent sujet à discussion, et si vous avez des suggestions ou des conseils sur d ‘autres lieux où je devrais trainer ma souris, je suis preneur (Merci de laisser un commentaire!!!). Mes ressources WEB et PRINT (gratuit ou pas) ou plus simplement le saint Graal de la snippet, de la brush, du mock up qui vous manquent…

Lettrine en CSS3 - CSS3 Il était un temps où les ressources typographiques du HTML étaient limitées. Très limitées. Les pages HTML d'antan ne pouvaient embarquer des polices comme de vulgaires fichiers média. De ce fait, les webmestres devaient se contenter de ce qu’il y avait à bord de la machine de l’internaute —ces fameuses « web safe fonts »—, celles intégrées aux différents OS (à moins d'acrobaties telles que SiFR ou Flir). Un IDE pour créer des animations CSS3 Sencha Animator se propose de créer des animations CSS3 grâce à une interface utilisateur conviviale, proche d'un programme de dessin vectoriel. Il est possible d'intégrer des objets, de les déplacer, redimensionner, avec différents niveaux d'imbrication. Des transformations de rotation et de déformation sont disponibles ainsi que les dégradés, les flous, et les ombrages. La ligne de temps permet de s'y retrouver. L'avantage est de gagner du terrain face à des outils tels que Flash qui disposent déjà depuis de nombreuses années d'un environnement tout-en-un permettant de produire des animations sans devoir toucher à une quelconque ligne de code.

Les dégradés de couleurs en CSS3 avec gradient Bonjour à tous ! Aujourd’hui nous allons parler des dégradés en CSS3. Vous en avez probablement déjà rencontré, et peut-être même déjà utilisé via des générateurs. Ce tutoriel très complet va vous permettre d’aller plus loin et de comprendre en détail comment les utiliser, ce qui améliorera les performances d’affichage de votre site en évitant d’avoir à utiliser des images ! Ce tutoriel a été rédigé par Bastien Uranga, étudiant en informatique à Bordeaux et passionné par les technologies web. En plus de ses études, il lui arrive souvent de prendre le rôle d’intégrateur dans certains projets et d’améliorer ses connaissances en HTML5 et CSS3.

Tutoriel Vidéo HTML-CSS Animer l'icône hamburger Aujourd'hui nous allons apprendre à animer l'icône hamburger, cette fameuse icône composée de 3 traits horizontaux qui est de plus en plus incontournable. Au niveau du code HTML on va essayer de rester le plus simple possible en évitant au maximum les éléments inutiles Malheureusement, on sera tout de même obligé de rajouter un élément vide à l'intérieur de notre élément pour créer les 3 petits traits. L'élément .menu-icon permettra de définir la zone cliquable mais aussi de mettre un fond si besoin. L'icône en CSS

Related: