CSS3
Get flash to fully experience Pearltrees
TUTORIALS
35 Impressive CSS Menu and Navigation Collection That You Can Use
When creating a website, one of the things that you must take into consideration is the CSS menu and navigation. In order for you to have a nice-looking menu in CSS, there’s a need for some coding and surely here some user interface design tutorials can help. Designing and coding from scratch however can be expensive and time-consuming and to address this, you have the option to use some of the CSS menu and navigation scripts created by professional web designers.background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
Ultimate CSS Gradient Generator - ColorZilla.com
Browser support The patterns themselves should work on Firefox 3.6+ , Chrome , Safari 5.1 , Opera 11.10+ and IE10+ . However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients).
CSS3 Patterns Gallery
Home / CSS3 Previews / Background-size Another new property introduced by the CSS3 Backgrounds and Borders module is background-size . The property adds new functionality to CSS allowing designers to specify the size of background images using either lengths, percentages, or by using one of two keywords; contain or cover . Browser support has grown of late, with the current versions of most popular browsers now supporting background-size , including Firefox, Safari, Chrome, Internet Explorer and Opera, without the need for vendor prefixes.
Background-size
Abstract CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. This draft contains the features of CSS level 3 relating to borders and backgrounds. It includes and extends the functionality of CSS level 2 [CSS21] , which builds on CSS level 1 [CSS1] . The main extensions compared to level 2 are borders consisting of images, boxes with multiple backgrounds, boxes with rounded corners and boxes with shadows.
CSS Backgrounds and Borders Module Level 3
Media Queries
Abstract HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types . For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘ screen ’ and ‘ print ’ are two media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features . Among the media features that can be used in media queries are ‘ width ’, ‘ height ’, and ‘ color ’.
This is a guest post by Markus Stange. Markus usually works on the Firefox Mac theme implementation, but this time he went on a small side trip through the Gecko layout engine in order to implement -moz-element . In Firefox Beta 4 we’re introducing a new extension to the CSS background-image property: the ability to draw arbitrary elements as backgrounds using -moz-element(#elementID) . A -moz-element() image works just like a normal url() image. That means it’s subject to all the familiar background properties like background-position , background-repeat , and even background-size . Using background-size you can create a thumbnail of the referenced element, for example:
Firefox 4: Drawing arbitrary elements as backgrounds with -moz-element
CSS3: Come implementare alcuni moduli anche su Internet Explorer?
Nello scorso articolo abbiamo avuto modo di approfondire un modulo CSS avanzato come il @font-face che, tra le varie caratteristiche positive, aveva soprattutto la piena compatibilità con Internet Explorer . @font-face però è un modulo del CSS 2.1. Come si comporta Internet Explorer con i CSS3 ?