Circle Hover Effects with CSS Transitions From our sponsor: Get started on your Squarespace website with a free trial In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, we are going to create some special hover effects for it! Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. We will omit vendor prefixes in this tutorial. So, let’s get started! The HTML For most of the examples, we’ll be using the following structure: Although we could use images here, we’ll give ourselves a bit more freedom by using background images instead. Now, let’s make some hover effects! The CSS Example 1 And now, the interesting hover action!
Hover.css - A collection of CSS3 powered hover effects All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place. Licenses Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. Personal/Open Source For personal/open source use, Hover.css is made available under a MIT license: Use in unlimited personal applications Your application can't be sold Your modifications remain open-source Free updates Read full license Commercial For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses. Commercial License Purchase | Read full license Extended Commercial License
Créer des menus simples en CSS Dans ce tutoriel, nous allons apprendre à réaliser des menus "simples" (sans arborescence: tous les liens sont au même niveau) à l'aide des feuilles de style. Sommaire Le code HTML Comme toujours, le choix des balises html doit être guidé par la nature du contenu qu'on souhaite y placer. Dans le cas d'un menu, la question est un peu délicate, dans la mesure où il n'existe pas de balise spécifique pour désigner un ensemble de liens. Un point de vue largement répandu consiste à considérer le menu de navigation comme une liste de liens, et donc à utiliser la balise correspondant aux listes non ordonnées, <ul>. Par exemple, pour un menu comportant 5 items: <ul id="navigation"><li><a href="#" title="aller à la section 1">item1</a></li><li><a href="#" title="aller à la section 2">item2</a></li><li><a href="#" title="aller à la section 3">item3</a></li><li><a href="#" title="aller à la section 4">item4</a></li><li><a href="#" title="aller à la section 5">item5</a></li></ul> Voir le résultat
Création d'un menu responsive déroulant en HTML et en CSS Présentation de l’exercice Dans cet exercice, nous allons réaliser un menu responsive déroulant seulement en HTML et en CSS, sans l’aide d’aucun autre langage comme le JavaScript par exemple. Afin de retirer le maximum de cet exercice, il est fortement conseillé de posséder de bonnes bases en HTML et particulièrement en CSS. Dans son état « normal », notre menu va ressembler à cela : Ensuite, on va vouloir que notre menu s’adapte en fonction de la taille de l’écran de vos visiteurs, afin d’offrir une meilleure expérience de navigation. Voilà donc le type d’affichage qu’on va chercher à avoir sur Smartphones notamment : Cet exercice va se découper en différentes phases : La phase de réflexion ; La création du menu en HTML ; La création du menu en CSS ; L’ajout des fonctionnalités responsives. Etape n°1 : La réflexion On commencera toujours nos développements par une phase de réflexion. Dans notre cas, nous voulons créer un menu déroulant et responsive. On est prêt pour commencer !
Menu déroulant – FrogWeb Menu déroulant 2 niveauxComme il y avait pas mal de demandes je me suis amusé à faire un :menu-deroulant-2-niveaux Pour le code il y a juste à afficher le code source. Menu déroulant horizontal Pour cacher/montrer un sous menu la technique du display: none (cacher) et display: block (montrer) est souvent utilisée. Pour des raisons d’accessibilité et de reférencement j’utilise une autre technique : left: -999em (cacher) et left: auto (montrer) Utilisation de left Tout d’abord une précision quant à l’utilisation de left, top, right et bottom : ça ne fonctionne que sur des éléments positionnés (absolute, fixed, relative). Cela tombe bien puisque pour faire un sous menu déroulant celui-ci doit-être en position: absolute. Voici le code totalement épuré de toute CSS décorative pour une meilleure compréhension : Code HTML Code CSS ce qui nous donnes (ah oui, c’est du brut…) : D’autres techniques existent mais je trouve celle-ci plus « propre ». Rien ne vous empêche également de les laisser.
creativemarket Awe your audience graphically with The Biggest Infographics Bundle on the Internet! It contains approximately 1500 infographic templates at this moment and it is veeeeeery updatable ;) Perfect for any industry from social media and marketing to medical and education. Buy now and get all upcoming infographics for FREE! Extended License is also $39. ★ Real value of all included products is $654. Each of these infographics is represented in Ppt, Pptx, Key, Psd, Eps & Ai (except for TRUE Infographics Bundle (only Ps & Ai) and Bonus Slides (only Ppt, Pptx & Key). Every file is absolutely easy to edit in the software of your choice: Powerpoint, Keynote, Photoshop, Illustrator. Now also added Free Bonus: - Must Have Slides Power - Must Have Slides Keynote You can try for FREE: This Bundle includes: Main features: Used free fonts: Buy now and get all upcoming infographics for free! Infographics | Free updates! TheSeamuss
Osez HTML5 et CSS3 ! Après une excitante présentation de ce que nous réserve CSS3 et une introduction à HTML5, les concepteurs web sont de plus en plus curieux de savoir si l'on peut d'ores et déjà créer un site décent à l'aide de ces technologies passionnantes. La question en substance : "peut-on concrètement faire du HTML5 et du CSS3 en 2012?", la question subsidiaire - inévitable - "...et que faire des anciens navigateurs?". Vous l'avez deviné, le but de cet article est de répondre positivement à la première question et de proposer des solutions à la seconde. Un site perso en fil rouge Pour étayer cet article, nous allons nous servir d'un fil rouge : mon site personnel Goetter.fr dont l'intégration a été réalisée en plusieurs étapes, et destiné à servir de passerelle entre mes différentes activités. Cet article a été initialement rédigé en 2012. Voyons en détails le cheminement et les écueils de cette intégration... Les Grands Anciens Rappel historique Le cas Internet Explorer
Annexe H : Index Lisez-moi S.V.P. précédent sommaire propriétés index Annexe H : Index :active, 2, 3 :after, 1, 2 :before, 1, 2, 3 :first, 1 :first-child, 1 :first-letter, 1 :first-line, 1 :focus, 1 :hover, 1 :lang, 1 :left, 1 :link, 1, 2 :right, 1 :visited, 1, 2 =, 1 ~=, 1 |=, 1 @charset, 1 @font-face, 1, 2, 3, 4, 5, 6, 7 @import, 1, 2, 3 @media, 1, 2, 3, 4 @page, 1 absolue, longueur [...], 1 active (pseudo-classe), 1, 2 after, 1 agent utilisateur, 1 ancêtre, 1 <angle>, 1, 2 définition de [...], 1 anonyme, 1 anonyme, boîte en-ligne [...], 1 arménien, 1 'ascent' (descripteur), 1 atomiseur, 1 attr(), 1 attribut, 1 auditive, image [...], 1 'auditif', groupe de média [...], 1 'azimuth', 1 <gauche> définition de [...], 1 géorgien, 1 glyphe, 1 glyphe abstrait, 1 'grille', groupe de média [...], 1 'groove', 1, 2 <haut> définition de [...], 1 hauteur-x, 1 hébreu, 1 'height', 1 'hidden, 1 'hidden', 1 hiragana, 1 hiragana-iroha, 1 horizontale, marge [...], 1 hover (pseudo-classe), 1 katakana, 1 katakana-iroha, 1
CSS Examples linear-gradient La fonction linear-gradient() permet de créer une image (type <image>) représentant un dégradé de couleur linéaire. Le résultat de la fonction sera un objet CSS <gradient>. Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner et à envoyer une pull request ! Comme pour les autres types de dégradés, la valeur obtenu n'est pas une couleur CSS (type <color> mais une image sans dimension intrinsèque. Autrement dit, celle-ci ne possède aucune taille « naturelle » ou préférée, sa taille réelle correspondra à la taille de l'élément auquel elle est appliquée. Les dégradés linéaires sont définis par un axe : la ligne du dégradé. La ligne du dégradé est définie par le centre de la boîte contenant le dégradé et par un angle. Le point de départ utilise la couleur initiale du dégradé. La fonction linear-gradient ne permet pas de répéter le motif du dégradé. Syntaxe
htmlcolorcodes How To Create a Scroll Back To Top Button