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
Les dates Noter ce cours : Pour pouvoir noter les articles de VIC et bénéficier de tous les avantages des membres, inscrivez-vous, c'est gratuit et rapide ! Liens sponsorisés : La gestion des dates en PHP est très simple. Vous allez voir que tout au long de ce chapitre, nous allons nous servir d'une fonction principale, la fonction date(). Nous verrons ensuite la fonction time() et mktime(). Incontournable, la fonction date() s'utilise de différentes façons. Par exemple, voici un cas concret : nous allons afficher l'année en cours avec la fonction date() : Vous n'avez plus qu'à vous référer aux autres codes pour afficher ce que vous voulez. Si vous souhaitez afficher le mois et l'année, vous pourriez faire ceci : Cette solution est cependant peu pratique et gourmande. Vous allez même pouvoir formater votre date comme bon vous semble, par exemple si vous souhaitez séparer les composantes de votre date par un slash (/), vous pouvez mettre ceci : Le premier janvier 1970 à minuit, le timestamp valait 0.
Simple Icon Hover Effects with CSS Transitions and Animations Previous Demo Back to the Codrops Article Mobile Desktop Partners Support Security Settings Time Videos List Refresh Images Edit Link Mail Location Archive Chat Bookmarks User Contact Note that the dashed border on a round pseudo-element (border-radius: 50%) does not work in FF 21.0 Mobile Desktop Partners Support Security Settings Support Fav Contract Refresh Settings Time Videos List Refresh Archive Chat Bookmarks User Contact Images Edit Link Mail Location If you enjoyed these effects you might also like: Creative Button Styles Creative Link Effects
BookBlock: A Content Flip Plugin A jQuery plugin that will create a booklet-like component that let's you navigate through its items by flipping the pages. View demo Download source BookBlock is a plugin that can be used for creating booklet-like components that allow a “page flip” navigation. We will be using jQuery++ by Bitovi which has some add-ons for jQuery (specifically, to add the swipe event). The following structure will allow to add custom content in a wrapper with the class “bb-item”, which represents an open page (left and right side): The plugin can be called like this: $(function() { $( '#bb-bookblock' ).bookblock(); }); You also have to include the other scripts that are needed (see one of the demo files). Options The following options are available: The following public methods are available to use in combination with navigation elements: Check out the demos with different configurations: The illustrations and photos used in the demos are by Kevin Howdeshell, majownik and Isaac Montemayor.
Responsive Retina-Ready Menu A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes. View demo Download source Today we will create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufacturer of the Borderlands game. The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to display and hide the navigation for smaller screens. To make the menu fully retina-ready, we will use an icon font so that the icons of the menu won’t get pixelized on resize. Please note: some effects only work in browsers that support the respective CSS properties. Preparing the icon font Creating a custom icon font might look a bit complicated, but with tools like IcoMoon it’s just a matter of creating the icons and importing them into the tool. The first thing we need to do is to create the icons for the menu.
Balise INPUT : champs de formulaire « Partie précédente | Index | Partie suivante » La balise <input> fait partie des éléments permettant à un utilisateur d'effectuer des saisies de données pouvant être échangées avec le serveur. C'est l'un des différents contrôles utilisables au sein d'un formulaire <form> pour rapatrier des informations (au même titre que les balises button, textarea et select). C'est également le tag le plus complet et incontournable car il propose un nombre importants de types différents, allant de la saisie de texte à la validation ou au reset de formulaire en passant par l'affichage de cases à cocher ou de boutons radio. Propriétés pour la balise input : Exemple d'utilisation de la balise input :
BrowserCam : Browser testing and cross browser compatibility testing products and tools, including free cross browser testing tool. colourcode - find your colour scheme