background preloader

Ombres avancées avec CSS3 et box-shadow - CSS / CSS3

Ombres avancées avec CSS3 et box-shadow - CSS / CSS3
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

https://www.creativejuiz.fr/blog/tutoriels/ombre-avancees-avec-css3-et-box-shadow

Related:  WebDesigndesign web

XMLHttpRequest, spécification de l'objet par le W3C Résumé La spécification de l'objet XMLHttpRequest définit une API (Interface d'application) qui procure au script client des fonctionnalités pour transférer des données entre un client et un serveur. Statut de ce Document Cette section décrit le statut de ce document au moment de sa publication. D'autres documents peuvent remplacer ce document. Une liste des publications W3C en cours et la dernière révision de ce compte-rendu technique peuvent être trouvés dans l' index des compte-rendus techniques W3C à

Plugins et scripts JS pour des slideshows responsive - JavaScript / jQuery Après vous avoir proposé cette sélection de slideshow il y a maintenant deux ans, celle que je vous propose aujourd’hui vient compléter un nouveau besoin réel : le responsive et la prise en charge des actions au touch. Je vais vous présenter 3 outils qui se ressemblent et qui proposent tous leurs particularités. C’est devenu un vrai besoin si vous concevez des sites web modernes pour vos clients. Aujourd’hui il est difficile de passer à côté du slideshow dans la demande qui accompagne un site web, et même si le slideshow n’est pas toujours indispensable, lorsque vous aurez besoin de le faire, autant vous armer des bons outils.

Slideshow en CSS3 Beaucoup de Webdesigners en rêvent : utiliser les CSS plutôt que le JavaScript ou le Flash pour animer leur page web. Ce rêve devient petit à petit concret avec les nouvelles implémentations des modules CSS en cours de travail (Working Draft), notamment CSS3 Animations. Celui-ci équipé des keyframes devient fort intéressant pour un contrôle avancé des animations. Nous verrons donc comment utiliser cette nouveauté, mais aussi comment combiner intelligemment la pseudo-classe target pour réaliser un slideshow. Présentation et compatibilité

Site d'actualité geek et tech - Part 2 On refaisait le monde avec Ploum en fin de semaine dernière, nous remémorant nos débuts sur le net, les premiers sites qu'on lisait et qu'on faisait et bien sûr les blogs FR qu'on aimait lire. Et je ne sais pas si c'est parce que le monde du blog s'est professionnalisé, si c'est parce que les thématiques ont changé ou si c'est parce qu'on est devenu des vieux cons, mais on n'y trouve plus vraiment notre bonheur en tant que lecteur tendance bidouilleur. Et ça me fait le même effet avec la presse papier informatique. 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.

Gérer le développement de son site avec Git Préambule Il faut d’abord avoir git d’installé. Suivant votre système, ça varie, et d’autres l’ont déjà documenté par ailleurs, alors je vous laisse faire. Ce tuto explique comment gérer votre site SPIP avec git dès le début. Un site web dynamique avec jQuery ! Bien le bonjour à vous ! JavaScript est un langage devenu incontournable en l'espace de quelques années, principalement dans le paysage du web. Et pour cause ! Transitions CSS3 Beaucoup d'intégrateurs en ont rêvé : animer les pages web uniquement à l'aide de styles CSS, sans apport de JavaScript. Grâce aux dernières évolutions du langage et au module CSS3 Transitions, il est désormais possible de réaliser des transitions basiques à l'aide de CSS dans les navigateurs récents (Safari 4+, Chrome 2+, Firefox 4+, Internet Explorer 10 et Opera 10.6+) La spécification est le document qui définit de manière claire, précise et univoque le langage.

Test et Avis du nouveau HTC One Posté par francky le 14 avr, 2013 dans Androïd, iPhone 5, iPhone-iPod, Jailbreak, Matériel, Mobilité, Slider | 7 avis HTC One, mon nouveau smartphone est enfin arrivé à la maison. Déballage, test et avis en détails, rien que pour vous ! Arrière-plans avec CSS3 Backgrounds CSS 3 rend possible l'affichage de plusieurs images en arrière-plan, dans un même élément en proposant de cumuler les valeurs au sein des propriétés background-image, background-position et background-repeat. Le résultat est similaire à des calques (ou strates) d'un logiciel graphique tel que Photoshop : l'image la plus proche de la propriété (la première énumérée) sera l'image de premier plan. Si une couleur de fond est déclarée, elle sera toujours reléguée au dernier plan. Syntaxe générale

mod_rewrite Langues Disponibles: en | fr Cette traduction peut être périmée. Vérifiez la version anglaise pour les changements récents. Vos premiers pas avec jQuery ! Pour commencer à travailler avec jQuery sur votre site web, il va falloir tout naturellement l'inclure dans vos pages. Voyons ici comment l'on va procéder. Deux méthodes pour inclure jQuery dans vos pages web

Quelques idées d’animations simples en CSS3 avec la propriété transition Depuis l’arrivée des animations en CSS sur les différents navigateurs du marché, de nouvelles possibilités sont offertes aux webdesigners. En comptant certaines propriétés de mise en style déjà reconnues par la plupart d’entre eux depuis des mois, il est facile d’imaginer de petites animations pour agrémenter vos sites et offrir une meilleure expérience utilisateur à vos visiteurs. Vous trouverez sur cette page de démonstration d’animations en CSS3, quelques exemples d’animations que je vais vous décrire ici, mais il n’y a rien de bien sorcier, il suffit de trouver l’idée. Les animations en CSS3

Les « Style Tiles », un nouvel outil pour le webdesigner ? Mais qu’est-ce que c’est ? On peut traduire en français les “Style Tiles” par le terme “Planches Tendances”. Habituellement utilisées en mode, en déco ou même en publicité, elles servent à définir les grandes tendances (graphiques, texturales, chromatiques, etc.) d’un projet donné.

Related:  Web designCSS