Styling Scrollable Areas - CSS-Tricks
The scrollbars on browser windows are not styled by the website itself, or even generally by the browser. They come from the operating system itself. The desire to customize the style of these scrollbars is strong. When you are starting out, it feels like something you should be able to do with CSS. Complicating the issue, if you search around for CSS to change/customize scrollbars, you'll probably find it. The problem is that in IE 5.5, there was proprietary browser extensions to change the look of your scrollbars with attributes like "scrollbar-face-color". There are situations though, where you will strongly wish you had control over the look of a scrollbar. Fortunately, we can harness the amazing powers of JavaScript to solve this problem and give us complete design control over our scrollbars again. To make things easier on ourselves, we'll use an already-existing jQuery plugin: jScrollPane. View Demo Download Files Tested and it working in Fx3, Safari 4, IE 6. Step 1: The Markup
Conditional-CSS
40+ CSS Generators, Creators, and Makers : Web Design Resources
CSS Gradient Text Effect
Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how. View Demos Download Demo ZIP Benefits This is pure CSS trick, no Javascript or Flash. How does this work? The trick is very simple. The HTML markups <h1><span></span>CSS Gradient Text</h1> The CSS That's it! Make it work on IE6 Since IE6 doesn't render PNG-24 properly, the following hack is required in order to display the transparent PNG (add anywhere in between the <head> tag): This is why we hate IE 6! jQuery prepend version (for semantic lovers) More samples Want to make Web 2.0 glossy text? Pattern / Texture
CSS Text Wrapper
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede. Donec iaculis, purus at porta tristique, pede nisi rhoncus pede, non nonummy augue nunc in tortor. Nunc gravida, nisl ac tempor rutrum, risus odio pharetra eros, eu feugiat diam nisi sit amet sem. Suspendisse rhoncus dolor ac magna.
Css Globe | Web Standards Magazine
9 CSS Ethics Every Designer Should Have
Nov 10 2007 No need to get any more complicated structure than you need to. Writing a CSS Stylesheet That is Easy to Maintain is really easy, just by following these 9 rules. How deeply you organize your CSS can greatly hinder any necessary tweaks that arise in the future. 1) Indent descendant and related rules: This allows you to easily recognize page structure within your CSS and how sections related to each other. 2)Grouping and commenting your CSS rules Setup certain sections in your CSS files that always exists: page structure, links, header, footer, lists, etc. /* Header Styles Go Here **************/ ...CSS Code Goes Here…/* End Header Styles *************/Header StructureNavigationFormsLinksHeadersContentListsCommon Classes And a sample separator that is most easily noticeable /* -----------------------------------*/ /* >>>>>>>>>>>>> Menu<<<<<<<<<<<<<<<<-*/ /* -----------------------------------*/ 3) Keep style type on single line Instead of this: Do this: 4)Break your CSS into sheets
Welcome to Tablecloth
Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love :) Try to mouseover or click on a table below. Overview Tables are often misused by non-standards savvy developers and have become a subject of arguments between table layout coders and standardistas. Features Tablecloth takes bare, well formed table and applies styling and behaviour to it. Adding even/odd class names to alternative rows. Usage To use Tablecloth you will need a well formed table. <table cellspacing="0" cellpadding="0"><tr><th>Title</th><th>Title</th><th>Title</th><th>Title</th></tr><tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr></table> and you are ready to rock. Modifications Examples Table with top headings
Dynamic Drive CSS Library- Glowing Tabs Menu
Responsive Iconic Menu Author: Dynamic Drive This sleek horizontal menu bar stays tucked away until the user clicks on an icon, revealing the menu. Using CSS3, various parts of the menu are animated, from the menu unveil to the icon flip when clicked on. Pizzazz aside, at its core this is a menu that's highly responsive to various devices and screen sizes. The menu intelligently switches between the standard menu bar, a slightly truncated menu, to a drop down menu based on the user's available screen real estate. Demo: (Click on icon below to reveal menu) To better see the responsive nature of the menu in action, click here and try resizing your browser window. The CSS: Near the end of the style sheet is where you'll find the CSS media query portion of the code that dictate the responsive settings of the menu: By default two break points are defined- one when the user's viewable screen size is 580px or less, and the other, 560px. Code Info Rate this code: Date Posted: 04/02/2014
CSS Tinderbox
WordPress Tinder A small collection of very simple WordPress template frames that can be easily customized and adpated to suit your needs. They’re built for WordPress 3.8 or later and set up to use widgets in multiple locations. CSST Simple Orange Another three column design but with the “heavy” column to the left and the other two narrow columns on the right. Screenshot / Download Zip CSST Simple Red To be totally honest, this one looks a hell of a lot like Simple Orange but with a cherry flavor though. Screenshot / Download Zip Installing A Template To install one of these WordPress templates: 1. 2. 3. As with any WordPress template, you’ll more than likely need to adjust the styles a bit to mesh with your current settings. (NOTE: Web geek tested and approved in Firefox 3.0 (Win), Firefox 2.0 (Mac), IE7 (Win), Opera 9.6 (Win), Safari 3.2 (Mac). Fixed-Width Templates Centered Box 1-Column 1-Column (2) 3-Over-4 Columns Do you want to display a fistfull of content all on the same page? 3-Column
