background preloader

CSS: Responsive Navigation Menu

CSS: Responsive Navigation Menu
Previously I wrote a tutorial on how to make a mobile navigation for responsive design, now I've discovered a new technique to produce a responsive menu without having to use Javascript. It uses clean and semantic HTML5 markup. The menu can be aligned left, center or right. Unlike the previous tutorial where it is clicked to toggle, this menu toggles on hover which is more user friendly. It also has an indicator to show the active/current menu item. View Demo Responsive Menu The Purpose The purpose of this tutorial is to show you how turn a regular list menu into a dropdown menu on smaller display. This trick is more useful on navigation with a lot of links like the screenshot below. Nav HTML Markup Here is the markup for the navigation. <nav class="nav"><ul><li class="current"><a href="#">Portfolio</a></li><li><a href="#">Illustration</a></li><li><a href="#">Web Design</a></li><li><a href="#">Print Media</a></li><li><a href="#">Graphic Design</a></li></ul></nav> Center and Right Alignment Related:  TUTORIELS

HasLayout et bugs de rendu dans Internet Explorer 6-7 Le HasLayout, dont vous avez sans doute entendu parler au détour d'un tutoriel ou sur un forum, est une spécificité du navigateur Internet Explorer pour Windows, qui affecte les versions 5 à 7 incluses. Il s'agit d'un mécanisme interne du moteur de rendu d'Internet Explorer. Le HasLayout intervient dans le positionnement des éléments et plus généralement dans le calcul de l'affichage des pages web. Bref, c'est une question de cuisine interne. Pourquoi s'en occuper, s'il s'agit de cuisine interne ? Eh bien parce que cette cuisine-là n'est pas invisible, et que ses conséquences se font sentir dans nos pages web. Concrètement, qu'est-ce-que c'est? Les explications détaillées sur le HasLayout peuvent être trouvées dans l'article On Having Layout. On retiendra surtout que, pour Internet Explorer, tout élément d'une page HTML peut avoir deux états: soit il a le layout, soit il ne l'a pas. Mais qui a le layout? Un exemple de différence de rendu lié au layout On pourrait multiplier les exemples.

Build a basic responsive site with CSS | netmag Knowledge needed: Basic CSS and HTML Requires: Text editor Project Time: 1-2 hours Everyone’s talking about responsive web design. But does everyone understand what it’s for? Put simply, it’s not about making sites for mobile devices, it’s about adapting layouts to viewport sizes. In this tutorial I’ll look at the principles behind responsive web design in detail, so we’re sure to understand the concepts correctly. Responsive web design has mainly become a hot topic because more and more people are using mobile devices such as iPhones, iPads, and BlackBerrys to access the internet. So it’s becoming increasingly important to understand that a website should not be specifically about either the desktop or the mobile device, but about building in such a way that its layout adapts to varying viewport sizes. One of the main reasons media queries have become more popular is the fact that websites are unusable on devices they weren’t considered for during design and build phases. Frustrating? <!

Creating 3D worlds with HTML and CSS by Keith Clark Last year I created a demo showing how CSS 3D transforms could be used to create 3D environments. The demo was a technical showcase of what could be achieved with CSS at the time but I wanted to see how far I could push things, so over the past few months I’ve been working on a new version with more complex models, realistic lighting, shadows and collision detection. This post documents how I did it and the techniques I used. View the demo(best experienced in Safari) Creating 3D objects In today’s 3D engines an objects geometry is stored as a collection of points (or vertices) each having an x, y and z property that defines its position in 3D space. With CSS transforms this is turned on its head. Creating objects from rectangles seems limiting at first but you can do a surprising amount with them, especially when you start playing with PNG alpha channels. All objects are created in JavaScript using a small set functions for creating primitive geometry. Lighting A second stab at lighting

16 really useful responsive web design tutorials | RWD | Page 2 08. Build a responsive site in a week: images and video: part 3 In the third part of this series, Paul Robert Lloyd looks at incorporating images and video into responsive layouts, and describes some of the problems in this area that still need solving. 09. In the penultimate part of this responsive design series, Paul Robert Lloyd explains how media queries work, and describes a device-agnostic approach to breakpoints. 10. In the final part of this responsive web design series, Paul Robert Lloyd explains how there is more to a responsive design than just flexible layouts, images and media queries. 11. Josh Broton presents tips and tricks for creating advanced layouts for responsive web design, including the CSS Flexible Box Layout Module. Event promotion 12. The Responsive Grid System isn't a framework or a boilerplate. 13. The purpose of this tutorial is to show you how turn a regular list menu into a dropdown menu on smaller display. 14. 15.

CSS Tutorials CSS Beginner Tutorial A step-by-step guide to CSS basics. Go here if you’re comfortable with basic HTML. Applying CSS - The different ways you can apply CSS to HTML.Selectors, Properties, and Values - The bits that make up CSS.Colors - How to use color.Text - How to manipulate the size and shape of text.Margins and Padding - How to space things out.Borders - Erm. Borders. Things that go around things.Putting It All Together - Throwing all of the above ingredients into one spicy hotpot. CSS Intermediate Tutorial Various odds-and-sods building on the basics of CSS. Class and ID Selectors: Make your own selectors without the need for sticky-backed plastic! CSS Advanced Tutorial Exploiting the versatile depths of CSS. Rounded Corners: Corners.

Build a responsive site in a week: designing responsively (part 1) | CSS3 Knowledge needed: Intermediate CSS and HTML Requires: Text editor, modern browser, graphics software Project Time: 1 hour (5 hours total) Support file It seems everyone is talking about responsive web design these days, and with good reason; as the number of web-enabled devices continues to grow – each with differing capabilities and features – it’s no longer sensible to build fixed-width websites. Truth is, it never was. Thankfully, the advent of CSS media queries and a growing acknowledgement that the web is a medium in its own right, means we’re starting to embrace the true nature of the platform, accepting that its universality is a strength, not a weakness. Over the next five days, I’ll guide you through a technique that recognises this fact: responsive web design. I’ll demonstrate this approach by showing you how to build a simple media gallery. 01. Much of this tutorial will centre around the development aspect of responsive design. 02. 03. 04. 05.

CSS Color Module Level 3 Abstract CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. It uses color-related properties and values to color the text, backgrounds, borders, and other parts of elements in a document. This specification describes color values and properties for foreground color and group opacity. These include properties and values from CSS level 2 and new values. Status of this document This section describes the status of this document at the time of its publication. The (archived) public mailing list (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). A separate implementation report contains a test suite and shows that each test in the test suite was passed by at least two independent implementations. A complete list of changes to this document is available. Table of Contents 1. 2. 3. 3.1. Example(s):

Build a responsive site in a week: typography and grids (part 2) For many years there was a debate among web professionals: fixed or fluid layouts? In many ways that debate has morphed into one where responsive layouts (with fluid underpinnings) are matched up against adaptive layouts (in which fixed layouts replace one another as the viewport changes). The adaptive approach has some merit, but the chosen set of fixed layouts often reflect specific device characteristics – typically those representative of Apple’s current product lineup! But between these values, designs can look odd or simply fail to make the most of the available display area. In order to fully embrace the universal, unpredictable nature of the web, far more sensible to design layouts that can flex to fit any given display. If you were on the fluid side of those earlier debates, then much of today’s tutorial will be old news to you. Mobile first Yesterday I talked about progressive enhancement: building a baseline experience before enhancing it for more capable devices. Layout

Prendre en main les CSS | Puce et Média Prendre en main les styles CSS c’est surtout, et avant tout, s’assurer d’avoir une bonne base HTML sur laquelle venir les appliquer. Ensuite, et avant de directement entrer tête baissée dans les couches purement visuelles, il faut être sûr de bien comprendre les mécaniques d’utilisation de bases, les règles, les sélecteurs, les déclarations… Bref, cette première approche, de prise en main, devrait pouvoir aider à débroussailler les principes et permettre d’entrer en douceur dans le vif du sujet. Styler des éléments Chaque page peut contenir plusieurs feuilles de styles, et chacun de ces styles peut être employé de diverses manières : en ligne, dans la page, par des feuilles liées ou importées. Le principe est très simple, il suffit de relier un élément à une règle par l’emploi d’un sélecteur. Utiliser une feuille de style L’utilisation des feuilles de style peut se faire de différentes façons. Dans une balise style Dans un fichier lié Dans une balise avec l’attribut style Les media queries

Build a responsive site in a week: images and video (part 3) Knowledge needed: Intermediate CSS and HTML Requires: Text editor, modern browser, graphics software Project time: 1 hour (5 hours total) Download source files Yesterday I described how we can craft fluid layouts, and suggested that to do this, we need to move away from pixels and instead embrace proportional units like ems and percentages. This is all well and good when dealing with passages of text; if a column becomes too narrow then text can easily wrap on to a new line. But media assets like images and video have prescribed dimensions set in pixels. We can scale these down of course, but that means downloading larger files than necessary, and bandwidth can be expensive. High definition (or Retina) displays pose another challenge. Today, I’ll look at these issues and provide insight into how we might tackle them. Scaling images within a fluid layout Yesterday we created a fluid layout for our thumbnail pattern. Fortunately, there’s an easy way to fix this. Responsive images Ratio ga ga