CSS3
Get flash to fully experience Pearltrees
Designing Modern Web Forms with HTML 5 and CSS3 » LegendThemes.com
Recently I noticed that many web developers are still using HTML tables to layout their forms. Mainly it is because people stick with what they know, and have never taken the time to learn a better way. Once you learn to layout forms with standards compliant CSS it is actually quite easy! We will be using HTML5 and CSS3 to achieve great style and functionality without causing problems in less capable browsers.
CSS Button
Ever since web pages came into being, designers have wanted to add more and more style into their creations, one of the most important being rounded corners. The HTML 5 spec makes it simpler than ever to create rounded corners, forgoing the need for images altogether and saving us from the horrors of funky CSS. One can now simply add the border-radius property to any element to achieve the same effect. Here we have a simple span with the following attributes:
The days of bland web pages with ugly text and layout are long gone, but the parts that make up a form have largely remained unchanged. Here, I am attempting to describe various methods that may be used to enhance the look of your input fields and form buttons. It is good practice to name your elements using the "id" property. Once this is done, you can add a "for" property to your label and anyone clicking on the label will have the cursor placed at the corresponding input space. Positioning
CSS input boxes and submit buttons | CSS button
Arranging images in a montage like fashion can be a challenging task when considering certain constraints, like the window size when using fullscreen, the right image number to fill all the available space or also the size of the images in use. With the following script you can automatically create a montage, either for a liquid container or a fixed size container (including fullscreen), with the option to fill all the gaps. View demo Download source
Automatic Image Montage with jQuery | Codrops
Create Attractive Web Typography with CSS3 and Lettering.js | webexpedition18
CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties the possibilities are becoming more and more diverse! In this tutorial, we’ll look at how to take basic markup and transform it into an attractive typographical design using only minimum images, pure CSS3 magic and we will spice things up with lettering.js – a jQuery plugin for radical Web Typography. To make things a bit interesting and less boring, instead of just using meaningless placeholder text I will use text from Jules Verne’s “Moon-Voyage” book , chapter X. The Observers of the Moon. So, let’s get started. Before we start any styling, we are going to need some HTML markup first.
The rays image should be a background image and it's probably best to set the element's dimensions. You can set an initial rotation value as well. The JavaScript The spinning rays effect works by using JavaScript to update browser-specific CSS3 animation properties. The first step is detecting the browser: I've chosen to use MooTools' Browser object to detect the browser. jQuery and other libraries provide a method by which to get the current browser.
Create Spinning Rays with CSS3 Animations & JavaScript
CSS3 Gradients and Patterns « CSS3 Wizardry
Works in Desktop Safari, Google Chrome, Firefox, iPhone, Android, iPad The ability to create CSS3 background gradients on any HTML element offers a lot of potential to create visually satisfying and engage experiences in the browser. But gradients are just about creating a 60s acid inspired rainbow of color. Because an HTML element can have multiple background images, you can do tricky things such as layering different gradients. If you use a background color and use rgba colors in your gradient stops, you can create some truly interesting effects.
Flexible Slide-to-top Accordion
She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
Lea Verou | Life at the bleeding edge (of web standards)
If you follow me on twitter or have heard one of my talks you’ll probably know I despise spaces for indentation with a passion. However, I’ve never gone into the details of my opinion on stage, and twitter isn’t really the right medium for advocacy. I always wanted to write a blog post about my take on this old debate, so here it is. Tabs take up less space Yes, this might be an insignificant difference after gzipping and a nonexistent one after minification. But it means you need these processes to keep your code size reasonable.
Submission guidelines If you have a new pattern to submit, please send a pull request . However, please bear in mind that I can't accept all submissions, sorry for that.
CSS3 Patterns Gallery
Stu Nicholls | CSSplay | Experiments with cascading style sheets | Doing it with Style
The above quote, taken from the W3C website, is one of the reasons for this site. Whilst I agree that it is a mechanism for adding style to web documents, I do not agree that it is a SIMPLE mechanism. It can be very complicated, as I found out when I took my first steps down this path.Prefix free: Break free from CSS vendor prefix hell!
-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.Nous avons parfois la fâcheuse habitude de penser que le Web n’est bon à être restitué que sur un écran d’ordinateur. Pourtant, un grand nombre de documents web et d’informations en ligne sont parfaitement adaptés au médium d’impression. Non seulement pour faciliter leur consultation, les transmettre, mais aussi pour les archiver. Pour vous faciliter la tâche et ne plus la négliger, je vous propose une feuille de style dédiée à l'impression qui condense bonnes pratiques et astuces. Ces règles peuvent être externalisées dans un fichier CSS séparé, ou incluses directement au sein du document de styles global, déclarées à l’aide de la règle-at @media print {...} .
Une feuille de styles de base pour le media print - Alsacreations
Responsive web design
6.1 Couleurs RGB En plus de quelques noms prédéfinis ( red , blue , green , yellow , etc.) les couleurs informatiques sont définies par leur décomposition en 3 couleurs primaires qui sont rouge ( R ed), vert ( G reen) et bleu ( B lue) : c'est le système RGB . Toute couleur est alors définie par 3 nombres (entre 0 et 255 1 qui définissent chacun la quantité de la couleur primaire correspondante qui doit intervenir. À chaque fois que vous utilisez le nom d'une couleur ( red , blue , green , yellow , etc.), vous pouvez aussi utiliser un code RBG ( #FF0000 , #00FF00 , #0000FF , #800000 , #008000 , #000080 , #000000 , #808080 , #A0FF20 ). La base 16 utilise en plus de nos 10 chiffres (0, 1, 2, 3, ... , 8, 9) les chiffres A, B, C, D, E et F qui représentent respectivement les valeurs 10, 11, 12, 13, 14 et 15. Notre système de calcul habituel est en base 10.