CSS3 Gradient Buttons Last week I talked about Cross-Browser CSS Gradient. Today I'm going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). What Is So Cool About These Buttons? Pure CSS: no image or Javascript is used. Preview The image below shows how the button will display in different browsers. Button States normal state = gradient with border and shadow styles. hover = darker gradient active = gradient is reversed, 1px down, and darker font color as well. General Styles For The Button The following code is the general styles for the .button class. For more details on border-radius, text-shadow, and box-shadow, read my article The Basics of CSS3. Color Gradient Styles The code below is the CSS styling for the orange button. For more details on CSS gradient, read my article Cross-Browser CSS Gradient. How To Use My Buttons?
CSS UL LI - Horizontal CSS Menu Second Picture is devoted to original tutorials about 3D graphics, Photoshop, Photography and Web Design. 31.10.2008 Category: Web Design In this tutorial we're going to create a professional horizontal CSS menu. First we are going to create a HTML list by using Unordered List (ul) and List Item (li) elements. Then we are going to style the list with CSS (Cascading Style Sheets) into the form of a horizontal navigation menu like in Picture 1. Picture 1. Previous knowledge about some basic HTML and CSS is required. ul (Unordered List) li (List Item) a (Anchor / Link) This is a CSS tutorial so I'm not going to go through the creation of the graphics used in this tutorial. HTML List (ul li) With Links Let's start by creating a list with links in HTML: <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> Picture 2. UL CSS Styling First I change the background color to black.
css Zen Garden: The Beauty in CSS Design Dynamic Page / Replacing Content By Chris Coyier On This article is an update to this old article, which had an ugly demo and a variety of techniques in it no longer probably considered good practices. This new demo is much cleaner, up to date, and fuller featured. Because the old article was a bit of a different scope, I'll leave it alone, just refer to this one. Update January 2013: There are better practices now, detailed here. Let's say you wanted to make a website where clicking buttons in the nav would dynamically load some content. View Demo Download Files #The HTML: It all works without JavaScript There is no excuse for the navigation of a website to be completely broken without JavaScript enabled. The navigation links to the files that contain that content, and are fully formed functional pages on their own. <nav><ul><li><a href="index.php">Home</a></li><li><a href="about.php">About</a></li><li><a href="contact.php">Contact</a></li></ul></nav> #jQuery JavaScript The JavaScript is the fun part here! #Prereq #Code Dump
How to design a sexy header for your site using CSS Yesterday I received a lot of positive messages about the new template of my site. Expecially for the new header (in particular the green bar on top of the page). Some of my readers asked to me to dedicate a post about how to realize a similar "graphic composition", so I decided to publish a post with the "process" I use in general to design graphical sections for my web sites.First approach: be simple. The most important rule is: be simple. - Logo layer - Navigation bar - Green site introduction section Each element has a fixed width but how navigation bar and site introduction section fit the page size. Another solution to avoid container layers is applying a background picture to the <body> section using css, but I prefer working with pure layer instead of images to have more control on the design. Design the header with Photoshop A good practice is trying to design first your header in Photoshop to have an idea about how it will look. ... and CSS code is: It's all!
Slide Down Box Menu with jQuery and CSS3 In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left […] View demoDownload source In this tutorial we will create a unique sliding box navigation. We will be using the jQuery Easing Plugin and some beautiful photos by tibchris. The Markup For the HTML structure we will be using an unordered list where each menu item will contain the main link item and a div element for the submenu: <ul id="sdt_menu" class="sdt_menu"><li><a href="#"><img src="images/1.jpg" alt=""/><span class="sdt_active"></span><span class="sdt_wrap"><span class="sdt_link">Portfolio</span><span class="sdt_descr">My work</span></span></a><div class="sdt_box"><a href="#">Websites</a><a href="#">Illustrations</a><a href="#">Photography</a></div></li> ... If there is no submenu, the div can simply be left out. The CSS
CSS gradients for all web browsers, without using images One thing that is quite nice is that we now have the ability to create gradients in our pages just from CSS code, and without the use of any images. Syntax options and web browser support The good news is that there is web browser support for CSS gradients in Firefox, Safari, Google Chrome and Internet Explorer (Opera will most likely add it soon too). The bad news is that, for a couple of reasons, the implementation in each web browser is different from the other. In IE’s case, it’s because it’s based on their ancient approach that stems form IE 5.5. For WebKit-based web browsers (like Safari and Google Chrome), they were the first ones to suggest it, based on the approach for canvas, but this was later changed by the CSS WG, and the new syntax is now the one implemented in Firefox (and I guess this syntax will later make into WebKit-based web browsers as well). So, as of now, we have have CSS gradients support for: Firefox 3.6Safari 4Google ChromeIntenet Explorer 5.5 Examples 01. 02. 13.
CSS Sprites2 - It’s JavaScript Time A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites. Flash interfaces have always seemed more alive—responding to the user’s interactions in a dynamic way that standards-based web sites haven’t been able to replicate. Lately that’s been changing, of course, with a resurgence in dynamic interface effects, helped along by JavaScript libraries that make it easy—libraries such as Prototype, Scriptaculous, Moo, YUI, MochiKit (and I could go on). It’s high time to revisit the CSS Sprites technique from four years ago, and see if we can’t interject a little bit of movement of our own. The examples below demonstrate inline CSS Sprites2, the technique we’ll be covering in this article: Enter the jQuery#section1 We must note the non-trivial extra kilobytes that the library will add to your initial page loads. As for other JavaScript libraries? Basic HTML and CSS setup#section2 So far so good. Example 1: Basic CSS Sprites setup. The theory#section5
Ten CSS tricks you may not know 1. CSS font shorthand rule When styling fonts with CSS you may be doing this: font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif There's no need though as you can use this CSS shorthand property: font: bold italic small-caps 1em/1.5em verdana,sans-serif Much better! 2. Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. <p class="text side">... Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. 3. When writing a border rule you'll usually specify the color, width and style (in any order). If you were to write just border: solid then the defaults for that border will be used. 4. Lots of web pages have a link to a print-friendly version. So, your page header should contains links to two CSS documents, one for the screen, and one for printing: 5. <h1>Buy widgets</h1>
How to Code an Overlapping Tabbed Main Menu | Codepal Main navigation menu is that part of a website design that makes the whole site look lively and complete. But the most common type of navigation menu style still being used a lot is the tabbed navigation menu. Here is a tutorial on how to code an overlapping tabbed menu. There are various styles and techniques of creating a tabbed navigation menu and one of them is the tabbed overlaying or overlapped style in which each tab appears to be lying over the other and hence giving the whole menu a very realistic feel. While designing my site, I went through lots of inspirations and tutorials. One of them was this tutorial called Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it! ” Now if I do say so myself these tabs look awesome, and the reason they do is because they overlap. So I tried coding one into html and after I succeeding thought of sharing it with you all. Step 1.Gearing Up Step 2. Align the tabs vertically using grids as shown in the image above. Step 3.