background preloader

Menu Slides avec CSS3 - Créer des blocs dépliables animés en CSS3

Menu Slides avec CSS3 - Créer des blocs dépliables animés en CSS3
Attention : Un bug étrange a été détecté sous Chrome/Safari sur Mac. Observez-vous cela ? Dans cet exemple, on utilise les transformations CSS afin de faire subir une rotation aux liens contenus dans les éléments de liste (li). <div class="menu"><ul><li><a href="">Home</a><div><h3>Home</h3><p>Bienvenue sur le site CSS3Create</p></div></li><li><a href="">News</a><div><h3>News</h3><p>Pleins de news sur CSS3 et sur HTML5</p></div></li> ... Réglage de la taille d’un li et application de la transition sur la taille. 0.15s correspond au retardement de la transition, afin d’éviter un déclenchement trop rapide de chaque slide. overflow:hidden permet d’éviter le débordement des éléments masqués. Ensuite au :hover, la taille des li est modifiée en utilisant les transitions CSS. L’effet de transition fonctionne avec le moteur Webkit (Safari-Chrome) , le moteur Gecko 2.0 (Firefox 4) et Opéra11+. Voir aussi : Menu avec slider effet transition

CSS3 – Créer un slideshow automatique et contrôlable Si vous suivez le compte @NoupeMag sur Twitter (ça marche aussi pour mon compte), vous avez certainement vu passer mon slideshow en CSS3 datant de l’an dernier. Ce n’était pas ma première tentative de slideshow comme le présentent ces premier et second travaux datant de mai 2010. Ce tutoriel ne s’adresse pas aux débutants, il vous faudra un minimum de connaissances techniques pour vous y retrouver dans les tronçons de code qui vont suivre. Cependant, le code commenté reste – je l’espère – accessible. Avant propos La page de démonstration du slideshow full CSS3 vous propose des fichiers sources en téléchargement, profitez-en, notamment si vous souhaitez récupérer les images. Les codes CSS fournis ici sont légèrement différents de ceux fournis dans l’archive zippée téléchargeable. Les codes CSS3 présents sur ce tutoriel ne tiennent pas compte des préfixes parfois nécessaires (-webkit-, -moz-, -ms-, -o-) pour une question de gain de place dans le code. Les défauts des versions précédentes

Les transformations 3D en CSS3 L’une des innovations majeures apportées par le CSS3 est la capacité à “transformer” des éléments. Ces transformations, qui peuvent être effectuées en 2D (sur la plan de la page) ou en 3D, permettent d’enrichir l’expérience utilisateur avec de tout nouveaux types d’effets visuels. Les transformations combinées avec les transitions permettent en effet d’animer des éléments HTML en effectuant des rotations, des transitions ou des changements d’échelle. Nous allons aujourd’hui appliquer ces transformations dans l’espace grâce aux transformations 3D du CSS3 ! Ce tutoriel a été rédigé par Vincent De Oliveira, enseignant et développeur à l’ENSG. Introduction Vous avez déjà entendu parler des transformations en CSS, qu’elles soient 2D ou 3D? Quelles différences entre la 2D et la 3D sur le web? Pour l’affichage d’un site web à l’écran, nous travaillons en 2D: axe X : positif vers la droite de l’écran,axe Y : positif vers le bas de l’écran. Quels navigateurs sont compatibles? Les rotations Matrice

CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. Slider Galerie photos en CSS3 - Créer une galerie photo avec défilement automatique sans Javascript Utilisation des animations CSS pour réaliser cet effet. L’animation totale dure 20s : 14% d’affichage de photo, 2% de slide vers la photo suivante et 4% pour revenir sur la première photo. Note : n’oubliez pas d’ajouter tous les préfixes sur les @keyframes. L’effet réalisé dans cet exemple est assez simple. Aller plus loin avec cet article : Slider Galerie photos "en boucle" en CSS3 Tendance du webdesign : double scroll | WebdesignerTrends - Ressources utiles pour le webdesign, actus du web, sélection de sites et de tutoriels - Directement inspirés par les interfaces mobiles, certains sites osent ce que l’on pourrait nommer le « double scroll« … L’utilisation du défilement de page pour créer des effets originaux sur les sites est en vogue depuis maintenant bien 2 ou 3 ans, voir plus. Avec la ligne de flottaison définitivement enterrée, plus de soucis aujourd’hui les gens scrollent. La parallaxe, le scroll « story-telling« , entre autres ont permis d’apporter de la dynamique et de la profondeur dans notre expérience de navigation. Comme toutes les tendances, la parallaxe s’est elle aussi essoufflée après avoir lassé les concepteurs web et les internautes. Une expérience en deux colonnes Découlant directement des ces tendances passées, mixées avec une expérience utilisateur très représentée sur tablette et mobile, voici le double scroll. ACTV/ RCVR de Puma La page d’accueil présente le site avec une double entrée. Fade or Eddy Carles Palacio Vespillo Pour conclure : Ressources : Iscroll 4 Que pensez-vous de cet effet ?

AZMIND - Free Wordpress Themes & Web Design Resources - Une police personnalisée CSS3 avec @font-face ou Google Font L’utilisation de polices personnalisées a toujours été un problème pour les développeurs et les webdesigners. Une image de texte est affichée correctement par tous les navigateurs, tandis q’un vrai texte peut être référencé et sélectionné. Il est à présent possible grâce à la propriété @font-face d’embarquer des polices sur son site, et que celles-ci s’affichent correctement même si l’utilisateur n’a pas la police installée. Avant toute chose il est important de savoir quels navigateurs implémentent la fonctionnalité @font-face… A tous les coups ça ne va pas marcher sur Internet Explorer ! Eh bien si ! Le @font-face simple Commençons tout d’abord par le cas simple qui fonctionnera correctement sur tous les navigateurs modernes. Ce bout de code un peu particulier ne sert pas à appliquer un style à un élément, mais à déclarer une police. Une fois la police déclarée, elle est utilisable comme n’importe quelle autre police : Et c’est tout ! @font-face ultra compatible Haha effectivement !

Slider with Sliding Backgrounds Among the many super nice design features of the Yahoo! Weather app for iOS is the transition between city screens. The background image doesn't just move away as the screen moves from one screen to the next, the background image itself slides. It appears to be hiding some of the "old" screen and revealing more of the "new" screen those closer you have it to being in full view. Let's try and pull it off on the web. The HTML Like any slider, there are three main components: The container that holds everything into shapeA sliding container that is as wide as all the slides in a rowEach individual side container We won't bother too much with content inside the slide. <div class="slider" id="slider"><div class="holder"><div class="slide" id="slide-0"><span class="temp">74°</span></div><div class="slide" id="slide-1"><span class="temp">64°</span></div><div class="slide" id="slide-2"><span class="temp">82°</span></div></div></div> The container might be a <section>, slides might be <article>.

Concevoir un formulaire HTML qui tient la route Il ne vous est jamais arrivé de remplir un long formulaire pour, par exemple, commander un voyage ou un vol et ne pouvoir le valider parce que le clic sur le bouton de validation du formulaire ne produit aucun résultat ? C’est ce qui m’est arrivé il y a quelques semaines de celà… C’est vrai que je suis passé de PC à Mac et que je fais maintenant partie d’une minorité. L’accessibilité prends dans ce cas tout son sens. J’ai eu beau essayer avec Safari, Firefox, Opéra, Google Chrome, rien n’y a fait. Bref si je n’avais pas eu un PC pas loin pour passer ma commande avec Internet Explorer cette compagnie aérienne aurait perdu un client. Pourquoi ce formulaire ne fonctionnait pas , Tout bonnement parce que les personnes qui sont auteurs du code ont préféré se servir de javascript pour la validation des données plutôt que d’opter pour la solution html du bouton de type submit (button ou input) . Comment faire pour ne pas exclure des clients potentiels de votre site ? Ses attributs : * method

Des images rondes en CSS3 Avec le CSS3, on peut faire des choses qui nécessitait autrefois l'utilisation d'un logiciel de design (type Photoshop ou Gimp). Par exemple comment rendre une image ronde? Nous allons voir comment le faire tout d'abord avec une technique qui ne marche que sous chrome et safari et ensuite une technique qui fonctionne sur tous les navigateurs modernes (Firefox, Opera, Safari, Chrome et IE9). le principe est relativement simple, il suffit d'utiliser la propriété border-radius CSS3 (et ses équivalents pour les navigateur : -moz-border-radius, -webkit-border-radius). Vous noterez tout de même que sous Firefox, Opera et internet Explorer 9, la première technique ne fonctionne pas. A partir de cette exemple, on peut ainsi décliner cet exemple avec d'autres propriétés CSS La technique la plus compatible reste encore de mettre l'image au niveau du div dans la propriété css background mais au niveau référencement c'est un manque à gagner.

CSS: Centrer un objet Centrer des lignes de texte Le plus fréquent (et donc) le plus facile des types de centrage est de centrer des lignes de texte dans un paragraphe ou dans un titre. CSS possède la propriété 'text-align' pour cela: Chaque ligne d'un P ou d'un H2 est centrée entre les marges, comme ceci: Les lignes à l'intérieur de ce paragraphe sont toutes centrées entre les marges du paragraphe, grâce à la valeur 'center' de la propriété CSS 'text-align'. Centrer un bloc ou une image Quelquefois, ce n'est pas le texte qui doit être centré, mais le bloc dans son ensemble qui doit l'être. Cet étroit bloc de texte est centré. C'est également la façon de centrer une image: placez-la dans un bloc spécifique et appliquez lui la propriété margin. L'image suivante est centrée: Centrer verticalement CSS niveau 2 ne possède pas de propriété pour centrer des objets verticalement. L'exemple ci-dessous montre comment centrer un paragraphe à l'intérieur d'un bloc qui possède une certaine hauteur donnée.

SlideToggle : simplifiez vous la vie pour afficher et masquer un élément - BlogYann BlogYann Dans la série jQuery simplifie moi la vie, voici la méthode .slideToggle. Voir la démo Imaginez que vous avez un div monBloc que vous voulez masquer ou afficher en fonction du clic sur le lien displayBloc <a id="displayBloc" href="#">Contenu masqué</a><div id="monBloc">Lorem Ipsum</div> Plutôt que de s’amuser à appeler une fonction afficheMasque sur l’évènement onclick du lien pour un résultat sans animation comme ci-dessous : function afficheMasque(){ if(document.getElementById('monBloc').style.display=='none'){ document.getElementById('monBloc').style.display='block'; }else{ document.getElementById('monBloc').style.display='none'; }} Utilisez slideToggle pour obtenir la même chose avec une animation. $(document).ready(function(){ $("#displayBloc").click(function () { $("#monBloc").slideToggle("slow"); });}); La vitesse d’apparition/disparition du bloc est déterminée par ‘fast’ ou ‘slow’ ou être spécifié en millisecondes. N’oubliez pas d’inclure l’appel à jQuery dans la balise HEAD. ShareThis

Slideshow en CSS3 Un slideshow automatique grâce aux keyframes Je vous ai fait débuter par le plus complexe avec le concept de :target, juste pour vous faire souffrir ;) Vous allez vraiment apprécier cette technique un peu plus simple qui consiste à laisser tourner l'animation en la faisant passer par différentes étapes. Notre CSS va ensuite définir une animation par images-clefs. Dans un premier temps nous annonçons l'utilisation des keyframes. Une autre manière d'écrire cette même animation serait celle-ci: Cette syntaxe permet de gagner en place en regroupant les points d'étape. Ne pas oublier les préfixes pour chaque navigateur (@-moz-keyframes , @-webkit-keyframes, etc.) - Il est aussi possible de remplacer 0% et 100% respectivement par from et to. - Il est également possible d'utiliser des valeurs en pourcentage pour left. Continuons en réattribuant les styles précédemment utilisés à notre slide : Puis les styles concernant l'élément qui défile dans son conteneur : Voir l'exemple

Les préfixes vendeurs en CSS Afin de permettre le développement progressif et l'implémentation des modules CSS, les éditeurs de navigateurs (vendors) ont la possibilité d'introduire le support de propriétés spécifiques. Cette manière d'opérer est recommandée par le W3C depuis CSS 2.1 et valable pour les versions suivantes. Ces "propriétés propriétaires" doivent être préfixées d'un tiret et d'un code correspondant au moteur les exploitant : -o- pour Opera -moz- pour Gecko (Mozilla) -webkit- pour Webkit (Chrome, Safari, Android...) -ms- pour Microsoft (Internet Explorer) -khtml- pour KHTML (Konqueror) Le tout doit être suivi du nom de la propriété souhaitée ou anticipée. Ainsi, la fameuse propriété border-radius destinée à arrondir les angles des boîtes sans utiliser d'images ou de techniques alternatives s'est vue introduite par : -moz-border-radius sous Gecko (2.0 à 3.6) -webkit-border-radius sous WebKit Quelques inconvénients font surface : Recommandation d'usage courant

Related: