background preloader

Elegant Dark CSS3 Menu Template

Elegant Dark CSS3 Menu Template
Elegant Dark CSS3 Menu Template For troubleshooting, feature requests, and general help, contact Customer Support at . Make sure to include details on your browser, operating system, CSS3 Menu version, link to your page. E-mail: What's New CSS3 Menu v3.1 (Jul 3, 2012) Read more CSS3 Menu v2.3 (Feb 2, 2012) CSS3 Menu v2.2 (Dec 14, 2011) Features CSS3 Animation Menu , CSS3 Transition Menu , Mega Drop Down Menu , CSS Menu Examples , CSS3 Buttons Generator , CSS3 Menu Bar , Web Menu , HTML Drop Down Menu , CSS Drop Down Menu , Free Drop Down Menu Recent Templates See live.. See live.. See live.. See live.. See live.. See live.. See live.. See live.. See live demo.. See live demo.. See live demo.. See live demo.. See demo.. See demo.. See live demo.. css3 text inner shadow Related:  html/css

70 Must-Have CSS3 and HTML5 Tutorials and Resources CSS3 and HTML 5 are capable of revolutionizing the way we design websites. Both include so many new features and functions that it can be hard to wrap your head around them at times. The inclusion of native support for things like rounded corners and multi-column layouts are just the tip of the ice berg. Below are seventy resources, tutorials, and articles to get you started with CSS3 and HTML 5. Many of the techniques discussed are already supported to some extent in some some modern web browsers (Safari and Firefox have the most extensive support), so you can get started right away. CSS3 Tutorials and Resources Get Started with CSS 3 – A basic guide to using CSS3. Cascading Style Sheets Current Work – Details the progress the W3C is making on the CSS3 standard. Border-image: Using Images for Your Border – A guide to the new CSS3 function for adding image borders. Overview of CSS3 Structural Pseudo-Classes – A handy reference chart of structural pseudo-classes in CSS3. HTML 5 Resources

A brief introduction to Opacity and RGBA The Opacity declaration sets how opaque an element is. An opacity value of 1 means the element is fully opaque; an opacity value of 0 means an element is not at all opaque, i.e. fully transparent. Webkit, Gecko and Opera browsers all support Opacity. The RGBA declaration allows you to set opacity (via the Alpha channel) as part of the color value. This is supported in Webkit and the first alpha of Firefox 3. The key difference between the two declarations is this: Opacity sets the opacity value for an element and all of its children; RGBA sets the opacity value only for a single declaration. Here’s an example. background-color: rgb(0,0,255); opacity: 0.5; The background color of the second div has been set to blue, and the opacity set to half. background-color: rgba(0,0,255,0.5); The background color has been set to blue, and the opacity set to half.

How To Create 3D Text using CSS3 I am very happy to see, CSS3 finally eliminates the use of Photoshop in terms of giving text shadows. I was just trying my hands on text shadows in CSS3 and thought of creating 3D text by giving multiple shadows and got something wonderful. Earlier Text Shadows were announced since the beginning of CSS2 however, the only browser that was supporting this functionality was Safari. If you talk about today’s condition, almost all the browsers except Internet Explorer are running Text Shadows successfully. I agree that we would not be able to use these shadows for clients for next few years because of cross browser compatibility however these features can help you push the boundaries of modern Web Technology today. We do have certain jQuery plug-ins available like IE CSS Shadow that can create shadowed text completely compatible with Internet Explorer. Let’s learn how we create 3D text using CSS3. HTML code written below will land up in between the body tag. Let’s Download and Tweak with it.

RGBA colors Home / CSS3 Previews / RGBA colors CSS3 has added a new feature to color setting. Next to rgb you can now also use rgba. The “a” in this property-name stands, for, you guessed it: alpha. So far, this has only been implemented in Safari 3, and works in the latest Firefox 3 pre-alpha’s. See the example: See the difference in the code between the first row, which uses RGBA color values, and the second, which uses RGB values: And the second one: Read here how RGBA differs from opacity.

Great Tools, Resources and Guides for HTML5 and CSS3 It is very important for web designers to update and upgrade their website from time to time to boost the effectiveness of their site and most especially to protect their business from destructive attacks done by hackers. With the development of HTML5 and CSS3 technologies, web designers and web developers are now able to improve their websites effectively and easily as these tools bring many new syntactical features. HTML5 is a better version of HTML4 that is helpful in building websites. It includes features like separate background threads to do processing, video implantation without separate plug-in or codec, canvas element to present graphics and images on the fly, can have applications to access email offline, etc. CSS3 is the latest style sheet format used for adding style to web pages in different markup languages. Here is our list of Great Tools, Resources and Guides for HTML5 and CSS3 that can help you master the new features of these new technologies. font_dragr Modernizr

40 + Générateurs de CSS De temps en temps on vous parle de générateur de css. Pour alléger un site, optimiser son code ou créer quelques éléments graphiques, les générateurs ne manquent pas. Web3mantra liste donc 40 outils de développement css pour vous faciliter la tâche. La liste est assez grande et finalement quelques services se répètent. Vous aurez donc la possibilité de choisir celui avec lequel vous vous sentez le plus à l’aise et que vous trouvez le plus efficace, approprié à vos besoins. On y trouve surtout: des générateurs de « grilles », des services d’optimisation de css et des générateurs de blocs et d’éléments (tels que les bords arrondis ou les dégradés). On espère en tout cas que cette liste vous sera utile ! - Parcourir la liste

Créer un menu à onglets avec CSS Introduction Propos Je vais montrer comment utiliser le langage des feuilles de style en cascade (CSS) pour créer un menu à onglets. La technique utilisée n'a rien de nouveau, mais elle sera l'occasion d'aborder plusieurs sujets rarement traités en un même endroit. Tout au long de mon exposé, je ferai référence à des considérations méthodologiques, notamment sur les principes de développement, les outils de validation et les raccourcis d'écriture CSS. Les plus pressés peuvent aller directement au fichier HTML complet, ainsi qu'aux feuilles de style « normal.css », « ie.css » et « ie6.css ». Explication du projet Le menu doit ressembler à ce qui suit : Ce menu doit également répondre aux exigences suivantes : Bref, le résultat doit être valide, accessible, multi-navigateur et indépendant de CSS, de JavaScript ou d'un outil de pointage particulier. Matériel et préparation Pour réaliser ce projet, j'aurai besoin des trois images suivantes : Vous pouvez choisir de faire autrement. Retourner au plan

Containing Floats (Complex Spiral Consulting) As powerful and useful as they are, floats can make for tricky layout tools. Chances are that you may have seen something like the situation shown in Figure 1, which is accomplished with just two div elements, each with a floated image inside it. Figure 1. That's not right! This is probably not what the author had in mind, but given the styles used, it's the correct layout. That's all it takes. This is not a bug. Understanding the Problem So when in the name of all that's good and right would authors want floats to stick out of their containing elements? Figure 2. <p> ...text... The practice of flowing text around an image goes back a long, long time. Figure 3. So now we can see why it's important that floats stick out of their containing elements. Figure 4. That's something designers would never have accepted. A Clear Solution If floats are to be used in creating non-table layouts, then there needs to be a way to make their containing elements stretch around them. Figure 5. Figure 6.

blockquote (HTML element) Description The blockquote element is a mechanism for marking up a block of text quoted from a person or another document or source. It may be just a few lines, or it may contain several paragraphs (which you’d mark up using nested p elements). The W3C recommendation states that web page authors should not type quotation marks in the text when they’re using blockquote—we can leave it to the style sheets to take care of this element of presentation (just as it should be when the q element is used for short, inline quotations). By default, most browsers’ basic built-in style sheets render blockquote content with left and right indentations, as shown in Figure 1. Note that XHTML allows the blockquote element to contain only other block-level elements (script element is also allowed). Figure 1. Example The example below is a quote from an as yet unidentified source who despairs about the stupidity of stock photography: Use This For … Compatibility

Tips to Write Better CSS Code CSS is a language that is not difficult to master, but if you use it for a large project, it can be very difficult to manage if you do not follow a defined approach while writing CSS code. Here are few tips that will help you write better and easy to manage CSS code. 1. Don’t Use Global Reset Using global reset to remove default margin and padding from all HTML elements is a strict no-no. Not only it is slow and inefficient way but you’ll have to define margin and padding for each element that needs it. Better 2. Though CSS hacks might be useful to maintain consistent look of the website over older browsers like IE6, but they can be problematic for newer versions of IE as newer versions like IE8 do support CSS standards to a good level and using hacks might break out the layout. For information on conditional comments, refer to the quirksmode article on CSS Conditional Comments 3. 4. 5. You can combine multiple CSS selectors into one if they have common style definitions. Not Good 6. 7. 8.

Related: