CSS Tutorials – CSSHelper.net

WordPress has become a great platform for a wide range of website needs. Originally designed for blogging it is now a common package for full fledged content management systems and even complete web based applications.

Now we even have great opportunities to use WordPress as an internal communication and back office tool. With these assortments of plug-ins we can use our favorite open source software to improve our businesses, efficiency and offer more solutions to our clients.

Billing

If you are a freelancer or a small company you know how much time can be sucked up by managing your billing. This is a bit of a shame because the billing part of the job should be the most fun, it’s how you get paid! There are a lot of available paid solutions for billing, but they are all hosted on different websites and applications and are not as nice and neatly integrated as doing it through WordPress. Luckily we have WP-Invoice, a full invoice creation and tracking system that integrates with WordPress directly.

It features:

• E-mail invoices to clients
• Save client data
• Payment processing options such as Authorize.net, Paypal, etc…
• Archived invoices
• Secure connection for viewing invoices

Download WP-Invoice

Contact Relationship Management

As your business grows the amount of clients, leads and strategic partners you have will also grow. It is time to throw out the Rolodex, get rid of your piles of business cards, there are better ways to manage your contacts. The newest solution would be using a Contact Relationship Management system or CRM. There are a wide range of different CRM solutions available (salesforce.com, highrise, etc…) however WordPress can function as one with the simple installation of a plug-in!

WP-CRM features:

• Associate an image with each contact.
• Assign each contact to a company… or don’t.
• Create a note history for each contact.
• Clickable email and website links.
• Google map contacts address.
• Dial a phone number (works on cell phones with internet browsers).
• Fully hcard / vcard compatible.

Download WP-CRM

Project Management

Still using a pen and paper to manage your projects? You might as well be using a sundial to check the time! Using software to manage and track your projects is a lot easier and more sophisticated. While there are plenty of good commercial solutions available, why not integrate it into WordPress? That way it is easy to use, customizable and open source. With the simple installation of a plug-in you can:

• Track clients
• Track projects by client
• Track tasks by project
• Track time per task with dynamic timer like Harvest

Download WP-Project

Office Communication

Sometimes proper and adequate communication is the most important and most difficult aspects of running a larger company. There are all sorts of tools that attempt to correct and fix this problem, some of them more effective than others. The WordPress team themselves encountered this issue and sought to find a solution that integrated into their beautiful piece of software. Hence Prologue was born – a twitter like tool that can run off of your web server.

Download Prologue

Newsletter & Notifications

Need to send news and updates to your employees? Maybe you want to do some e-mail marketing for your company? Rather than pay monthly or per e-mail using an overpriced and underachieving e-mail marketing solution just integrate it with WordPress. There is a simple, effective and easy to use newsletter tool that will do everything you need and more.

Download the Newsletter Plugin

Calendar

Keep track of all the events and important milestones going on with your business by using a simple and easy to use calendar system. There are a handful of WordPress plug-ins that let you create and manage calendars, I have had the best luck with WP-Calendar. If you want to get very fancy you could also have a members only calendar so that only employees and those with a login can see it.

Download the Calendar Plugin

Read More

CSS Blog

There are some great websites out there. They are well planned, well executed, well designed and simply effective. For every great website there are three that are could be great, but fall short due to a few small areas of neglect.

We as a community and as an industry have become very good at most aspects of building websites. Just looking through a few CSS Galleries clearly shows the quality of design that is being produced and how much it has improved in just a few years. If you look a layer deeper and view the source of these websites you will see beautiful and semantic XHTML/CSS. It seems the days of table based layouts is finally gone.

The amount of functionality and rich experience that sites have now day are creative, impressive and engaging. Powerful javascript libraries such as jQuery, MooTools and prototype make it easy to produce these experiences rapidly and effortlessly.

But a website is more than the design, code and effects/functionality. Sometimes we have to rethink our approach and find out what is really important. What are the sites objectives and what are our users objectives? More often than not you will find that you could improve the following areas of your websites:

1. Web forms

While they are far from the sexiest part of web design, web forms are arguably one of the most important. In almost all cases a web form also functions as a conversion point (a point where a user performs an action that accomplishes a site objective).

Here a user is going to enter in some of their personal information so that they can get something in return. This establishes interest and provides the site owner with some valuable information.

Web forms are often neglected in two ways:

1. There is not enough attention in making them usable. This could be poor validation, improper labeling of required fields, making them too long or poor form layout.
2. There is not enough attention to what information is asked from the user.

You have a real opportunity to learn more about the people who use your website. That information can not only help you build a better website but also a better business. This marketing information could easily lead to R&D improvements and better products.

Do some research and learn how you can make more effective forms. Your clients, bosses and website owners will thank you many times over.

Resources

• Web Form Design: Filling in the Blanks
• Web form eye tracking studies

2. The Content

Content is king. In a recent study 25% of users noted that the number one reason they were to leave a website was due to “weak web copy.” The only reason anyone ever goes to any website is because of the content, yet so many website owners neglect the content. Despite it’s importance content becomes an afterthought. Appearance, search rankings and conversions tend to be the focal point of most web design projects. What we may forget is that with out great content you still have a poor appearance, you won’t rank high and no one will convert.

Rather than trying to write all of the content yourself, hire someone. It will be worth it, I promise you. If nothing else write the bulk of the copy and hire someone to make it consistent with the proper voice and tone.

Resources

• The Web Content Style Guide: The Essential Reference for Online Writers, Editors and Managers
• Quality Web Content

3. The Footer

With a little thought it becomes painfully obvious, most website footers are absolutely useless. A user takes the time and effort to read (or scan) through an entire page, and when they reach the bottom they are rewarded with links that don’t fit anywhere else, a copyright notice and maybe an address and phone number.

The point where page content ends is a very high action zone. That means that users who get to that point have a high probability of clicking on any link that comes below it. Rather than some meaningless legal links and an address create a footer that gives the user a place to find additional content that may interest them.

This could be:

• Related pages / articles / posts
• Links to rich media
• Latest news / updates
• Previously viewed pages
• A contact form
• Ways to save / share the page
• Newsletter sign up

Resources

• Footers in modern web design
• Footers with great usability

4. The Print Version

Many designers fail to realize how many people still prefer to print off websites rather than try and read them on screen. There are two significant benefits to paying attention to the print version.

The most obvious benefit is that it can improve the user experience of the site. Users who visit your site and print it out will actually read the content and are more likely to revisit the site and make an action (or conversion). If the printed version is difficult to read and work with they are highly likely to simply recycle the paper and forget they ever visited your site in the first place.

The second benefit is it could be a real competitive advantage. If a user prints off two web sites, and yours clearly has more attention to detail in the print version, they are much more likely to use your product/services over the competitors.

You can improve the print version simply by:

• Turning off unnecessary items such as the header, footer, navigation, search box etc…
• Changing the font to serif, increase the font size and space out the line height to make the print version more legible
• Adjust the columns or remove sidebars so that only the primary content prints out

Resources

• Print style sheets, a definitive guide
• Pro CSS Techniques

5. Analytics

How users behave and use a website is one of the most important factors you could possibly focus on. Despite this fact it is so commonly neglected by both website owners and website designers. Businesses need to spend more money on the analysis of user behavior and web design companies need to promote the service more heavily.

Even a website that is built using an effective strategy, user testing and best practices is a best guess at what will be most effective.

If you actually pay attention to how users behave and analyize that behavior you can discover countless ways to continually improve your website.

• Are users leaving a specific page more than others? Maybe they are not finding what they are looking for and that page can bet altered
• Do you have a page where a lot of people are entering the site other than the homepage? You need to start thinking of those pages as landing pages
• Are there important pages that don’t get a lot of traffic? Figure out how you can make those pages more prominent

Resources

• Web Analytics: An Hour a Day
• Occam’s Razor – web analytics blog

Read More

CSS Blog

Today, dear readers, I come to you with my arms wide open — and my shoulders caught somewhere between a slump and a shrug. I’ve been tearing my hair out over the last couple of months looking for the perfect ecommerce solution for my specific needs and wants. I’ve come up short.

But it occurs to me that I have a lot of smart, savvy readers here on CSS Newbie — and maybe, just maybe, you’ll be able to help me find the perfect shopping cart. Below, I’ll explain specifically what I’m looking for (and a bit about what I’m not looking for, too). If you know of a cart that meets my needs — or even just some of them — please do not hesitate to let me know! I’m hoping that the comments on this article will prove as plentiful as Starbucks on the open prairie. And twice as useful.

I Want a Simple, User-Friendly Cart that Stays Out of My Way.

That about sums it up, really. But for more detail, here’s what I want/need in a cart:

• A self-hosted solution. If it weren’t for this requirement, I think Foxycart would be my #1 contender. Consider that a hint — if you know of something Foxycart-eque, but is self-hosted instead, please let me know!
• Supports everything PayPal has to offer. Specifically, I want something that can support Website Payments Pro and the Payflow Pro gateway. This way I can handle payments on my site, but still take advantage of PayPal’s expertise, PCI compliance, and competitive pricing.
• Flexible, straightforward templating. I am a front-end developer. Any cart solution that tries to stand between me and my code or that makes templating a holy hell isn’t a good solution. I want simple, straightforward flexibility. For example, I’ve been working with Magento a lot recently, and while it has a lot of great features, it’s a huge pain to deviate too far from the standard build. Every small change requires updates in multiple disparate files and hours of time for a five-minute job. My ideal solution would let me build my pages however I wanted, and just drop in the “cart” functionality wherever I cared to do so.
• Good support of downloadable products. The stores I’m building will have both hard and soft goods, so I need the cart to work equally smoothly with both.
• Built for LAMP servers. The ideal solution would run on PHP/MySQL, but I would consider other LAMP-friendly options. Sorry, but ASP/.NET solutions aren’t a possibility for me.
• A single product database. This solution will be running multiple stores, but several of the stores will share some products. In the interest of avoiding redundant data, I’d like to have a single product database that all my stores can draw from.
• Access to the source. I don’t want to have to wait for a team halfway around the world or a community of volunteer developers to get around to building the functionality I need if I think I could tackle the project myself. If I can’t have access to the source itself, an exceptional plugin system would be a good alternative.
• A flexible discounting system. I want to be able to offer (as a fake example) 20% off orders of $50 or more on certain products. I want to discount items if people buy two or more of the same product. I want sales that run for three weeks, and expire automatically. Or at least some of those things.

That’s the basics of what I need, folks. That isn’t too much to ask, is it?

To summarize, I’m looking for a simple, straightforward shopping cart that makes templating a breeze, runs on PHP/MySQL, supports PayPal gateways, allows virtual goods and discounts, and is something I can install locally and modify. I do not need a solution that tries to be everything at once — it doesn’t have to contain a CMS, a catalog, or an inventory system. It doesn’t have to provide a newsletter, it needn’t compare items, and it shouldn’t try to walk my dog on Thursdays. I don’t want a jack-of-all-trades: I want a master of one (or two).

I also want to clarify: this does not have to be a free solution. If you know of a commercial option that does all this, I would be very excited to hear about it.

So! Let me know what you know in the comments below. Even if you know of a cart that fulfills some of these needs, I would be excited to hear about it — there’s always the chance I can customize it to do what I need from there.

Read More

CSS Blog

The life of a CSS developer isn’t all about attending glamorous champagne parties, jet-setting around the world and hanging out with supermodels. In fact, when your CSS doesn’t behave the way it should, the job can be downright tedious. I’ve spent untold hours of my life debugging my code — and I’m guessing I’m not alone here.

But as silly as it may seem, some of the biggest CSS blunders stem from the simplest of errors. Knowing what some of those errors are and remembering to look for them can save you hours of wasted labor. Here are fifteen ways I’ve found to break my CSS for sure — and fifteen things I always look for whenever I have a problem in my code.

Missing a Semicolon

CSS rules are comprised of property-value pairs (declarations) followed by a semicolon. Accordng to the CSS specification, the last declaration doesn’t need a semicolon — because the closing brace effectively ends the declaration just as well. That means something like this is perfectly acceptable:

body {
	background-color: #444;
	color: #eee }

The only problem is, as soon as you decide to add another declaration to your previous rule, you’ve now made it all too easy to forget to add the semicolon to your once-last rule:

body {
	background-color: #444;
	color: #eee
font-family: Helvetica, Arial, sans-serif }

The result? Your font-family rule never gets applied, because the parser reads “font-family” as part of the color value. Which is why I make a habit of adding the final semicolon in a rule, no matter what.

Missing a Colon

I’ve seen this particular problem crop up frequently while teaching classes on CSS. People get excited when CSS starts to make sense, and their typing speed increases. The downside: this makes errors of omission much more likely. And a missing colon is particularly tough to see, since it sits right in the middle of a declaration. Consider the following two lines:

body { font-family Helvetica, Arial, sans-serif; }
body { font-family: Helvetica, Arial, sans-serif; }

It’s easy to see how the colon could get overlooked in the jumble of braces, hyphens, semicolons and cryptic words. As a rule of thumb, if you only have one declaration not behaving itself, this is a good place to start looking.

Missing a Brace

{Braces} around a CSS rule are like the circle of life: regular, natural, and expected. And if you ever miss a brace (generally a closing brace for whatever reason) — just like if you have a zombified corpse that refuses to die — you suddenly have all sorts of mayhem on your hands.

When an unsuspecting browser comes across a pair of rules like this:

body {
	font-family: Helvetica, Arial, sans-serif;
#wrap {
	width: 960px; }

The browser is going to choke. Two opening braces before a closing brace is right out: everything from your #wrap rule (in this example) on would be ignored.

However, this does make debugging easier. Do you have a whole chunk of CSS being ignored? Which is the first rule that is being neglected? There’s a good chance you have an uneven number of braces hanging out in the vicinity.

Misspelled Properties

I consider the following few errors the bane of dyslexic developers everywhere. Generally speaking, I’m a good speller. But when I’m “in the zone” and typing as fast as my fingers can carry me, I tend to transpose a few letters here and there. In writing, this isn’t such a big deal: people can generally figure out what I mean. Computers, sadly, are less discerning.

div { border-bototm: 5px; }

Now, I have no idea what a “bototm” is, but I do know I write the word at least one time in five when I’m trying to refer to the lower edge of an element. I’m lucky in that I have a decent eye for editing and often catch these mistakes as I make them. If you’re not so fortunate, using a program with code coloring like Notepad++ or Adobe Dreamweaver (my personal favorite) can make the job a lot easier: if a property isn’t colored like the other properties, than it’s probably not much of a property at all.

Misspelled Values

Misspellings aren’t limited to just properties. And sometimes a misspelled value can be even more difficult to notice:

#wrap { padding: 10px 20pz 25px 20px; }

Unfortunately for the rule above, I’m fairly sure only Snoop Dogg and I have ever tried to measure elements in pizzles. Instead of the generous padding you’d expect this rule to generate, this one misspelled unit renders the entire declaration invalid.

Misspelled Classes and IDs

No matter how often I create a div with an ID of “navigation,” I still find myself writing rules that look more like this:

#navigaiton { float: left; } 

This can be a frustrating error to track down, because color-coded editors won’t help you out here: you could just as easily purposefully name an element “navigaiton” if you really wanted. But I’d recommend against it.

Improperly Ordered Values

Some CSS properties have a built-in shorthand, which is a great way to save yourself a few lines of code. Unfortunately, most of the shorthand properties are very picky about the order of the property’s values. For example:

div { font: 2em Helvetica, Arial, sans-serif; }
a { font: "Times New Roman", serif 1.5em; }

The first rule will result in all divs gaining a specific typeface and size. The second rule will result in a debugging session — while it’s okay to leave some values out of the font declaration, changing up the order of the values will result in problems.

Measurement Values Without Units

CSS Newbie reader Justin reminded me of this problem the last time I wrote about CSS faux pas. With only a few limited exceptions, all measurement values in CSS need a unit of measurement associated with it. Take the following rule for example:

#wrap { margin: 3; }

Three what? Ems? Inches? Pizzles? The flexibility of CSS that allows us to pick from several units of measurement also means specifying a unit is fairly important.

Bonus — Two unit-agnostic measurements:

1. Values of zero don’t need a unit of measurement. Turns out, zero pixels and zero miles are exactly the same length.
2. Line heights needn’t have a specific unit. A line height of “1.5″, for example, will simply assume you meant “1.5 times my font size.” For more on this phenomenon, visit Eric Meyer’s article on Unitless Line Heights.

Competing Identical Rules

Once a stylesheet gets to be a certain length, it can be difficult to remember which rules you’ve already written unless your CSS is very well organized. And two identical rules at different spots in your CSS file can wreak havoc on your design and sanity alike.

ul li { margin: 0 2em; }
... 300 lines later ...
ul li { margin: 0; padding: 10px; }

In this scenario, the latter rule would win out over the former, thus removing the margin and applying padding instead. But if you’ve forgotten about this duplicity, you might go back into your CSS later and try editing the first rule only, and remain perplexed as to why, no matter how you tweak your margin, you can’t seem to make any difference.

Unintentionally Competing Rules

A similar problem could force your CSS to compete with itself in ways you didn’t expect. For example, if you had the following code in your XHTML:

<div id="navigation" class="nav">...</div>

You could refer to this element by either its class or its ID. The problem arises when you do both, and forget that you’ve done so:

.nav { width: 50%; }
... later in the code ...
#navigation { width: 500px; }

This code would result in a fixed-width navigation bar, even though the first rule would suggest a more flexible width. Again, having a well organized stylesheet is the easiest way to avoid this problem.

Calling a Class an ID (or vice-versa)

I fall into this particular trap all the time. I’ll write a rule like this:

.navigation {
	float: left;
	width: 100%;
	height: 4em; }

And nothing will happen! It often takes me a minute or two to realize that the real problem is that I’d given my navigation bar an ID, not a class. My best advice here is to pick a naming system that works well for you and be consistent. If you always call your top navigation bar “#topnav”, for example, you’re far less likely to misremember your element names.

Using a Nonexistent Property

Not all CSS properties are named the most intuitively. For example, this might look like a perfectly acceptable rule to someone new to CSS:

body { text-size: 3em; }

The problem is, while there are certainly several text-riffic properties, text-size isn’t one of them. Instead, we use font-size. Which means that the rule above wouldn’t do much of anything. Intelligent code-coloring editors like Dreamweaver usually make this sort of debugging much easier: if it’s not a real CSS property, it won’t be the same color as the surrounding properties. That’s usually my first clue I’ve done something wrong.

Using a Nonexistent Value

This is a sister stumbling block to the one above. Some values just seem to make sense, but will fail you nonetheless:

td { vertical-align: center; }

You would assume that this rule would vertically center your table text, right? Unfortunately, while “center” is indeed an acceptable value for text-align, vertical-align uses the perhaps less intuitive “middle” instead. And you’d have to ask a better educated rhetorician than me to figure out the difference between middle and center in this context, because I’m at a loss.

Improperly Matching Properties and Values

Certain CSS declarations can look correct even to the trained eye, unless that eye is paying particularly close attention. For example:

a { text-transform: italic; }

While this might look like a perfectly reasonable rule, you won’t end up with italicized text. That’s because “italic” belongs to the font-style property, not the text-transform property. But even most advanced editors won’t catch that bug, as you’ve used a perfectly reasonable property and value — you’ve just used them in an inappropriate combination.

Not Closing Comments

The gentle persons at BlogThemeMachine tipped me off to this common CSS problem. Can you spot the major difference between these two sets of rules?

/* Navigation goes here. */
#nav {
	float: left;
	width: 100%;
	height: 3em; }

/* Navigation goes here. /*
#nav {
	float: left;
	width: 100%;
	height: 3em; }

The only difference is that the second rule has an improperly closed comment tag: /* versus */. That seemingly insignificant difference can result in entire swaths of your CSS suddenly not working. In fact, this tiny blunder will negate all your CSS from the start of your comment until you successfully close a second comment. Which if you’re using comments to organize your CSS means an entire section of your site will lose its styling.

These fifteen tiny blunders are sure to give you hours upon hours of CSS frustration… unless you know to watch for them. What are some other self-introduced bugs you often find in your code? I’d love to hear about them in the comments!

Read More

CSS Blog

Hey everyone, I’ve posted a new poll in the footer of the website, and I’d appreciate if you’d take a second or two (literally) and answer the question du jour: how much CSS do you already know?

This is a chance for me to get to know you, my audience, a little bit better. It will also help me do my darnedest to produce the sort of content that you would find most useful. So! Are you a true CSS newbie, already a big deal in the CSS world, or somewhere in between? Let me know in the poll below!

Note: There is a poll embedded within this post, please visit the site to participate in this post’s poll.

Also, here are the results from the last poll, which asked, “what do you want to see on CSS Newbie in 2009?”:

• 59% of the voters wanted more long, tutorial-style articles.
• 43.4% wanted more short, quick tip articles.
• 33.7% requested more entry-level, CSS-specific articles.
• 31.3% wanted more advanced and non-CSS articles.
• 24.1% wanted to see video tutorials and tips.
• 19.3% were looking for a forum to help find solutions.
• 12% wanted an email newsletter to stay in touch.

(note: these add up to more than 100% because people could choose more than one option)

So obviously, the overwhelming answer is: more articles! Long, short, entry-level, and advanced… it seems there’s an audience for all four. And since I try to offer a combination of all four currently, that is a very encouraging result to see. And the other three — video tutorials, forums, and an email newsletter — were all desired by more than 10% of the respondents. Obviously I have a lot of planning to do!

So thanks everyone for participating in the last poll, and please take a second to give me your responses on this one!

Read More

CSS Blog

Today’s article is probably not the most practical tutorial I’ve ever written, but it was definitely one of the most fun to create. It also shows that, while CSS is often treated as a straightforward web development workhorse (and it’s a great workhorse, at that), it can also have a lighthearted, eccentric side as well. Today’s tutorial is about how to use CSS to create art.

Now, as I’ve mentioned numerous times, I am not an artist. If true CSS artists were likened to Salvador Dali or someone similar, I’d be more akin to the guy watching Bob Ross on public television and following along at home, creating wobbly little smudges and pretending they’re happy little trees. But! What my example above (and you can skip ahead and see the final version) shows is that it doesn’t take very many CSS rules to create some pretty cool CSS art.

And the best part about tackling CSS art is you’re likely to learn a lot about CSS along the way. Sure, this art form is probably only a step or two above the ASCII art generated in the nineties – but playing around with ASCII art taught me a decent bit about letter forms, line lengths and the rest. Likewise, practicing CSS art will teach you an awful lot about sizing, positioning and the use of color to create an effect.

To warn: my example flower makes extensive use of the border-radius property (which I’ve covered more in-depth here), which doesn’t work in Internet Explorer. The net result is that the IE version of my flower looks a bit Atari-esque… but the rest of the code still works fine.

So let’s get to the code!

The XHTML

I’ve attempted to keep my code as simple as possible, while still keeping each of my flower’s segments separated for easy adjustment. Here’s what my code looks like:

<div id="background">
	<div id="flower">
		<div id="topleft" class="petal"></div>
		<div id="topright" class="petal"></div>
		<div id="center"></div>
		<div id="bottomleft" class="petal"></div>
		<div id="bottomright" class="petal"></div>
		<div id="leftleaf" class="leaf"></div>
		<div id="stem"></div>
		<div id="rightleaf" class="leaf"></div>
	</div>
</div>

The “background” div creates the blue sky and green grass, while the “flower” div contains the rest of my work. Each petal and leaf gets its own ID, while each group shares a class to reduce the number of rules I have to write. The stem and center circle are unique, and thus don’t have a class assigned.

I’ve written my code in the same order that it is to appear on the screen (assuming I move top to bottom, left to right). However, if you were willing to make more extensive use of positioning than I have, you could conceivably place the individual divs in any order you so chose.

The CSS

And now for the fun part! I’ll break my CSS into several parts so you can see how it all comes together. First, we’ll set up the background and the main flower div:

#background {
	position: relative;
	background-color: #9cf;
	width: 600px;
	height: 476px;
	border-bottom: 10px solid #090;
	margin: 0 auto; }
#flower {
	position: absolute;
	top: 20px;
	left: 172px;
	width: 256px; }

The background has been relatively positioned so that I can absolutely position my flower inside it, using the relative-absolute positioning trick. I’ve also given it a width and height, to provide my image’s frame. Then I’ve used a background color to simulate the blue sky and a border to provide the ground. My flower is absolutely positioned (which also means it becomes the containing div for any positioned divs nested inside), and is placed on top of the background.

Then we have the flower petals:

.petal {
	background-color: #f33;
	float: left;
	margin: 1px 1px 0 0;
	width: 125px;
	height: 125px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px; }
#topleft {
	-moz-border-radius-bottomright: 0;
	-webkit-border-bottom-right-radius: 0;
	border-bottom: 2px solid #c33;
	border-right: 2px solid #c33; }
#topright {
	-moz-border-radius-bottomleft: 0;
	-webkit-border-bottom-left-radius: 0;
	border-bottom: 2px solid #c33;
	border-left: 2px solid #c33;  }
#bottomleft {
	-moz-border-radius-topright: 0;
	-webkit-border-top-right-radius: 0;
	border-top: 2px solid #c33;
	border-right: 2px solid #c33; }
#bottomright {
	-moz-border-radius-topleft: 0;
	-webkit-border-top-left-radius: 0;
	border-top: 2px solid #c33;
	border-left: 2px solid #c33; }

This is the largest chunk of CSS (because each petal is slightly different), but it’s fairly repetitive in nature (because each petal is fundamentally the same). The “petal” class sets our basic rules: our petals are dark red, floated left, have a tiny bit of space on their top and left sides, are 125 pixels wide and tall, and have rounded corners.

The following four sets of rules simply specialize each of the petals to make them unique. I’m doing two things. First, I’m removing the curved border on the innermost corner; technically the center circle covers almost the entire inner corner, but it looks cleaner without the curve, and it also allows me to resize the center area without worrying about whether the curved border will show through. Then I’m adding a 2-pixel wide darker red border to the inner two sides of the flower petals, which adds a sense of depth and a bit of visual interest.

Next we have the center circle and the stem:

#center {
		position: absolute;
		left: 112px;
		top: 112px;
		background-color: #ff3;
		width: 30px;
		height: 30px;
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px; }
	#stem {
		float: left;
		width: 12px;
		height: 200px;
		margin: 0 1px;
		background-color: #093; }

Although the center area looks like a circle, like all XHTML elements, it is technically a rectangle. This particular rectangle is a square, 30 pixels wide and tall. And then all I’ve done is given each side a 15 pixel border radius, resulting in a perfect circle. Once the circle was made, I used absolute positioning to center the circle over the intersection of the four flower petals.

The stem was the most straightforward of my elements. It’s a true unrounded rectangle, given a green background color, a width, height, and margin, then floated left so I could place my leaves directly against it without having to resort to absolute positioning.

And speaking of the leaves, here’s how they were created:

.leaf {
	float: left;
	margin-top: 80px;
	background-color: #093;
	width: 60px;
	height: 30px; }
#leftleaf {
	clear: left;
	margin-left: 10px;
	-moz-border-radius-bottomleft: 30px;
	-webkit-border-bottom-left-radius: 30px;
	-moz-border-radius-topright: 30px;
	-webkit-border-top-right-radius: 30px; }
#rightleaf {
	-moz-border-radius-bottomright: 30px;
	-webkit-border-bottom-right-radius: 30px;
	-moz-border-radius-topleft: 30px;
	-webkit-border-top-left-radius: 30px; }

I was particularly proud of how the leaves turned out, even though they’re fairly simple in design. The leaf class sets some defaults: they’re floated left, given a top margin to push them down the stem, the background color matches the stem color, and the width and height give them a long, slender (if blocky) appearance.

The individual leaf IDs are what make them look so nice. Each leaf has two rounded corners on opposite sides. The rounded corners continue for exactly half the width of the box. The result is a very visually appealing curve. The left leaf also received two additional treatments: it gets a clear to ensure it doesn’t show up to the right of the petals, and has a left margin to push the stem exactly where I wanted it.

And that’s all there is to this flower! Even though it may seem complex, I’ve really only used a dozen or so CSS properties in a variety of different ways. As I said, this is a great exercise to tackle in order to gain a greater understanding of how positioning elements works (and it’s a lot of fun for the border-radius property as well).

Additional Challenges

So that’s what I was able to accomplish in less than 100 lines of code. So what can you do? I encourage you to show me up and share links to your masterpieces in the comments below. Here are some suggestions for challenges:

• Recreate my flower using proportional units instead of pixels. That would allow you to resize the flower and still keep it looking pretty!
• With a bit of absolute positioning and more rounded corners, try adding clouds to the otherwise bland background.
• My flower’s leaves remind me of cat eyes. Try creating a cat or similar beast using pure CSS.

And no matter what: have fun!

Read More

CSS Blog

Fans of the swiss army knife of web development Firebug will be happy to hear that this wonderful Firefox add-on has added another blade to its arsenal. With the help of the Firescope add-on, it can now provide CSS and HTML reference in a snap. Just right-click on any tag and click on the context menu to perform a lookup. The tool appears to have been developed by the web gurus over at SitePoint, so tool has links to further information on the SitePoint Reference web site.

The tool is also searchable. You can:

… search for HTML elements, HTML attributes, or CSS properties (or any combination). The search happens live as you type, so usually you’ll only have to type one or two letters to get the results you want.

Check out the screenshots:

• Firescope Homepage
• Install Firescope

Share

Read More

CSS Blog

This website documents Webucator’s Courseware Creation System. … CSS Text. Letter-spacing. Word-spacing. Line-height. Text-align. Text-decoration. Text-indent …

Source

CSS Help

If you wish to have more than one style of a html tag, classes are for you. … css classes. borders. link styles. images as bullet points. first letter/line …

Source

CSS Help

SecurityReason … Firefox CSS Letter-Spacing Heap Overflow Vulnerability … is due to incorrect handling of the CSS “letter-spacing” element. …

Source

CSS Help