Comment générer une box CSS avec ombre portée Si vous cherchez un moyen de générer de jolis cadres en CSS avec ombre portée et tout le bordel... Du genre de celui-ci : Ne vous prenez plus la tête ! Il existe un super générateur très simple à utiliser. Et hop, c'est tout chaud démoulé, prêt à être intégré dans vos pages web. Rejoignez les 52126 korbenautes et réveillez le bidouilleur qui est en vous Suivez KorbenUn jour ça vous sauvera la vie.. rewrite Available Languages: en | fr Summary This module uses a rule-based rewriting engine (based on a regular-expression parser) to rewrite requested URLs on the fly. This module operates on the full URLs (including the path-info part) both in per-server context (httpd.conf) and per-directory context (.htaccess) and can generate query-string parts on result. Further details, discussion, and examples, are provided in the detailed mod_rewrite documentation. Quoting Special Characters As of Apache 1.3.20, special characters in TestString and Substitution strings can be escaped (that is, treated as normal characters without their usual special meaning) by prefixing them with a backslash ('\') character. Environment Variables This module keeps track of two additional (non-standard) CGI/SSI environment variables named SCRIPT_URL and SCRIPT_URI. Notice: These variables hold the URI/URL as they were initially requested, that is, before any rewriting. Example Rewriting in Virtual Hosts Example: Security
Un arrière-plan extensible intelligent Certains sites affichent une (grande) image de fond qui s'adapte à toutes les dimensions de la fenêtre du navigateur, proportionnellement, sans la déformer. La réalisation de ce genre de prouesse n'est pas si évidente techniquement, contrairement à ce que l'on pourrait croire de prime abord. Comment fait-on ? Nous allons présenter ici deux méthodes parmi celles qui sont possibles : une entièrement en CSS , une autre basée sur jQuery. Exemples Pour avoir un aperçu de ce que l'on veut obtenir, voici quelques exemples utilisant ce principe : Simon & Comet Flavors me Piz'za-za Le point commun de tous ces sites est la mise en avant de leur background : il est fixe et c'est la pièce maîtresse de leur design. Le principe Comme vous venez de le remarquer, ce n'est pas qu'une simple image de fond qui s'adapte à la fenêtre : il n'y a aucune déformation, le ratio est toujours conservé et lorsque la fenêtre est vraiment étroite le fond est recadré. Préparation de l'image de fond La méthode CSS3 Le code HTML
An In Depth Guide to mod_rewrite for Apache Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tutorial was first published last September. When people think of .htaccess configuration, the first thing that might pop into their minds is URL manipulation with mod_rewrite. But they're often frustrated by mod_rewrite's complexity. This tutorial will walk you through everything you need to know for the most common mod_rewrite tasks. Mod_rewrite Rants Thoughts on mod_rewrite vary quite a bit. mldk: Aargh! bsterzenbach: Man do I love mod_rewrite. mikemackay: Still loving the total flexibility of mod_rewrite - coming to the rescue again. hostpc: I hate mod_rewrite. awanderingmind: Oh Wordpress and Apache, how thou dost vex me. danielishiding: Why won’t mod_rewrite work! A few things I noticed are that people clearly recognize the power of mod_rewrite, but are often frustrated by the syntax. Despite the tons of examples and docs, mod_rewrite is voodoo. What a turn off! URL vs. Syntax
Expanding Images using HTML5's contenteditable tabindex HTML5 has a new attribute, contenteditable, which can be applied to any element which allows it to be edited directly in the browser window. Think of text input with a predefined value, but it can literally be any element. Form elements like text inputs support the :focus pseudo class, which allow us to style those elements when they are clicked upon or otherwise navigated to. Giving an element the contenteditable attribute means it also now supports the :focus pseudo class, which opens up some interesting possibilities! We'll exploit this little trick to make an expanding image (like a lightbox without the overlay) right within some content. UPDATE: Even better, you can give attributes a tabindex attribute, like you would a form element, which allow allows :focus without the editability. HTML5 Markup HTML5 has nice elements for including captioned images. <section class="image-gallery"><figure><img src="images/img-1.jpg" alt="jump, matey" /><figcaption">Jump! The Images The CSS Related
apiDoc - Inline Documentation for RESTful web APIs Preface All examples in this document use the Javadoc-Style (can be used in C#, Go, Dart, Java, JavaScript, PHP, TypeScript and all other Javadoc capable languages): /** * This is a comment. */ For other languages use their specific multiline comment code: CoffeeScript ### This is a comment Erlang (% within the comment is optional) %{ % This is a comment. %} Perl (Doxygen) #** # This is a comment Python """ This is a comment Ruby =begin This is a comment. Install npm install apidoc -g Run apidoc -i myapp/ -o apidoc/ -t mytemplate/ Creates an apiDoc of all files within dir myapp/, uses template from dir mytemplate/ and put all output to dir apidoc/. Without any parameter, apiDoc generate a documentation from all .cs .dart .erl .go .java .js .php .py .rb .ts files in current dir (incl. subdirs) and writes the output to . Command Line Interface Show command line parameters: apidoc -h Important parameters: GRUNT Module A separate grunt module is supported, visit github.com/apidoc/grunt-apidoc or install via npm:
Effet Lightbox en CSS3 grâce à transition Effet Lightbox en CSS3 grâce à transition Cet article a 4 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 29 965 fois. C’est en parcourant un lien partagé par Raphaël hier dans la journée, que je me suis décidé à tripoter un petit peu de CSS et HTML pour améliorer le rendu de M. Où cela se passe-t-il ? Vous trouverez les fichiers sur l’espace de test de CreativeJuiz, précisément à cette adresse : Le HTML Le code HTML utilisé est vraiment basique. <figure tabindex="0"> <img src="images/demo1.jpg" alt="Demo" /> <figcaption>Rorschach Artefact</figcaption> </figure> <span></span> <figure tabindex="0"> <img src="images/demo2.jpg" alt="Demo" /> <figcaption>Mystic Light</figcaption> </figure> <span></span> <figure tabindex="0"> <img src="images/demo3.jpg" alt="Demo" /> <figcaption>A simple idea... Le CSS Contenteditable M. À propos de Geoffrey Laisser un commentaire
Développement d'applications web multimédias Jules VERNE | CD de collection | nouvelle version Information générale Interface graphique (au format HTML-CSS-jQuery, pour toute plate-forme) pour la consultation en/hors ligne (version CD) des 69 romans, 21 nouvelles (et autres) de Jules VERNE, parus entre 1845 et 1914 (et plus ...). version actuelle: 2011.01 Tous droits réservés © 2011+ ISBN 978-2-923610-02-3 Détails Peut fonctionner sur divers supports: CD, DVD, clé USB Conçu à la base, pour une résolution d'écran de 1024 X 768 pixels et plus Permet la consultation des formats PDF, Flash, ePub, ... Droits et copyright Pour une utilisation personnelle (non commerciale et non professionnelle). Téléchargement | uniquement les livres numériques chez ELG C'est gratuit mais merci de faire un don volontaire sur la page de ELG Téléchargement Téléchargement ou CD | l'interface graphique et les livres
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. La spécification relative au module est disponible à l'adresse suivante : Remarque : Les moteurs récents implémentent la spécification. Principe de base Le principe de base d'une transition CSS3 est de permettre une transition douce entre l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement est déclenché : soit via une pseudo-classe telles que :hover, :focus ou :active soit via JavaScript La ou les propriété(s) à animer La durée de l'animation Exemples concrets
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>
Test de @font-face sur les différents navigateurs Attention: cette page est ancienne et les techniques pour utiliser @font-face en CSS ont largement évolué: formats (WOFF), syntaxe, services en ligne, etc. Préambule La règle CSS @font-face est la réponse de CSS aux besoin des webdesigners d’utiliser une typographie personnalisée, ne dépendant pas des fontes installées sur le poste informatique du visiteur d’un site. Elle permet de demander au navigateur de télécharger un fichier de fonte, et de l’utiliser pour un nom de fonte donné. Plus d’informations sont disponibles sur Alsacréations: Comment utiliser une fonte «non-standard» sur un site Web? Nous allons tenter d’utiliser @font-face avec tous les navigateurs qui supportent cette règle d’une manière ou d’une autre. Exemple d’utilisation Utilisation de @font-face avec la fonte Chantelli Antiqua, de Bernd Montag (les polices Arial et Helvetica sont déclarées en deuxième et dernier choix): Vestibulum Commodo Felis Quis “Tortor” Donec nec justo eget felis facilisis fermentum. Ça marche!
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). Mais ces temps sont révolus grâce à CSS et la règle @font-face. CSS et sa règle @font-face permettant d'afficher n'importe quelle police on se met à rêver. Trouvez la police Rendez-vous sur Font Squirrel et trouvez dans la famille Blackletter la plus moche celle qui vous plaît.Téléchargez le kit font-face. Embarquez la police Mettez la police dans votre espace Web avec la feuille de style du package : Dans l'exemple c'est proclamate_incised que je vais utiliser pour rendre ma lettrine illisible. Trouvez votre image de fond Créez votre lettrine On va définir la classe : h2+p:first-letter
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. Le sujet des transitions et des animations a déjà été traité par maints auteurs. Avant de commencer, veuillez noter que le terme de transition s'appliquera aussi bien au module transition CSS3 qu'aux effets de timing des animations. Quelques Références Transitions: Animations: