Ombres avancées avec CSS3 et box-shadow CSS3 c’est pour l’aspect vendeur du nom, car au final on va aussi et surtout bénéficier du service de pseudo éléments (:after et :before) qui sont prévus depuis CSS2.1. Les visuels que vous voyez sur la page de démonstration ne sont composés qu’avec des propriétés CSS sur une seule et unique <div> (pour chaque bloc). Chez moi le meilleur rendu est sous Firefox, notamment pour la dernière ombre qui est un peu osée (au passage il semblerait que la propriété opacity ne fonctionne pas sur les pseudo-éléments). Dans cette démonstration nous allons utiliser des propriétés avancées de CSS2.1 (:before et :after) qui sont des pseudo-éléments. Des pseudo-éléments permettent de construire un élément dans la structure de votre document (DOM) sans vraiment en construire un… ok, ça commence bien pour l’explication. Pseudo-éléments :after et :before Ainsi tous les liens porteurs de l’attribut hreflang se verront agrémentés d’un « (en) », dans le cas d’un lien anglais par exemple :Mon lien (en) Bogues
[PHP] Afficher les articles d’un flux RSS « Tony Archambeau Les flux RSS sont utiles pour suivre l'actualité d'un site web. Sachant qu'ils contiennent les informations liés aux articles d'un site, il peut se révéler pratique d'extraire le contenu d'un flux RSS pour en afficher une liste des articles avec un lien vers ceux-ci. L'objectif de cet article consiste à créer un simple code PHP qui sert d'agrégateur RSS. ElePHPant Prérequis Il faut avoir quelques notions avec le langage de programmation PHP et avoir un hébergement qui prend en compte PHP 5. Code PHP Le code PHP, qui ne fait que 8 lignes, est visible ci-dessous. <? Démonstration Dans un premier temps ce code extrait les informations du flux RSS et convertit le document XML en un objet. A l'intérieur de la boucle foreach, il y a il ne reste plus qu'à afficher les informations souhaités. Personnaliser Il est possible d'utiliser plus d'informations si celles-ci sont disponibles dans le flux RSS. Amélioration supplémentaire Il est possible d'améliorer le code présenté sur cet article.
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
Comment migrer son site WordPress avec le script DBSR | Grégoire Noyelle Dans ce dernier tutoriel sur le sujet nous verrons comment migrer un site d’un emplacement A à un emplacement B avec le script DBSR. Pour les deux les versions peuvent être en ligne ou en local. La seule chose à respecter est de copier les bonnes URL. Mise au point importante Attention, merci de vous référer à cet autre article sur les bases de la migration WordPress. Lancer le script pour migrer WordPress Après avoir effectué les transferts du dossier WordPress et de la base de données (comme décrits dans l’article sur bases de la migration WordPress, nous allons lancer le script. Placer le fichier script D’abord téléchargez le script DBSR et installez le à la racine de votre site après avoir extrait le contenu de l’archive .zip.Attention à bien supprimer le dossier du script après la migration. Vous lancerez ensuite le script en utilisant l’URL: L’URL nom-de-mon-site devra être remplacée. Vérifier les réglages de la base de données WordPress
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. 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 Est ce que vous savez bien taper au clavier? Jouez au piano Jeu de chiffre Jeu de géographie
Change All WordPress Site URLs in the MySQL Database via phpMyAdmin – Stanhub Moving a WordPress website to a new domain, host or just a different directory scares many people. There are a lot of ways you can do this. Some people prefer to process the migration manually, others prefer to use a plugin as there are quite a few available. Whether you are using a plugin or not, it often happens that after the migration process you are still encountering URLs through your website, pointing to the old WordPress location. You can easily modify all WP site URLs in the MySQL database tables through phpMyAdmin. 1) Log into your phpMyAdmin profile 2) Select the database you would like to edit 3) Run the following SQL queries: Note: Don’t forget to change ‘ and ‘ in the snippet above. Please bear in mind this is not a complete guide on how to move a WordPress website to a new domain/host. If you have any questions or concerns, please do not hesitate to let me know.
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
CSS Débutant : cours et tutoriels sur les feuilles de style CSS 1,2 et 3 Web Font Specimen Conception responsive : obtenir une validation sans maquettes Par Matt Griffin Concevoir un site web dans Photoshop, quelle drôle d'idée ! Comment avons-nous pu nous mentir à ce point pendant des années ? Heureusement le besoin grandissant de devoir afficher les sites web sur différents supports pousse à la conception dans le navigateur web. Retour d'expérience sur un processus qui pourrait devenir la norme dans les années à venir. Si vous concevez des sites Web, il y a des chances pour que vous ayez déjà réfléchi à la question des différentes étapes d’un processus de conception adaptée aux différentes largeurs d’écrans — et vous en avez sûrement conclu qu’ajouter une maquette pour chaque point de rupture était une approche ni durable ni efficace. Du moins, c’est ce qui s’est passé dans mon entreprise — Bearded — où pendant des années nous avons créé des sites Web à l’aide de Photoshop ou d’Illustrator, fait valider ces maquettes par nos clients, puis recréé ces designs à l’aide de CSS. Ce temps est révolu. Parlons processus Signez ici
Fashionably flexible website design by Stuff & Nonsense There’s nothing that inspires us more than a good story and Sophie Macfarlane’s account of how she took over her grandparents’ conservation in Northern Kenya was one such story. Rudi M van Dijk Foundation When we heard the story of the National Iraqi Youth Orchestra’s and how the Rudi Martinus van Dijk Foundation supports them, we wanted to devote some of our ‘good causes support days’ to designing a new website. Evolve Beyond Gabrielle Benefield needed to create a unified visual identity across all her activities. She wanted a brand that reflects her personality and that stands apart from her competitors. The Environment Bank The team at The Environment Bank inspired us every day to create something special to help to promote their important environmental work. pairoo We designed striking new branding for this German dating site and gave them a toolkit of styles for them to build their site.