Smashing Magazine. CSS3 . Info - All you ever needed to know about CSS3. Galerie d'images dynamique. Le but de ce tutoriel va être de reprendre le tutoriel « Galerie Snoupix Flip » réalisé en Jquery et d’en faire une galerie dynamique avec une petite interface d’administration pour gérer chaque photo.
Au programme, vous allez essentiellement travailler avec l’upload d’image en PHP, l’insertion, la sélection et la suppression de données dans une table MySQL. C’est parti… Etape 1: Création de la table SQL Chaque image aura donc comme information: un identifiant unique, un nom et le lien de son image sur le serveur. Ces informations seront inscrites dans la base de données, tandis que l’image et sa miniature seront dans un dossier « images » de votre serveur. La base de données s’appelle donc « galerie », et la table se nomme « images ». Etape 2: La page d’administration Tout d’abord spécifions l’arborescence de nos fichiers.
Etape 3: Ajouter des images Maintenant, attaquons le coeur de notre problème et commencons par traiter les données de notre formulaire. Etape 4: Gérer ses images. CSS Extensions - MDC. Mozilla supports a number of extensions to CSS that are prefixed with -moz-. Some of these properties have been included in draft CSS specification for inclusion in the final recommendation, but are still experimental. The final standard property may be different from the current prefix implementation. Some of these non-standard properties apply only to XUL elements. Once standardized, and the support for the un-prefixed variant added, the prefixed properties are dropped. Mozilla-prefixed properties on the standard track Proprietary Mozilla-prefixed properties (do not use on Web sites) Previously prefixed properties now standard Values For all properties -moz-appearance background-image border-color border-style and outline-style -moz-bg-inset | -moz-bg-outset | -moz-bg-solid dropped in Gecko 1.9 (Firefox 3.0) <color> keywords display empty-cells -moz-show-background (default value in quirks mode) font font-family image-rendering list-style-type overflow text-align -moz-center -moz-left -moz-right At-rules.
CSS3 Dropdown Menu. While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.
View Demo CSS3 Dropdown Preview The image below shows how the menu will look if CSS3 is not supported. One Gradient Image is Used A white-transparent image is used to achieve the gradient effect. The instensitiy of the gradient can be changed by shifting the background image up or down. CSS Code I’m not going to explain the CSS line by line. Update Apr 13 2010: Pure CSS Dropdown (No Image Used) The following demo used CSS gradient and IE gradient filter instead of the gradient image.