Creative Button Styles From our sponsor: Create spectacular WordPress sites with ease. Today we would like to give you some button inspiration. This button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons we use a bit of JavaScript to add/remove effect classes. The icons, which we add using the :before (and sometimes :after) pseudo-class, are from IcoMoon and we’ve created them with the IcoMoon app. Please note: this only works as intended in browsers that support the respective CSS properties. The markup of a button is really simple. <button class="btn btn-6 btn-6d">Button</button> The common styles for all the buttons are some resets defined in .btn and we use the specific numbered classes for the different sets of styles. An example for a specific button style is the following:
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!
7 logiciels de PAO pour mettre en page vos documents Réaliser un journal, un magazine, une brochure, ou un catalogue demande pas mal de connaissances, aussi bien en matière de rédaction qu’en matière de graphisme. Une bonne mise en page doit en effet mettre en valeur les informations les plus importantes, tout en attirant esthétiquement parlant le lecteur. Une tâche complexe, que l’on peut rapidement simplifier grâce à l’utilisation d’un logiciel de PAO (Publication Assistée par Ordinateur). Scribus Commençons par la référence du genre avec le logiciel Scribus. Adobe InDesign Mais si la mise en page fait partie intégrante de votre métier, rien ne vaut le logiciel Adobe InDesign. Microsoft Publisher Après Adobe place à un autre grand éditeur de logiciels, j’ai nommé Microsoft. QuarkXPress Continuons dans les logiciels de PAO payants avec QuarkXPress. PagePlus Starter Edition RagTime A l’opposé de PagePlus Starter Edition, on retrouve le logiciel RagTime. LyX Terminons avec le logiciel libre LyX.
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
10 bons outils pour créer des images épatantes pour le web et les réseaux sociaux Une photo, une infographie, une citation sous la forme d’une image, quelques idées pour améliorer l’impact de vos blogs de classe ou de vos publications sur les réseaux sociaux. La création d’une image impactante est désormais à la portée de tous grâce à des éditeurs en ligne simples à utiliser. Voici une sélection de dix d’entre eux. Dix bons outils pour créer des images en ligne pour le web ou…pour afficher en classe ou insérer dans vos cours. Canva J’ai déjà présenté Canva ici même. PicMonkey C’est un véritable studio de création Photo que vous propose PicMonkey. Pablo Si vous souhaitez créer des images ou des illustrations pour les réseaux sociaux c’est Pablo qu’il vous faut. PhotoVisi Photovisi est un outil assez ludique qui permet de jongler avec vos photos et de faire des collages ou montages. BeFunky Interface et ergonomie particulièrement soignée avec BeFunky. Infogram Piktochart Je vous ai déjà parlé également de Piktochart. Quozio Recite Social Image Resizer Voilà pour cette liste.
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