CSS3
Get flash to fully experience Pearltrees
Forms inputs and their labels – oh the tensions. A common problem for laying out a labels and their inputs is that the labels dangle out in what appears to be whitespace. Form labels can make a design aesthetically awkward. There are several paths to solving this, but here I will follow the path of placing the label inside the text input element.
Compact Labels / Mojebus
Nous venons de voir comment créer des pages HTML qui ne contiennent que le contenu . Ce n'est pas très beau, et c'est normal : nous allons maintenant aborder le CSS, le format qui vous permettra de définir la forme . Mais avant de jouer avec, nous devons d'abord voir comment se forme le CSS : c'est la partie théorique.
Le CSS - Tutoriel HTML & CSS
Peculiar
Endless possibilities are coming with these type of icons. Sizes are not limited to 16² pixels, but they go up to 1024² pixels and from there to ∞. They are semantically coded, each shape can be customized to different color. Web designers can now use these icons to create layouts skipping the Photoshop in the process and web developers can speed up their web applications tremendously.
Taking advantage of the new capabilities of HTML5 and CSS3 can mean sacrificing control over the experience in older browsers. Modernizr 2 is your starting point for making the best websites and applications that work exactly right no matter what browser or device your visitors use. Thanks to the new Media Query tests and built-in YepNope.js micro-library as Modernizr.load() , you can now combine feature detection with media queries and conditional resource loading. That gives you the power and flexibility to optimize for every circumstance.
Modernizr
CSS - Contents and compatibility
IE 8-10 (and maybe older ones, too) have a slight bug: clicking the mouse down on a nested element does not trigger :active . Try it in the test page by depressing the mouse button on one of the code examples. The :active styles do not kick in. IE doesn’t react to the Back and Forward buttons: the element doesn’t apply or remove the pseudo-class at all. This used to be an Opera problem, while IE used to get it right.
CSS Float Theory: Things You Should Know - Smashing Coding
The concept of floats is probably one of the most unintuitive concepts in CSS. Floats are often misunderstood and blamed for floating all the context around it, causing readability and usability problems. However, the reason for these problems isn’t the theory itself, but the way the theory is interpreted – by developers and browsers.
Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop’s Blending options. But now, since CSS3 “hit the charts”, you don’t need Adobe’s design tool to add a drop shadow or an inner shadow to a box. The box-shadow property allows you to add multiple shadows (outer or inner) on box elements. To do that you must specify values as: color, size, blur and offset. Now let’s see how can you take advantage of this wonderful CSS3 feature. Below I’ll show you how to enhance your designs with the coolest box-shadow techniques!
How to create slick effects with CSS3 box-shadow – Red Team Design
Sexy CSS3 menu – Red Team Design
One of the most common elements when talking about a website or an application design is definitely the menu navigation. No matter if vertical or horizontal, simple or complex, a menu is essential and it has to look that way. If you are a web developer you may have heard of tools called CSS pre-processors.although previous versions of HTML defined the hr element only in presentational terms, the element has now been given the specific semantic purpose of representing a paragraph-level thematic break. I've been trying to put together a personal site for months now. Actually, probably closer to a year. I just keep changing my mind so much, that I'm not getting anywhere.
gradient-hr
CSS3 Gradient Generator
background-image: linear-gradient(bottom, rgb(237,223,51) 5%, rgb(255,255,77) 53%, rgb(255,255,108) 77%); background-image: -o-linear-gradient(bottom, rgb(237,223,51) 5%, rgb(255,255,77) 53%, rgb(255,255,108) 77%); background-image: -moz-linear-gradient(bottom, rgb(237,223,51) 5%, rgb(255,255,77) 53%, rgb(255,255,108) 77%); background-image: -webkit-linear-gradient(bottom, rgb(237,223,51) 5%, rgb(255,255,77) 53%, rgb(255,255,108) 77%); background-image: -ms-linear-gradient(bottom, rgb(237,223,51) 5%, rgb(255,255,77) 53%, rgb(255,255,108) 77%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.05, rgb(237,223,51)), color-stop(0.53, rgb(255,255,77)), color-stop(0.77, rgb(255,255,108)) );
C’est parti ! La version CS6 est disponible en beta sur le site d’Adobe. Uniquement en anglais mais c’est dejà ça. Un bon moyen de se faire la main sur la nouvelle interface de Photoshop.