Public Service Announcement: Watch Your @font-face font-weight Let's say you're browsing Google Web Fonts for a free font to use on your website. You find one you like... You think it will look nice as headings on your site. So you follow the directions on Google Web Fonts "quick use". 1) Copy/Paste CSS link to page: 2) Copy/Paste font-family CSS to your headings CSS: And alas! But then you start to notice that the font is a bit muddier than you'd like. The problem is the font is muddier than you originally saw it, and it's all about font-weight. You see, the default font-weight for headings in browsers is "bold" (or more specifically, 700). You might fall prey to this if: You don't use a reset and didn't specify a font-weight for headings (defaults to user-agent style of bold).You use Normalize.css instead of a reset, which doesn't adjust the font-weight since bold is consistent cross-browser default.You explicity set font-weight to bold on headings (like you might if you use a reset). This isn't Google Web Fonts or the font itself's fault. So yeah.
HTML5 : Nouveaux éléments de section, article, header, footer, aside, nav Les éléments de section HTML5, une nouvelle façon de penser Les éléments de section (section, article, nav, aside, header, footer) segmentent des portions du document ou de l'application web, qui possèdent une valeur sémantique particulière ; contrairement à des éléments génériques comme span ou div qui ont un rôle totalement neutre, et ne servent qu'à regrouper d'autres éléments HTML pour leur affecter un style CSS commun, voire pour interagir avec eux via le DOM... Il ne s'agit donc pas de nouveaux éléments avec des noms génériques : c'est bien plus que ça ! HTML5 inclut la majorité des éléments HTML4 pour assurer une rétro-compatibilité avec les navigateurs. Par exemple, une majorité des sites contiennent des informations supplémentaires relatives ou non au contenu principal (que l'on nomme sidebar ou barre latérale). Liste récapitulative des éléments de section HTML5 Un cas particulier : Internet Explorer <9 Exemples de documents Exemple minimal L'en-tête <header> Le <footer> Remarque
Adobe-like Arrow Headers Adobe has some pretty cool header bars for modules on their site. The header bar is divided into left and right sections. The left being an explanatory title and the right being a related link. But let’s get super critical of how they did it. First of all, they use a non-sprited image to do it: That means an extra HTTP request just for the headers. We can do it with zero images! The markup for the header is just a title with a link inside: <div class="module"><h2>Community <a href="#">Blue</a></h2><! Here’s the basic setup of the header, with the link on the right with basic coloring, including the straight white line made by a border: Now the trick to getting the arrow within the line is just using CSS triangles applied via the ever-useful pseudo elements. One significant difference between ours and theirs is that they have a gradient that goes right through the triangle. View Demo Download Files
HTML5 Best Practices for Designers | Web Design HTML5 is sure to be a big hit this year as far as web design trends go, and rightfully so. It’s new, exciting, easy to understand and better than anything that has come before it. Up until recently, we have had to navigate a grey area in terms of compatibility and definition, and as a result, many of the early adoptions of HTML5 have been partial or complete disasters. The first thing to understand is where HTML5 ends and CSS3 begins. HTML5 is just the markup – a set of standards that define how a document should be structured and how browsers should interpret it. Learning as much as you can about HTML5 and following these basic practices will help you produce websites with high quality markup and improve your overall design and development process without running into the common pitfalls that have plagued the web for over a decade. 1. Another option is to use an HTML5 design application to build valid websites without worrying about coding it yourself. Resources: 2. 3. Resources 4. 5. 6.
Multiple Attribute Values Elements can have multiple class names. For instance: Then in CSS, you could match that element based on any one of them: .module { }.accordion { }.expand { } You can limit your selectors to match only if several of them are present, for example: // Will only match if element has both .accordion.expand { } But what about other attributes? Class names are unique in the ability outlined above. This element just has a data-type attribute with a value of "module accordion expand", not three unique values "module", "accordion" and "expand". We could do it by using a "*" substring matching attribute selector which will match if the provided string appears anywhere in the value: [data-type*="module"] { } or only match when multiple of specific "values" are present: [data-type*="accordion"][data-type*="expand"] { } Ever better, use the whitespace separated selector (e.g. [data-type~="accordion"][data-type~="expand"] { } View Demo Works in IE7+ (because IE 7 was first IE to support attribute selectors)
adobe/brackets (Better) Tabs with Round Out Borders The following is a guest post by Menno van Slooten. You might notice we've been down this road before, but I quite like Menno's approach here. The end result proves you can get a little fancier with the design than I originally did, with borders, gradients, and shadows and while actually using less elements. A good-looking tab control usually has one feature that I've always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. The markup <ul class="tabrow"><li>Lorem</li><li>Ipsum</li><li class="selected">Sit amet</li><li>Consectetur adipisicing</li></ul> This would be about as basic as you can get. Getting started To get started, let's get rid of the default <ul> and <li> styling and get these babies in line. LoremIpsumSit ametConsectetur adipisicing Selecting a tab The selected tab should of course be clearly visible. Getting to the bottom of things Every tab control needs a well-defined bottom edge. Above and beyond Around the bends Share On
Burst Title During the previews for a movie I saw recently, there was an advertisement for an Oprah-related something or another. I wasn't paying attention because I was trying to get out my phone so I could snap a picture of it. Which I failed to do. There was these neat title screens that I thought would be fun to recreate with CSS. Turns out you can do it rather semantically. <h1><a href="#">CSS-Tricks</a></h1> I listed out all the vendor prefixes here because using them is required in "real" usage and I worry about people copying and pasting pseudo code. I also added some animations to the demo just for fun. View Demo Download Files Share On postcard from Paris – css3 keyframes animations in use | PeHaa Blog postcard from Paris – css3 keyframes animations in use I decided to explore the area of css3 keyframes animations. The idea was simple – to create a sort of virtual postcard. I live in Paris so obviously I send you my greetings from Paris :). Click here or on the image to view the animation demo. The css3 animations are supported by : Chrome 2+, Safari 4+, Firefox 5+, iOS Safari 3.2+ and Android 2.1+ (source Smashing Magazine). The html structure is very simple : We will use the following images (I will discuss the sparkling effect a little bit later) Let’s start to complete the css stylesheet : Animating clouds To animate the three layers of clouds independently we use the following keyframes. This way we have defined the property of background-position for the beginning, middle and end of our animation. to associate the animations with the proper elements and to define the duration, timing-function and iteration count, respectively (I use the shorthand notation). Animating phare light