background preloader

Making a CSS3 Animated Menu

Making a CSS3 Animated Menu
Martin Angelov In this short tutorial, we will be using the power of CSS3 effects and transitions, to build a JavaScript-free animated navigation menu which you can use to add a polished look to your website or template. We will be using some neat features such as the :target pseudo selector and :after elements. The HTML The first step is to define the HTML backbone of the website. index.html <! You can notice that we are including a stylesheet from Google APIs. In the body of the document, we have the header, nav and footer HTML5 tags, which divide the page into three sections with semantic value. The unordered list has a fancyNav class applied to it, which we will be using to limit the effect of the CSS styles that we will be writing in a moment. So lets move on to the CSS styles. CSS3 Animated Navigation Menu The CSS You might find it surprising that the navigation menu we are building does not use any images (except for the home icon – a transparent png). The Menu Explained To Wrap Up Related:  HTML5 - CSS3

>➤ Mettre une image en fond d'une page en CSS (background-color image attachment repeat position) ☀ Couleur de fond de la page Background Vous pouvez définir directement en CSS le fond d'une page HTML et meme une image. Valeurs possibles : background-color background-image background-attachment background-repeat background-position (!) Couleur de fond Plus simplement, vous pouvez définir une couleur de fond pour votre page HTML : background-color: valeur; Mettre une image en fond Vous pouvez mettre une image en fond de vos page HTML : background-image: url(URL_de_image); Valeurs possibles : Background-attachment : Fond avec une image Cette propriété "background-attachment" permet de définir si une image reste fixe ou suit le mouvement de la page lors du scroll. Répétion de l'image Cette propriété "background-repeat" permet de placer une image en fond de page qui va etre définie suivant les valeurs adoptées : background-repeat: valeur; Position de l'image de fond Vous pouvez définir la position de l'image de fond avec précision: background-position: valeur;

6 Cool Image Captions with CSS3 CSS3 is really powerful. It used to be that we need images or a bunch of JavaScript codelines to make a simple transition effect. Nowadays we can do the same with only CSS3. In this tutorial, we will show you how to create image captions with various transitions simply using CSS3. Browser Support This caption will be much dependent on transform and transition properties which are relatively new features, so, it would be wise to take note of the browser support needed to run the caption smoothly. The following are browsers that already support transform and transition: Internet Explorer 10+ (not released yet)Firefox 6+Chrome 13+Safari 3.2+Opera 11+ Now, let’s start the tutorial. HTML Structure We have 6 images; each image with a different caption style. Basic CSS Before styling any element, it is always a good start to reset all the properties using this CSS reset and give them their default style values, so all browsers will render the same result (except maybe, IE6). Image Box Style Caption 1

>➤ Police en CSS : Famille de police, taille, couleur... ☀ La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS. font-family: Famille de police font-size: Taille de votre police de caratère font-style: Gras, italique, oblique... font-variant: Variante de police font-weight: Taille de la police A savoir : Dans ce chapitre, la notion d'héritage est appliquée. (voir notion d'héritage sur ce lien Les noms de familles contenant des espaces doivent etre mis entre guillemets: font-family: "Trebuchet MS", Verdana, Geneva, Arial; Famille de police Il est très utile de fixer avec le CSS la police de caratère : font-family: Verdana, sans-serif; Deux valeurs possibles : Nom de la famille Famille généric Si vous mettrez un nom de famille comme "verdana", c'est bien de mettre d'autre police de caratère dans l'ordre de votre préférence. En effet, si la police que vous souhaitez pour votre site s'affiche correctement si votre ordinateur, elle peut ne pas etre présente sur un autre ordinateur. Gras, italique, oblique...

10 of the coolest CSS3 and CSS effects We all know it and we all love it, and of course by now you probably already know I am talking about CSS and CSS3. Actually, we should probably take a moment to thank CSS3 before going any further for speeding up the load times for all of your favorite sites. They, if they know what they are doing, are more than likely using CSS3 in place of a ton of images to enhance user load times, which is pretty awesome. It is a pretty accepted fact by now that we simply do not need images to do all the things we used to need them for. Don’t be mistaken though, CSS3 and CSS can’t do everything but, ironically enough, I doubt most of us are aware of its limitations or what pushes the very edges of its possibilities. Well, today we are here to find that out. Note: I am doing all of these with the presumption of a user being on Google chrome, so please for the love of all that is holy before actually implementing these in your site use the appropriate prefixes for other browsers. Text-based effects or

CSS 3 transform : rotation et échelle Aujourd’hui nous allons voir deux nouveaux effets réalisés en css3. Ces effets sont des effets de transformation, un changement d’échelle (avec la propriété transform : scale) et une rotation (avec la propriété transform : rotate). Ces effets peuvent s’appliquer à toute balise. Voici une démonstration du résultat : (c’est toujours pareil, les propriétés CSS3 ne sont pas reconnus par tous les navigateurs et donc je vous conseil de vous munir d’un navigateur récent tel que Chrome 12, Firefox 4, Safari 5 ou bien Internet Explorer 9) Et à présent voici le code à utiliser : La partie HTML est très simple La partie CSS Voilà c’est fini pour aujourd’hui, j’espère que ces petits effets pourront vous servir.

Makisu ~ CSS 3D Dropdown Concept Nigiri Maguro Sake Unagi Buri Suzuki Saba Iwashi Kohada Hirame Tobiwo Maki Ana-kyu Chutoro Kaiware Kampyo Kappa Natto Negitoro Oshinko Otoro Tekka Sashimi Toro Ebi Ika Tako Tomago Kani Katsuo Toggle CSS 3D Not Detected :( I couldn't detect your browser's CSS 3D capabilities. Animated Border Menus A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash's bounce menu for mobile apps. View demo Download source The other day I saw a really nice concept of a menu on the UI8 site. CreativeDash implemented that gorgeous concept and I instantly had some ideas for more effects involving border transitions but also with the desktop in mind. So today I want to show you how to create something like that and provide some more inspirational examples. In this tutorial we will be going through demo 2 where the menu icon is in the top left corner and the border is thickest on the left side. Please note that we’ll be using transitions and animation on pseudo-elements which won’t work in some browsers (e.g. So, let’s get started! The Markup The HTML structure for our menu will consist of a nav element that will contain a trigger anchor and an unordered list with the menu items which will consist of icons: Let’s style this.

Mastering CSS Gradients in Less Than 1 Hour Have you refrained from using CSS Gradients because either you didn’t understand them, or thought the browser support for them wasn’t good enough to consider using them in your projects? Well, it’s time to kill those 1px wide images, my friend. If you’re just curious about how to use CSS Gradients, this is the place for you. We’ll start with the basics of syntax to very advanced effects with lots of tips and examples. Remember, learning about CSS gradients is really important since browsers are getting better and better every day. So, let’s rock! Basic syntax The first thing you must be aware of is browser support. We’ll focus on “standard” browser rules here (e.g. we won’t talk about old from() to() rules), and we’ll have a chapter on IE compatibility at the end (since its filters don’t allow all the effects we’ll see here). This is the basic syntax: This CSS will get this result: So, here are the items explained: Here is an example making use of color positions: Multiple gradients Cool Effects

Se lancer dans le HTML 5 Nous allons voir ensemble comment se familiariser avec les nouveautés HTML 5. Nous verrons quelques balises importantes de la prochaine version majeure du HTML. » La version 5 de HTML apporte à tous les webdesigners des outils pour simplifier le développement. Nous allons tout d’abord parler de compatibilité. Et voici le code : Nous allons voir les différentes déclarations de type de document ou doctype. → Voici à quoi ressemble le doctype de l’HTML 4.01 : → Voici à quoi ressemble le doctype de l’XHTML 1.0 : → Voici le doctype ultra simplifié de l’HTML 5 : Balises meta, script et link → Voila la balise meta d’un document en HTML 4.01 : → Voila la balise meta d’un document en HTML 5 : → Pour la balise script, là ou avant le html 5 il fallait préciser type= »text/javascript », désormais plus besoin de le préciser. → Il est aussi inutile de préciser type= »text/css » pour la balise link en HTML 5 : Balise Canvas → La balise canvas sert à afficher des graphiques. Balise audio Balise video → une date :

CSS3 Solutions for Internet Explorer Advertisement Experienced developers understand that CSS3 can be added to new projects with progressive enhancement in mind. This ensures that content is accessible while non-supportive browsers fall back to a less-enhanced experience for the user. But developers could face a situation where a client insists that the enhancements work cross-browser, demanding support even for IE6. Opacity / Transparency I think all developers are baffled at why Internet Explorer still fails to support this very popular (albeit troublesome) property. The Syntax You really only need the second line, which works in all versions of Internet Explorer. The opacity value at the end of each IE line works basically the same way that the opacity property does, taking a number from 0 to 100 (the opacity property takes a two-digit number from 0 to 1, so “44″ for IE would be “0.44″ for the others). The Demonstration This is the same element without the opacity settings. The Drawbacks Rounded Corners (border-radius)

Perspective Page View Navigation Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mobile app design and we wanted to explore some more effects. View demo Download source Pushing the site content aside to reveal a navigation has certainly become a trend for mobile navigations. Please note that this is highly experimental, so let us know if you find any bugs or problems. For the general effect to work, we need to wrap our page into a perspective wrapper. When we trigger the effect, we’ll need to change the position and overflow of the divisions to just show the current view. Depending on which effect we have set as a class to the perspective wrapper, we’ll animate the container and the menu items once we click the trigger button. We also added some example media queries that show how to resize or reposition the menu for smaller screens. There are two styles for the menus which is a horizontal and a vertical one.

Related: