101 CSS Techniques Of All Time- Part2
101 CSS Techniques Of All Time- Part2
Part 2 of our 101 CSS Techniques series takes a look at more handy css techniques that you can incorporate into your web designs. If you haven’t read Part I yet, you should read it here. Block Hover Effect Links How to Create a Block Hover Effect for a List of Links- Learn how to […]
Part 2 of our 101 CSS Techniques series takes a look at more handy css techniques that you can incorporate into your web designs. If you haven’t read Part I yet, you should read it here.
Block Hover Effect Links
- How to Create a Block Hover Effect for a List of Links- Learn how to create hover effect when you mouse over the list items to see the block hover effect in the demo here.
- How To Make Clickable Areas Bigger - One basic principle of interaction design is that the larger the link you’re trying to click on, the easier it is to click it. With this in mind, if you are using text-based links (for example in a navigation bar), the actual ‘clickable’ area should be as large as possible.
- Anchor tags for block elements- You can see a demo here.
Style an A to Z Index
- Anchor tags for block elements- Creating an A to Z index along the same lines that doesn’t break when you resize your text. You can see a demo here.
Typography Techniques
- CSS StyleFun- How to achieve various effects using css, including typography (kerning, drop caps, big 1st letter), styled block-quotes, hover opacity… nice tutorial because it gives sample code/style sheets for each thing.
- CSS Fonts, CSS Typography- Included are tutorials on how to size fonts with CSS, such as using CSS relative units, such as font size keywords, em, or % (percentage) units, along with cross-browser, cross-platform CSS font considerations.
CSS Pagination
Pagination is a mechanism which provides users with additional navigation options for browsing through single parts of the given article. Can be referred to by numbers, hints, arrows as well as “previous” and “next”-buttons.
- CSS Pagination Links- Inspired by the pagination interface you see at the footer of Digg.com.
- Pagination 101- Pagination 101, that will give you some clues as to what makes good pagination.
- Some styles for your pagination- Styles for WP-Digg style pagination plugin, Digg Style pagination Class, the modular version, and the original programed bye strangerstudios.
CSS Tabs
Tabs-based interfaces allow multiple documents to be contained within a single window and tabs can be used to navigate between them. Using CSS, information is loaded instantly with Ajax-based techniques. Some of the most interesting techniques we’ve found in the Web are listed below.
- Glowing Tabs Menu- uses a background image that accentuates the outline of the tabs. And to jazz it up, the selected tab “glows”, by using the “Sliding Doors” technique to shift the original background image upwards to reveal the glowing version of the tab design. An exquisite yet professional looking horizontal menu.
- DOMTab- is a unobtrusive JavaScript CSS navigation tabs that turns a list of links connected to content sections into a tab interface.
- Control.Tabs- Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute.
- Tabifier- Automatically create an HTML tab interface using plug-and-play JavaScript.
CSS Pullquotes
Pull quotes are commonly used in print publications to draw emphasis to a particular quote or excerpt from a document. They are quite common in magazines and newspapers and are usually short extracts from the article.
- Simple CSS Blockquotes and Pullquotes- Blogsolid shows us how to get some sweet blockquotes and saucy pullquotes?
- Automatic pullquotes- Using JavaScript based technique to add pullquotes without having to duplicate text in the markup.
- CSS Pull Quotes- In this tutorial you will place the pullquote text in the title attribute of a paragraph or page division, and use the :before pseudo element’s ability to generate content to display the pullquote on the page.
CSS Blockquote
A blockquote is used when quoting text from another source, usually another blog or website. Blockquotes are intended to accommodate a larger amount of text, so as a rule of thumb, use blockquotes when you are quoting more than one or two sentences.
- Quotations and citations: quoting text- When quoting text in HTML, there are several ways of marking up the quoted text. Which way you choose depends on what you’re quoting, how you’re quoting it, and how important it is for you that all browsers render the quotations the same way.
- Swooshy Curly Quotes Without Images
- Styling Blockquotes with CSS
- Blockquotes with Image
Star Rater Techniques
- CSS Star Rating Part Redux- Shows example of how to setup a star rating system using CSS.
- CSS Ratings Selector- Using a list item to create a star rater.
- Starbox: Rate like a star- Allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework. For some extra effects you can add Scriptaculous as well.
- Unobtrusive AJAX Star Rating Bar
CSS Image Pop-Up
- Cool CSS Image Pop-up- This is an Pop-UP image effect that is similar to the ones you see using JavaScript on mouseover or on click but THIS ONE uses ONLY CSS!
- CSS Popup Image Viewer- With the help of CSS’s “:hover” pseudo class, combined with relative and absolute positioning, the enlarged images are simply included on the page as normal HTML, “popping” up on demand.
- Pop-up images on inline links- When you hover over the link the image is then given its correct size and it pops-up, in this case beneath the link, but you can place it anywhere you like relative to the link.
- Hoverbox Image Gallery- A super light-weight (8kb) roll-over photo gallery that uses nothing but CSS. View Example.
CSS Sitemaps
- Hierarchical Sitemap with Dashed Lines- This tutorial will use a nested unordered list with two levels to create a hierarchical structure where dashed lines will show the dependencies. This could be used as a sitemap or to visualize a directory. A demo can be found here.
- Sitemap Styler: Style your Sitemaps with CSS and Javascript- is a little CSS/JavaScript piece of code that can be easily applied to your sitemap list. All you have to do is include couple lines of code.A demo can be found here.
- Spruced-Up Site Maps- A nested set of clean, streamlined, semantic unordered lists.
- Sitemap Celebration
- CSS SiteMap
Horizontal and Vertical Centering
- Vertical Centering with CSS
- Horizontal and Vertical Centering with CSS
- Horizontal And Vertical Centering
- How to: vertical centering with CSS
Colorful Future For WP 2.5 Admin
This past week of WordPress 2.5 developments saw the addition of changeable color schemes to the 2.5 admin interface. Ryan started us off by announcing that WordPress 2.5 will feature two different color schemes. One color scheme will be called Classic while the other will be Fresh. Fresh will feature the newly redesigned color scheme while […]
This past week of WordPress 2.5 developments saw the addition of changeable color schemes to the 2.5 admin interface.
Ryan started us off by announcing that WordPress 2.5 will feature two different color schemes. One color scheme will be called Classic while the other will be Fresh. Fresh will feature the newly redesigned color scheme while Classic will contain darker shades of blue and gray. Now, the only decision is whether to have Classic or Fresh be the default color scheme. So far, it looks like Fresh is winning the race.
If that were not enough, I asked Ryan if this would allow end users to upload style sheets that are created by members of the community into the back end which could then be selected to change the color scheme. Ryan simply answered with “New color schemes can be added as plugins”. For those that need a visual aid, Ozh has published a post which explains how to add a custom stylesheet via a plugin.
And as an added bonus, I think I’ll throw in the fact that the first full fledged WordPress 2.5 administration theme has been released called Fluency. Fluency features a smooth gray color scheme with the main menus displayed in a vertical column on the left hand side of the site and sub menus appearing horizontally across the top.
This theme does have a few rendering issues. For instance, if you are using FireFox and you have too many entries in the second tier navigation menu, the menu will overlap with the header of the subpage. Also keep in mind that not all plugins will look normal within this theme as was the case with WP-PostRatings. Some plugin Option pages will look incorrect but Dean acknowledges that additional plugin option page support will be added as necessary.
You can change the look and feel of the WordPress 2.5 back end yourself or you can use one of the community produced themes and style sheets to make it look just the way you like. 2.5 is starting to come together and I can hardly wait!
Learn From The Best: The SitePoint Gurus
One challenge we face with having an enormous online archive of articles (over 1,400 at last count) is that finding information can be difficult — especially if you’re just beginning your journey in learning about web design. For example, we have 35 articles on the topic of CSS alone — it can be confusing for […]
One challenge we face with having an enormous online archive of articles (over 1,400 at last count) is that finding information can be difficult — especially if you’re just beginning your journey in learning about web design.
For example, we have 35 articles on the topic of CSS alone — it can be confusing for beginners to know which article to read first.
As I’ve discussed previously, we’re aware of a number of improvements that can be made with regard to article navigation, and there are plenty of changes in the pipeline. The first of these is the SitePoint Guru Lists.
Every year the SitePoint Community Awards recognize those members of the SitePoint Forums who have made an exceptional contribution in helping others in their chosen field of expertise. I approached last year’s award winners and asked them to create a list of their favourite SitePoint articles for the category in which they were recognized. The result is an awesome collection of articles that have been hand-picked by experts.
The articles are listed in the order that they should be read, so if you’re tackling a topic for the first time, the first article in each list makes minimal assumptions about your knowledge of that topic. You might have noticed these lists also appearing in the left sidebar of an article or blog post — hopefully they’ll catch the eye of visitors who might have arrived from a search engine and are looking for a place to start.
A huge thankyou to all of our gurus for their time in putting these lists together. I hope you’ll find them useful in advancing your knowledge about the many topics covered here on SitePoint.
Visit the SitePoint Guru Lists.
This article provided by sitepoint.com.
WordPress Theme Forecast
ThemeShaper has published an article titled, The Future Of WordPress themes which highlights comments from a number of movers and shakers that exist within the WordPress theming community. A number of individuals contributed to the article such as myself, Brian Gardner, Justin Tadlock, Cal Coleman and more. The basis of the article was to try […]
ThemeShaper has published an article titled, The Future Of WordPress themes which highlights comments from a number of movers and shakers that exist within the WordPress theming community. A number of individuals contributed to the article such as myself, Brian Gardner, Justin Tadlock, Cal Coleman and more. The basis of the article was to try and get a glimpse as to what the future of WordPress themes might be. What better way to find out than to ask those that set the tone for WordPress themes in their current state.
I enjoyed reading a number of the responses and it was interesting to see the differences amongst the crew as to where we see themes in general heading. I hope that ThemeShaper does the same article a year from now to see if any of us actually gave a correct prediction.
Now the question is asked of you. What and where do you think the future of WordPress themes is headed?