xDesign365 – Edinburgh web design, iPhone and Android application development
Email: info@xdesign365.com Edinburgh: 0131 339 3838Glasgow: 0141 280 0491
Quick tutorial: How to use basic CSS3
With CSS3 support now quickly being implemented in all major browsers, including IE9, you can start to take advantage of these features knowing that a reasonable percentage of your audience will indeed be able to see them.
Many of the CSS3 rules and selectors are very simple to implement, and can make tasks that were previously very frustrating in CSS2 incredibly simple. One example is that of the CSS3 ‘border-radius’ rule, which allows you to round the corners on any bordered element. The previous way to do this, with images in each corner, was incredibly annoying and inflexible.
Take a look at Jacob Bijani’s “border-radius.com” – a free online tool that allows you to experiment with border-radius and will also generate the needed CSS3 code for you to copy and paste in it to your stylesheet.
One important thing you may have noticed – as CSS3 is still a draft currently, many browsers use private namespaces for CSS3 features. The most common ones are –webkit (for WebKit based browsers such as Safari and Chrome), -moz (for Gecko based browsers such as Firefox). Opera uses the straight CSS3 rule without a private namespace attached. As CSS3 moves further along in the standardisation process, expect to see these namespace declarations vanish.
Another great effect you can achieve extremely easily is that of the text-shadow declaration, which is actually a CSS2 rule but hasn’t been widely implemented in browsers until recently.
Take a standard paragraph rule such as:
p { font: “font-family: Georgia; font-size: 14px; color: #000;"}
(this sets the font of the paragraph to 14px Georgia in black.)
Example: Here is some text
Simply add the text-shadow decleration to get:
p {font-family: Georgia; font-size: 14px; color: #000; text-shadow: 2px 2px 2px #0f0; }
Example: Some text with a shadow!
As you can see above if you are using a compatible browser, this will give you a text shadow that is 2px to the left of the original paragraph, 2px below and a ‘blur’ with a 2px radius. The #f00 gives the shadow its colour (green). This is a great effect to use to add a bit of depth to your headers. Be careful on overusing this effect though, as it’s best used sparingly.
Finally, for our last example, we’ll show you how to do basic animations in CSS3. This is perhaps the least supported part of the CSS3 specification, with only WebKit and Opera supporting them at present. Firefox4 and IE9 should, all being well, be implementing them before the final release.
Let’s start with a div, with an ID of ‘animateme’, setting it’s background colour to red (#f00) and the foreground colour to white (#fff). We also set up the transition effect:
<!-- #animateme { background-color: #F00; color: #FFF; -webkit-transition: all 1s ease-in-out; } --> <div id="”animateme”"> Animate me!</div>
As you can see, it produces a red box with some text in it. To add an animation when we hover, you simply need to add the following rules:
#animateme:hover { background-color: #00f; -webkit-transform: rotate(360deg) scale(2); }
Example:
The above rule, if you’re using a compatible browser, will slowly animate the red background to blue, over a period of 1s. Furthermore, the rotate and scale commands give it a somewhat ridiculous spin-and-grow effect.
As you can see, using advanced effects in CSS3 is not complicated – in many ways it makes things that used to be hard and frustrating quite simple. Once IE9 is released and has a significant amount of users, we should see these effects taking hold across the web.
If you’d like us at xDesign365, Edinburgh’s premiere new media agency, please get in touch at sales@xdesign365.com or give us a call on UK 0131 339 3838. We’ll be happy to help with any sort of web design or development process you need implemented.
34 Responses to “Quick tutorial: How to use basic CSS3”
Leave a Reply
Recent Posts
With the holiday period quickly approaching we would like to wish all of our past and present customers a Merry Christmas and a Happy New Year. 2011 has been a prosperous year for xDesign365, having increased our team from 4 to 7, relocated to larger premises, investment in new equipment and gaining many long term Read More …
We are a busy Edinburgh based creative agency looking to add to its growing team. We have recently relocated to our own offices in the West End of Edinburgh to accommodate our growth. We are a young team of passionate developers and graphic artists. We specialise in mobile applications with custom web based backend management Read More …
Related Posts
Today, STV News Edinburgh posted an article regarding a one-of-a-kind Application currently in development here at xDesign365.
We got a favourable writeup from BusinessComment magazine, take a look below: Edinburgh-based developers set to revolutionise Glasgow bar scene Innovative Edinburgh-based web development company xDesign365 has launched a mobile application that could change the way Glaswegians plan their night out. The WhereToNow app will feature information on Glasgow’s bars and restaurants, allowing users Read More …
Limited company incorporated in Scotland, company number SC371716. VAT Registered: GB 993 975 736
xSolutions365 Ltd, 3 Coates Place, Edinburgh, EH3 7AA, United Kingdom
Euan Andrews 
Martin Alderson 
Shane Rounce 
Nick Babenko 
Thomas Clulow 
Ross Oliver
…
Funny, I had been discussing this point with my older sister the other day, now I’ll have a single a lot more argument in my hand when it’ll come to confrontation when once more….
…
Hello there, I must say it is a clever posting. I’ll definitely be seeking in on this web site once again soon….
…
Yes! I agree what you say!…
…
Sweet publish….
…
Hi! Your submit rocks and is really a excellent understand!…
…
Yes, thank for your info a million! Ought to discover anybody organizing Tea Party. I would like to participate in organizing….
…
i truly like your web web site. Its quite informative. Goodbye!…
…
Thank you with the well-thought article. I’m in fact at operate proper now! So I must go off without having reading all I’d like. But, I set your blog on my RSS feed in order that I can read a lot more….
Thank you……
this is really cool, I like here!…
Thank you……
It is a highly rated websites.I have bookmarked the web page and also I will tell my buddies regarding it.Cheers…
…
Excellent post! I’ll subscribe perfect now wth my feedreader software!…
…
I wants to thank you for your endeavors you could have created in publishing this write-up. I am trusting the same greatest operate from you in the future too. Actually your fanciful writing abilities has inspired me to start my personal blog now. Genu…
…
i absolutely like your world wide web internet site. Its quite informative. Goodbye!…
Life goes on…
In three words I can explain everything I have learned about life: It goes on….
valuable post…
You got a really great blog I have been here reading for about half an hour. I am a newbie and your post is valuable for me….
…
That is a very good blog site post and I defer for you what you could have said right here. I have previously subscribed for your RSS feed in Firefox and will probably be your typical reader. Many thanks for your time in writing the publish….
…
Your point is valueble for me. Thanks!…
…
Hi, thank you so very much for these tips!…
This is my problem…
Amazingly webpage, I like how your website looks! The layout is great!…
…
You’ve got your place via much better than I at any time could, thank you!…
nikeoutlet.com
Just wanted to say……
happy new years!…
…
I thought that was extremeley fascinating. Thank you with the unusual data. I’ll keep subsequent this….
…
Good brief and this post helped me alot. Say thank you I looking for your facts….
…
This blog site is great. How did you come up witht he idea?…
…
I thought that was extremeley fascinating. Many thanks for that unusual info. I’ll retain next this….
Use “onecentcoupons” Hostgator coupon code to get $9.94 OFF the webhosting price. Retributory preserve the promo cypher spell inflict.
Georgia is my most loved vacationing spot! It might not be the most classy place to visit, but I still choose it over everywhere else.
Great blog it’s not often that I comment but I felt you deserve it.
Hi. I needed to drop a quick note to impart my thanks. I have been following blog for any month approximately and have plucked up a heap of good information in addition to relished the way in which you’ve structured your website. I’m trying to run my own blog however I believe its too general and that i want to focus more on smaller topics.
I’m just going to tell you up front that I have an idea for how you can get some more cost-effective web hosting. You can save a bunch of money by using multi-site webhosting and I have found the best offer available. Fast Next is the hosting company that I am talking about. I use them for all my websites. All plans are specially created for multi-domain hosting. The main hosting account comes with a multi-manager that allows you to completely control the functions of all of your websites from one control panel (but each domain gets its own control panel as well). With MultiManager, each domain has its own directory structure, mail accounts, ftp accounts, and separate domain control panel (cPanel). All servers are fully owned by the company and have been specially tailored for this type of hosting environment. The secure data center for these servers is US based and located just outside New York City. They have 55,000 square feet of data center floor space so they are prepared to grow as fast as the supply and demand chain expands. You can search all you want but you won’t find a better deal than this for true multi-domain hosting! For just $6.95 per month, you can have everything that you need, all in one place. Check It Out -> http://adf.ly/1WI5R
Nice post, I’ll be I check back frequently keep it up.
sehr schlechter artikel sie verfälschen die wahrheit
I don’t commonly comment but I gotta admit regards for the post on this great one : D.