Many exciting new functions and features are being thought up for CSS3. I’ll showcase some amazing examples below and let me know what you think by leaving a comment.

How to create colored borders with CSS3

W3C has offered some new options for borders in CSS3, of which, next to rounded borders, border-color is also very interesting. Mozila/Firefox has implemented this function, which allows you to create cool colored borders.

This is an example:

Here is the CSS3 code:
border: 8px solid #000; -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; padding: 5px 5px 5px 15px;

Box-shadow, one of CSS3’s best new features

The CSS3 backgrounds and borders module has a nice new feature called box-shadow, which is implemented in Safari 3+ and Firefox 3.1 (Alpha). The specification speaks of multiple shadows, but the author already “has his doubts” on that, and it isn’t implemented in Safari 3.

The property takes 3 lengths and a color as it’s attributes, the lengths are:
• the horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box;
• the vertical offset, a negative one means the box-shadow will be on top of the box, a positive one means the shadow will be below the box;
• the blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

The shadow should be following curved corners created with border-radius. For those of you without a supporting browser, here’s a screenshot.

Here is the CSS3 code:
box-shadow: 10px 10px 5px #888; padding: 5px 5px 5px 15px;

Border-radius: create rounded corners with CSS!

W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items.

This is an example:

Here is the CSS3 code:
< div style=" background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >

Multiple backgrounds with CSS3

CSS3 allows for multiple background images on one element. To do this, you can separate backgrounds by commas.

Here is the CSS3 code:
background: url(body-top.gif) top left no-repeat, url(banner_fresco.jpg) top 11px no-repeat, url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left repeat-y;

The only browser projects having this feature implemented so far are WebKit and KHTML (Konqueror). This got into Safari 1.3 though, and works in OmniWeb 5.5 and up.

Text-shadow, Photoshop like effects using CSS

CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow. The text-shadow property is used as follows:

text-shadow: 2px 2px 2px #000;

This produces the following text with a shadow 2px right and below of the text, which blurs for 2px:

Note: This feature is NOT new in CSS3; it was originally proposed in CSS2. Safari had it from version 1, however!

The following works in Opera, Konqueror, iCab and Firefox 3.1a, and looks really cool (or, rather, the opposite!):

Multi-column layout

W3C offers a new way to arrange text “news-paper wise”, in columns. Multi-column layout is actually a module on its own. It allows a webdeveloper to let text be fitted into columns, in two ways: by defining a width for each column, or by defining a number of columns. The first would be done by column-width, the latter by column-count. To create a space between the columns, you need to specify a width for column-gap.

Multi-column layout is currently only supported in Mozilla based browsers and Safari 3, who have prefixed the properties with respectively -moz- and -webkit-. The example below is done with column-width, the CSS for it is as follows:

-moz-column-width: 13em; -webkit-column-width: 13em; -moz-column-gap: 1em; -webkit-column-gap: 1em;

Which results in the following:

The next example is done with column-count, and has the following code:
-moz-column-count: 3; -moz-column-gap: 1em; -moz-column-rule: 1px solid black; -webkit-column-count: 3; -webkit-column-gap: 1em; -webkit-column-rule: 1px solid black;

Which in turn results in the following:

A feature which isn’t implemented yet is column-space-distribution, this should describe how to distribute the space between the columns if there’s rest space left.

Jason Harrop has created a multicolumn extension for Firefox which allows you to apply these CSS properties to whatever page you like.

Web fonts with @font-face

Not exactly a feature which is new to CSS3, @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5! However, their implementation relied on the proprietary Embedded Open Type (.eot) format, and no other browsers decided to use this format. With the release of Safari 3.1, however, website makers can use any licensed TrueType (.ttf) or OpenType (.otf) font in their pages.

To use web fonts, each form of the font family must be declared using the @font-face rule; for example, to use both regular and italic forms of Jos Buivenga’s Delicious font, you would put the following in your stylesheet:

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

Then call it using font-family:

h3 { font-family: Delicious, sans-serif; }

Here is an example of the results:

The @font-face rule is planned (although not confirmed) for Firefox 3.1 and Opera 10. You can see more examples linked from this article at A List Apart.

Note: As with images and other media, check the license of the font you wish to use before implementing it. Many fonts are not yet licensed for this kind of use on the web.

CSS3 Speech

CSS2 added support for the Aural media type which is used for “styling” speech synthesis in aural user agents (e.g. screen readers). The specification added several properties to this new media type.

The current Working Draft of CSS2.1 reserves media=”speech”, but explicitly does not define which properties apply to it. Also, the aural media type has been deprecated.

The CSS 3 Speech module removes some of the old properties and adds new ones. All of them are now assigned to the speech media type.

Opera is one of the most popular user agents implementing most of the CSS 3 Speech properties.

The code used to style speech is:

#voice-volume { -xv-voice-volume: x-soft; -xv-voice-balance: right; } #voice-balance { -xv-voice-balance: left; } #speech-cue { cue-after: url(ding.wav); } #voice-rate { -xv-voice-rate: x-slow; } #voice-family { voice-family: female; } #voice-pitch { -xv-voice-pitch: x-low; } #speech-speak { speak: spell-out; }

Note: Since CSS 3 Speech module is still a Working Draft, Opera implements some of its properties using the -xv- prefix.

No related posts.

Related posts:

1. Advertising Contest

Posting

How could I break in by posting? Well, write amazing content and you are sure to be noticed. Nothing spreads around the internet faster than a great story so I could try to write the best articles I possible can and wait to be noticed. Now the pro’s to this are great articles on my blog (win / win), more readership due to great reading materials, a lot of google food, help from content thieves (double edged sword) and a bunch of others that I just can’t put my finger on at the moment. Now the only con’s I can come up with are content thieves who steel my google love, readers, inspiration, etc. So you can see how there is a definite downside to having great content.

Social Media

Social Media is like the playground at school. So much going on and people running all over the place that sometimes it’s hard to stop someone and say Hello. Plus there is also the thought of virtual rejection. Sending your message out to the black depths of the internet and getting no response in return. *single tear* But there is some major pro’s to social media. You are always plugged into the design news of the second, minute, hour, day, etc… You also see newcomers on the scene on twitter being twitted about for the first time and it makes you feel like not such a noob. Feels good right. You can also connect with bloggers / designers on an individual basis and build up quite a friendship. Sadly there are con’s to social media as well. You have to stay up with the it all the time. It’s just like real life, if you don’t feed something it dies. You also will get ignored from time to time which hurts, but hey, get over it already. Social Media seems like the way to go this day in age, but what will the future hold in online interactions?

Wait For Them

Eventually you will be found if you just keep at it and stay focused. Once you are discovered by one you are then spread around like hot cakes enjoying your 15 minutes of fame until you in the community forever. But waiting sucks. How long it takes one person drastically differs from how long someone else has to wait to be discovered, if at all. Only the lucky ones can break in to the design community while the rest of us cower outside the circle looking for our big break. The only pro’s I can see with this method are honing your skills at blogging / designer and growing your business by yourself. Don’t get me wrong, these are not bad things at all, they are great and very valuable skills to hone in life. Now the con’s on the other hand with this one are much greater, especially if you are inpatient. You might never be discovered this way and if that statement scares you, either get out of the blogging business or try another method. You have to be in it to win it.

So I lay this out there as a challenge to the design community. If you see someone new out there on the web, promote them, give them tips, pointers, helpful advice. Shoot them a note of encouragement. Invite them in. Invite me in. Leave comments that will help noobs like me make a difference in the community and promote what we do just the same as the big guys. I’ll leave it at that, hope you enjoyed the read, now feel free to harp if you must or leave praise, but write something that shows this all matters.

Related posts:

1. Design Blogs To Follow On Facebook

All of a sudden the site you have been working on for months is approved and the client wants it live. However, things can still go horribly wrong if you are not prepared.

We’ve all been there.

After months of development, meetings, conference calls, protracted arguments over typography, photography, colour ways and copy. All of a sudden the site is approved and the client wants it live.

By no means is this an exhaustive list. Neither is it presented in any particular order. Your own checklist will be very much tailored towards your own individual clients and the type of project you are delivering.- BoagWorld

Print this list out and use it. Make sure all your checks and balances are in order and you will end up with a happy client and a check in the mail. Leave a comment if you find this post helpful. Cheers!

Continue reading this post on Boag World

Related posts:

1. Usability Tips For Bloggers
2. Increase Your Local Awareness With Google

New Homepage
The new homepage design has moved your friends, messages and notifications up to the logo pane. Seems a better position than down in the bottom right corner.

Events
The events are all laid out nicely and you can see everything all lined up on the left side.

Photos
All the photos are displayed in a nice grid format and each folder is displayed on one page.

Applications
Look at all the apps and their big icons. Looking good.

Messages
Messages are now up by the logo and are an easy read.

Chat
Your chat list is still in the bottom right but is also conveniently in the list on the left. Slight change but they might be dumping the bottom right all together in the future.

If you find any new features leave them in the comments. Thanks.

Related posts:

1. Apps For Your Brands Facebook Page
2. How To Build A Facebook Page For Your Brand
3. Get Your Fan Page Found In Facebook Search

Use your brand for your Facebook page name
When naming your Facebook page, you only have one shot at giving it a “name.” This is what shows up as the title of the page and is created when first setting a page up. This is currently the largest indicator for Facebook search and is make or break for your page being found.

While it might seem simple that you would choose your brand name, it is not always cut and dry. For example, let’s say we are making a fan page for Search Engine Land. Many times people could create the page with the name titled “SearchEngineLand.com” which would severely handicap your chances of being shown in Facebook search. Similarly, you should keep it simple and not get fancy with the name. Say that the NFL wanted to create a fan page. Well, instead of registering the “National Football League” keyword research should be done to see if “NFL” garners more interest. Don’t try to get cutesy with the naming of pages (like “Comcast Cares”) and make sure you use spaces and full words. While something like SouthwestAir would work for Twitter, you would rather have “Southwest Airlines” for being found in Facebook search in order for maximum visibility.

Build your following
If the Facebook page name is top criteria for being found in Facebook search, the fan count is second place. At SMX East in the Facebook Marketing Panel, Marty Weintraub really stressed this fact and couldn’t emphasize enough how important fan numbers (or group or application numbers) were for being found in the Facebook search results pages. If you have the same name as other pages (which is a common occurrence), the page with more followers should show up first.

Leverage Facebook Ads to help build a following as advertising your pages can help boost fans of your page. You can also leverage employee profiles or groups that you are a part of to really help boost your group numbers.

Create a branded Facebook username
While this may not play a major role in being found within the internal Facebook search, the URL structure can play an important role in getting ranked in the major search engine results pages. Being found within these pages can clearly help to boost your fan following from those who may be searching outside of Facebook. While we have not seen a direct correlation between usernames and internal Facebook rankings, having a keyword rich username could an indicator in the future and would be considered best practice.

Create fresh content regularly
Wall posts, events and “posts by everyone” can now be displayed in Facebook Search. By creating regularly updated content, you will significantly increase your chances for being shown. Simple wall posts with branded keywords or branded events will give you extra visibility in the new real time Facebook Search.

Leverage domain equity to boost Facebook pages in SERPs
Again, this is a bit of a secondary tactic, but providing a link from your homepage to your Facebook page should help to get your Facebook page ranking for branded terms. Think of it as proactive reputation management for your brand. Getting people to your page via Google, Yahoo! or Bing can really boost up those fans to your page thereby trickling down to those Facebook Search ranking factors.

Advertise on branded “interests”
While this won’t boost you into the natural Facebook search results, this will allow you to show up on selected terms. While Facebook ads still run off of “interests” rather than keywords, bidding solely on extremely targeted interests, you can boost your possibility of being found. In addition, Facebook does run select Microsoft-network ads, so advertising in adCenter could help you sneak in and steal some of that Facebook search traffic (if you know what you are doing).

Fill in all information about your brand/company
Whether it be the information boxes, mission statements, website or descriptions these could be indicators down the road. While the information isn’t currently helping your pages show in Facebook results pages, it can also help those pages in external Search Engines as most page content is indexed. The more relevant the content, the better. While these sections might not play a role in internal Facebook ranking, there is evidence that it can help the ranking of groups. This could be applied to pages in the future (and should IMO).

Spend a little time optimizing your site for bing
If you need one reason to pay attention to Bing, it could be for the sole fact that it displays the web results in Facebook Pages. You will always find those web results at the bottom of the Facebook Search, so spend a little time working your site for Bing and you could see a big payoff from the Facebook search platform.

These tips should help your visibility in Facebook search and help to take your fan page to new heights!

Related posts:

1. How To Build A Facebook Page For Your Brand
2. Apps For Your Brands Facebook Page
3. Increase Your Local Awareness With Google

Continue reading on Design Shack

Related posts:

1. Stunning Use Of Light Effect In Webdesign
2. Your Creative Drive
3. Usability Tips For Bloggers

Read the rest on You The Designer

Related posts:

1. Get Your Fan Page Found In Facebook Search
2. Your Creative Drive
3. How To Make Money Freelancing

Read the rest on OnExtraPixel

No related posts.

Dominance through emphasis of one or more particular elements creates a focal point in your design. It’s where most people will instinctively go when first looking at your work. Dominance will create an entry point on the page from which you can lead the viewer to other parts of the page.

Continue reading on Van Seo Design

Related posts:

1. The Difference Between Pixel & Vector Based Design
2. Your Creative Drive
3. Apps For Your Brands Facebook Page

Thanks all for reading and following Lucas Cobb Design Blog and look forward to more contests in the future. Good Luck!

Related posts:

1. Banner Giveaway

Bold: Alt+SHIFT+b
Italics: Alt+SHIFT+i
Link: Alt+SHIFT+a
Blockquote: Alt+SHIFT+q
Code: Alt+SHIFT+c
Read More: Alt+SHIFT+t
Unordered List (ul): Alt+SHIFT+u
Ordered List (ol): Alt+SHIFT+o
List Item (li): Alt+SHIFT+l
Advanced Editor: Alt+SHIFT+v
Publish the Post: Alt+SHIFT+p
ins: Alt+SHIFT+s
del: Alt+SHIFT+d
Unquote/outdent: Alt+SHIFT+w
Undo: Alt+SHIFT+u
Redo: Alt+SHIFT+y
Edit HTML: Alt+SHIFT+e
Align Left: Alt+SHIFT+f
Align Center: Alt+SHIFT+c
Align Right: Alt+SHIFT+r
Ctrl+[number] to get various header sizes on highlighted text.

Related posts:

1. 12 Must Have Plugins For A Wordpress Design Blog

See the package design on Designers Couch

No related posts.

Freelancers in the creative industries frequently find that staying in a creative mindset, day in day out, can be a real challenge, especially if they’re tired or working on multiple projects simultaneously. For all these people, we’ve compiled 15 tips for improving creativity and staying creative for longer.

Continue reading on Acris Design

Related posts:

1. Your Creative Drive
2. Stunning Use Of Light Effect In Webdesign

Now,why to choose a premium wordpress theme?If you want an eye-catching wordpress layout or something unique or perfectly coded to render with all browsers or something of SEO magic to be noticed on the internet,than you should choose a premium Wordpress theme.Also,you`ll get full support to set the theme up.

Month of January offers us 20 beautiful and creative premium wordpress themes from the biggest places,like Elegant Themes and Theme Forest.Take a look and choose your favorite theme!

Continue reading on OurTuts

Related posts:

1. 12 Must Have Plugins For A Wordpress Design Blog
2. Keystroke Shortcuts In Wordpress
3. Your Creative Drive