wordpresshubs: CSS3

Affichage des articles dont le libellé est CSS3. Afficher tous les articles

samedi 12 novembre 2016

Getting Started With HTML5 & CSS3

alt="Getting Started With HTML5 & CSS3" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2011/10/html5-500x500_c.jpg" />

style="font-size: 15px; line-height: 1.5em;">Getting Started With HTML5 & CSS3

Using HTML5 and CSS3 can help you make a spectacular website, but, unfortunately most designers don’t use them because they aren’t supported by all browsers. Most Internet users are still using Internet Explorer, so the code will not display properly for most people. Since over half a website’s traffic is with a browser that does not support these two languages, most designers do not use them for popular websites.

Both HTML5 and CSS3 are still in progress, but it is a good idea to familiarize yourself with them now so you can use them when they are the new standard in web design. Both languages will help you get a clean look for your website using simpler code.

HTML5

id="floatright">src="http://www.webhostingsecretrevealed.net/images/2011/1005-7.jpg" alt="HTML 5" width="220" height="220" />

HTML stands for Hypertext Markup Language, and HTML5 is the latest version. Currently, it is only supported by a few browsers, but is expected to increase in popularity and usage in the next year. The entire language is expected to be fully written sometime in 2014, but some features are available now.

Since Flash is infamous for crashing and bugs, Apple does not allow it on iOS mobile phones and devices. As Apple increases in popularity, this creates a problem for developers who want the features of Flash, but also want their apps and websites viewable on an iOS device. HTML5 offers many of the same features of Flash, but runs with less bugs and more stability.

Google will be releasing a HTML5 version of YouTube soon, so this reaffirms how important this update will be in href="http://www.webhostingsecretrevealed.net/hosting-review/inmotion-hosting/" target="_blank">the future of the Internet. Mozilla’s Firefox, however, is resisting HTML5 and IE does not support it, so developers are hesitant to jump on the bandwagon. To further complicate things, different browsers may support different features of HTML5, and not all browsers will support all features. Designers must find out what features will be supported by different browsers when creating a website.

HTML5 lets you create smaller parts that combine and work together to make up the entire page. It allows the designer to create advanced pages with new features that aren’t always possible to create with older versions of HTML. HTML5 is built on HTML4, so designers can build upon existing code to improve the website. This eliminates the need to code the website from scratch, and new features can be added easily.

HTML5 Features

Cache allows the user to navigate web apps while offline.
Canvas element lets you place 2D images directly within the code.
Editing is easier. Change text quickly by adding contenteditable=“true” to an element.
Video and audio support is greatly improved, and you will be able to add both without using a plugin.
It does require a doctype so a browser can display the page in a standard mode, but the doctype has been simplified. Now it is <!DOCTYPE html>.

Why Use HTML5?

Uses WebSockets, so it loads faster than older versions of HTML.
Smartphone apps from all phone brands and models will be able to read one language.
Greater flexibility.
Video, images and audio are embedded within the code, so users do not need an outside plugin.
The language is getting more popular, so websites that do not use it will soon be outdated.
Is is based on HTML4, so you can added new elements within the code.
HTML5 coupled with CSS3 gives you many features and benefits not possible previously.

CSS3

CSS, which stands for Cascading Style Sheets, gives designers flexibility in presenting a website. It allows you to create better looking websites with unique features. Like HTML5, CSS3 isn’t supported by all browsers yet, but it is gaining popularity. CSS3 lets you add effects to the page without using Javascript or other plugins.

One disadvantage to using CSS is that you need to use filters to alter how things appear on the screen for different browsers. Internet Explorer is most known for being buggy and displaying CSS improperly, but Chrome and Firefox can also have bugs. Designers get around this by creating different codes for different browsers or utilize filters to block CSS completely.

CSS3 Features

Rounded Corners

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1005-1.jpg" alt="Sample of CSS3" width="750" />
Demo: href="http://psdslicer.com/" target="_blank">http://psdslicer.com/

Before, you had to use JavaScript to mask the corner of an image or create a separate image for just the corner. Now, you can round corners with the following code:

div {
border: 5px solid #434343;
padding: 10px;
background: #e3e3e3;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 500px;
}

RGBA Colors

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1005-2.jpg" alt="Sample of CSS3" width="750" />
Demo: href="http://vivid-ness.co.uk/" target="_blank">http://vivid-ness.co.uk/

You had to use a PHP script within the CSS code to trick the browser into displaying colors in RGBA. This added unnecessary code in the PHP file. Or, you had to memorize color codes for each color, but now you can specify the amount of each color and their opacity within the code.

Here is the code for CSS3:

background: rgba(150, 25, 150, 0.5);

Text Shadow

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1005-3.jpg" alt="Sample of CSS3" width="750" />
Demo: href="http://www.foundationsix.com/" target="_blank">http://www.foundationsix.com/

A text shadow adds a drop shadow below text to make it stand out or give it visual interest. Previously, the designer had to create two elements with the same text and give one a different color. The darker color was then offset by a couple of pixels and placed behind the other text. With CSS3, use the following code for text shadow:

h1 {
text-shadow: 0px 1px 1px rgba(0,0,0,.2);
}

Opacity Level

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1005-4.jpg" alt="Sample of CSS3" width="750" />
Demo: href="http://www.teehanlax.com/" target="_blank">http://www.teehanlax.com/

In previous version of CSS, you had to create PNG files with transparency or use filters for Internet Explorer. Now, you can use the following code:

opacity: 0.5;

Box Shadow

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1005-5.jpg" alt="Sample of CSS3" width="750" />
Demo: href="http://glo.id.au/" target="_blank">http://glo.id.au/

Box shadows let content slide under another area, such as the page’s footer. It makes it look like the content is sinking into the bottom of the website. With CSS3, you don’t have to create an image for this effect. You can also make the shadow appear by hovering over the area.

Before CSS3, you had to use a JavaScript plugin for a box shadow or create an image of the shadow. Now, you can use the following code with CSS3 for a box shadow:

.blogPost img {
margin: 22px 0;
box-shadow: 3px 3px 7px #777;
}

Add Fonts

Previously, websites could only display a font found on the visitor’s computer. Now you can upload a font file to your server and use CSS to call upon that file to display on the page.

Border Images

Now you can use any image as a border rather than using a boring line or dots as a border.

Transform

Lets you code how big you want an area to be when the user hovers over it.

Resizing Elements

Now working in Chrome, Firefox and Safari, this gives users a tool to resize elements. Use the following code:

div {
resize: both;
}

Multiple Backgrounds

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1005-6.jpg" alt="Sample of CSS3" width="750" />
Demo: href="http://www.hangingupthemoon.com/">http://www.hangingupthemoon.com/

Lets you overlay more than one background on a single page with the following code:

body {
background:
url(../images/bottom-left.png) top right fixed no-repeat,
url(../images/bottom-right.png) top left fixed no-repeat,
url(../images/top-left.png) bottom left fixed no-repeat,
url(../images/top-right.png) bottom right fixed no-repeat;
background-color:#ffffff;
}

Final Thoughts

Although not all browsers currently support HTML5 and CSS3, they will in the future. More and more web users and switching from Internet Explorer to Mozilla Firefox or Google Chrome, so designers need to create web pages that work on these browsers and with the features they support.

Both of these languages used together let you reduce or eliminate the need for third-part plugins, which makes it easier for visitors to use your website. Now you can embed pictures, audio and video directly within the website so pages load faster for users.

The two languages provide you with features that were not available before without having to use multiple programs. Now you can code your page quicker and easier with just two languages rather than using outside plugins that require learning yet another programming or web design language. Pages will not display faster and users do not have to waste time downloading the latest versions of plugins.

Both languages have the flexibility of being used for different browsers. Turn off portions of the code for browsers that do not support that code, and use feature rich code for browsers that do support it. HTML5 and CSS3 will soon be supported by smart phones and mobile devices, so designers can use the same page for both mobile and standard versions.

Page 26 – Web Hosting Secret Revealed

Make Your Website Beautiful: 20 Must-Read CSS3 Tutorials

alt="Make Your Website Beautiful: 20 Must-Read CSS3 Tutorials" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2011/11/css3-500x200_c.jpg" />

With the growing popularity of CSS3 and HTML5, developers are renovating the online world in which we live. As this technology becomes more widespread the websites we create will be more diverse, creative, interactive, and mobile friendly. I have compiled 20 of the coolest CSS3 tutorials available to both inspire you and walk you through the steps on how to develop your websites so it stands out above the crowd!

1. Slide Down Box Menu

href="http://tympanus.net/Tutorials/SlideDownBoxMenu/">class="border" alt=" Slide Down Box Menu " src="http://www.webhostingsecretrevealed.net/images/2011/slidedownboxmenu.JPG" width="750" />

Slide Down Box Menu: Navigation is something all of your visitors will notice. In this tutorial learn how to create a unique sliding box navigation.

2. Elegant Accordion with jQuery and CSS3

href=" http://tympanus.net/Tutorials/ElegantAccordion/">class="border" alt=" Elegant Accordion with jQuery and CSS3" src="http://www.webhostingsecretrevealed.net/images/2011/elegantaccordian.JPG" width="750" />

Elegant Accordion with jQuery and CSS3: Codrops developed another great tutorial outlining how to use jQuery to create vertical accordion tabs that slide out when hovering and CSS3 to enhance the looks.

3. Minimalistic Navigation

href=" http://demo.tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/demo.html ">class="border" alt="Minimalistic Navigation" src="http://www.webhostingsecretrevealed.net/images/2011/minimalisticnavigation.JPG" width="750" />

Minimalistic Navigation: A very simplistic take at navigation with a very easy how-to.

4. Making a Photobooth Web App

href=" http://demo.tutorialzine.com/2011/04/jquery-webcam-photobooth/ ">class="border" alt=" Making a Photobooth Web App " src="http://www.webhostingsecretrevealed.net/images/2011/photobooth.JPG" width="750" />

Making a Photobooth Web App: Learn how to build a photobooth that allows your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

5. Image Gallery

href=" http://inspectelement.com/demos/css3/3dgallery/ ">class="border" alt="Image Gallery " src="http://www.webhostingsecretrevealed.net/images/2011/imagegallery.JPG" width="750" />

Image Gallery: This tutorial shows you how to create a stunning image gallery in CSS3 that remains compatible with browsers that are not quite up-to-date.

6. Music Player Menu

href="http://www.webstuffshare.com/2010/05/css3-music-player-menu/">class="border" alt="Music Player Menu" src="http://www.webhostingsecretrevealed.net/images/2011/musicplayermenu.JPG" width="750" />

CSS3 Music Player Menu: This tutorial will show you how to create a Music Player Menu using only CSS3 properties instead of using images.

7. Typography

href="http://net.tutsplus.com/tutorials/html-css-techniques/subtle-css3-typography-that-youd-swear-was-made-in-photoshop/">class="border" alt="Typography" src="http://www.webhostingsecretrevealed.net/images/2011/css3typography.JPG" width="750" />

CSS3 Typography: You’d swear this text was created using Photoshop, but no, it’s all CSS3!

8. Drop Down Menu with Integrated Forms

href="http://addyosmani.com/blog/formbox/">class="border" alt=" Drop Down Menu with Integrated Forms " src="http://www.webhostingsecretrevealed.net/images/2011/integratedform.JPG" width="750" />

Drop Down Menu with Integrated Forms: This tutorial will show you how to couple jQuery and CSS3 to integrate forms with a dropdown menu.

9. Animated Vignette Buttons

href="http://www.mightymeta.co.uk/1075/css3-animated-vignette-buttons/">class="border" alt="Animated Vignette Buttons" src="http://www.webhostingsecretrevealed.net/images/2011/vignettebutton.JPG" width="750" />

Animated Vignette Buttons: Using multiple backgrounds in CSS3, this tutorial shows you how to create a unique hover effect.

10. Dynamic Stack of Cards

href="http://designlovr.com/use-css3-to-create-a-dynamic-stack-of-index-cards/">class="border" alt="Dynamic Stack of Cards" src="http://www.webhostingsecretrevealed.net/images/2011/stackofcards.JPG" width="750" />

Dynamic Stack of Cards: This tutorial will help you dive into CSS3 transformations and transitions.

11. My Notes

href=" http://boxtuffs.com/stuff/my-notes/">class="border" alt="My Notes" src="http://www.webhostingsecretrevealed.net/images/2011/mynotes.JPG" width="750" />

My Notes: This is a a handy little tool that allows you to add and edit notes.

12. Contextual Slideout Tutorial

href="http://tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/">class="border" alt="Contextual Slideout Tutorial" src="http://www.webhostingsecretrevealed.net/images/2011/slideoutcontext.JPG" width="750" />

Contextual Slideout Tutorial: This tutorial will walk you through how to create easily configurable contextual slideouts.

13. Cufonized Fly Out Menu

href="http://tympanus.net/Tutorials/CufonizedFlyOutMenu/">class="border" alt="Cufonized Fly Out Menu" src="http://www.webhostingsecretrevealed.net/images/2011/cufonizedflyoutmenu.JPG" width="750" />

Cufonized Fly Out Menu: This unique take on menu adds a little extra flavor to the navigation.

14. Bottom Slide Out Menu

href="http://www.tympanus.net/Tutorials/FreshBottomSlideOutMenu/">class="border" alt="Bottom Slide Out Menu" src="http://www.webhostingsecretrevealed.net/images/2011/bottomblideoutmenu.JPG" width="750" />

Bottom Slide Out Menu: This tutorial offers another unique way to set your navigation apart from normal.

15. Slidebox

href="http://tympanus.net/Development/Slicebox/">class="border" alt="Slicebox" src="http://www.webhostingsecretrevealed.net/images/2011/slicebox.JPG" width="750" />

Slicebox: This is a great new image slider that has a built in fallback for browsers that don’t support the code yet.

16. Multi-Step Signup Form

href="http://webexpedition18.com/articles/how-to-create-a-multi-step-signup-form-with-css3-and-jquery/">class="border" alt="Multi-Step Signup Form" src="http://www.webhostingsecretrevealed.net/images/2011/multistepform.JPG" width="750" />

Multi-Step Signup Form: A simple tutorial to create a multi-step form, including a progress bar!

17. Slide Out Boxes

href="http://tympanus.net/codrops/2010/07/21/related-posts-slide-out-boxes/">class="border" alt="Slide Out Boxes" src="http://www.webhostingsecretrevealed.net/images/2011/slideoutboxes.JPG" width="750" />

Slide Out Boxes: This tutorial will help you make a widget to help your related blogs stand out.

18. Interactive Photo Desk

href="http://tympanus.net/codrops/2010/07/01/interactive-photo-desk/">class="border" alt="Interactive Photo Desk" src="http://www.webhostingsecretrevealed.net/images/2011/photodesk.JPG" width="750" />

Interactive Photo Desk: This is a fun, interactive way to display pictures to your website viewers.

19. Simple Toolbar

href="http://www.pvmgarage.com/2009/12/nice-and-simple-toolbar-for-your-website-with-css3-and-jquery/">class="border" alt="Simple Toolbar" src="http://www.webhostingsecretrevealed.net/images/2011/toolbar.JPG" width="750" />

Simple Toolbar: Toolbars have become very popular on websites and this tutorial will show you how to easily create one.

20. Content Slider

href=" http://tympanus.net/codrops/2010/04/28/pretty-simple-content-slider-with-jquery-and-css3/">class="border" alt="Content Slider" src="http://www.webhostingsecretrevealed.net/images/2011/contentslider.JPG" width="750" />

Content Slider: This tutorial outlines an easy way to rotate the background at the same time the heading and descriptions are sliding in and out.

Page 26 – Web Hosting Secret Revealed

30 Latest CSS3 Tutorials You Probably Have Not Read Before

alt="30 Latest CSS3 Tutorials You Probably Have Not Read Before" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2012/04/hello-500x288_c.jpg" />

30 must-read CSS3 tutorials that are guaranteed to bring more life and interaction to your website by making it dynamic. You can use CSS3, along with jQuery, to increase the creativity and productivity of your website while keeping your website easy to access and navigate.

1. How to Create Speech Bubbles with CSS3

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-1.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

So you know how to create speech bubbles by using HTML, Photoshop, or Javascript, but what about CSS3? Speech bubbles are a fun effect, and this tutorial teaches you how to make your own speech bubbles using CSS 2.1 and enhanced with CSS3.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://nicolasgallagher.com/pure-css-speech-bubbles/">Read this tutorial now.

2. Create a Fun Animated Navigation Menu with CSS3

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-2.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

Just like how a clean restaurant or shop can attract more visitors, the same goes to websites with clean and creative navigations. This tutorial helps you create a navigation that is user-friendly and has more personality.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://designshack.net/articles/css/creating-a-fun-animated-navigation-menu-with-pure-css">Read this tutorial now.

3. Editable CSS3 Image Gallery

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-3.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

A typical image gallery is one that shows a grid of images that pop up or zooms in when clicked. This tutorial teaches you to create an image gallery that offers more visual treats to your visitors.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://css-tricks.com/video-screencasts/74-editable-css3-image-gallery/">Read this tutorial now.

4. Create Beautiful CSS3 Typography

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-4.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

When we hear the word "Typography," the first two things that pop up in our mind are Photoshop and InDesign. Did you know that you can create beautiful typography using pure CSS3 as well? This tutorial teaches you how it can be done.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://blog.echoenduring.com/2010/05/13/create-beautiful-css3-typography/">Read this tutorial now.

5. How to Make a Tabbed Navigation Using CSS3

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS-5.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

This tutorial teaches you how to add animations to your tabbed navigation using CSS3.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html">Read this tutorial now.

6. Create a CSS3 Progress Bar

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-6.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

Ever played a video game and had to look at an animated loading screen while waiting for your game to load? Now you can create something similar for your website visitors using this tutorial.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://www.catswhocode.com/blog/how-to-create-a-kick-ass-css3-progress-bar">Read this tutorial now.

7. Awesome Cufonized Fly-Out Menu Using CSS3

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-7.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

This tutorial teaches you, using jQuery and CSS3, how to build a cufonized menu that moves a hover-state item that adjusts to the item’s width when hovered over it, and a description bar also slides from the left side of the page towards the item.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://tympanus.net/codrops/2010/06/28/awesome-cufonized-fly-out-menu/">Read this tutorial now

8. Slide Down Box Menu with jQuery and CSS3

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-8.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

How can you create a slide down box menu that is simplistic yet attractive at the same time? This tutorial teaches you to create a sliding box menu that slides out an item while a thumbnail pops up. The tutorial also includes more tricks that you can add to your menu as you read through the whole tutorial.

9. Sticky Notes with CSS3

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-9.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

So you love buying Post-It Notes in real life and using the Stickies App on your laptop. Want to learn how to create these fun little notes with CSS3? Check this tutorial out.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://accidentalhacker.com/post/15521210350/sticky-notes-with-css3">Read this tutorial now

10. CSS: Transition Timing Functions

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-10.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

This tutorial touches base on the usage of animation using CSS and teaches you how to properly control the duration and speed of a transition.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://www.the-art-of-web.com/css/timing-function/">Read this tutorial now

11. How to Create CSS3 Buttons

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-11.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

How do you make buttons that are not over-the-top yet still attractive to your visitors? Check this tutorial out.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://designmodo.com/create-css3-buttons/">Read this tutorial now

12. How to Create a Cool Anaglyphic Text Effect with CSS

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-12.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

Ever heard of anaglyphs? Anaglyphs are those 3d stereoscopic images that can be viewed through colored glasses, commonly red, left, and cyan right. Learn how to add this effect to your text using CSS by reading this tutorial.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://line25.com/tutorials/how-to-create-a-cool-anaglyphic-text-effect-with-css">Read this tutorial now

13. Create Curving Text with CSS3 and jQuery

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-13.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

Using a jQuery plugin, Arctext.js, and CSS3, this tutorial teaches you how to arrange each letter along a curved path.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/">Read this tutorial now

14. Create a Minimal Single Page Portfolio with HTML5/CSS3

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-14.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

Ever looked at a neat one-page portfolio online and wanted one for your own? Read this tutorial to learn how.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://designwoop.com/2012/02/tutorial-create-a-minimal-single-page-portfolio-with-html5css3/">Read this tutorial now

15. How to Create Depth and Nice 3D Ribbons Only Using CSS3

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-15.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

This tutorial teaches you how to create the illusion of depth in order to create nice 3D ribbons by only using CSS3.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://www.pvmgarage.com/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/">Read this tutorial now

16. Contact Form with No Images Using CSS3 HTML5

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-16.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

While website owners usually use images in addition to HTML to create contact forms, there’s actually a way to create a contact form just by HTML5 and CSS3. Read this tutorial to learn how.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://www.onextrapixel.com/2012/01/23/full-css3-html5-contact-form-with-no-images/">Read this tutorial now

17. How to Create a Stylish Image Content Slider in Pure CSS3

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-17.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

This tutorial teaches you how to create a CSS3 only image slider that is "inspired on the Futurico User Interface by Vladimir Kudinov."

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://designmodo.com/slider-css3/">Read this tutorial now

18. CSS3 Breadcrumbs

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-18.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

If you have a website or blog that has a lot pages and sub-directories or sub-levels, using breadcrumbs is a good way to let your visitors navigate back and forth to any pages that they wish to visit.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://www.red-team-design.com/css3-breadcrumbs">Read this tutorial now

19. Fullscreen Background Image Slideshow with CSS3

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-19.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

Just like looking at a full-sized billboard while driving on a highway, a fullscreen background image slideshow is an attractive way to show off and/or advertise your images to your website visitors.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/">Read this tutorial now

20. Sliding Image Panels with CSS3

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-20.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

This tutorial teaches you how to turn background images into panels and animate them when they are clicked. Very slick and easy to follow tutorial.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/">Read this tutorial now

21. Gradients, Rounded Corners and Transforms with CSS3

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-21.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

This tutorial teaches you an easy way to create buttons and interesting shapes using CSS3.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://www.ravenshoegroup.com/blog/2012/website-design/css3-tutorial-gradients-rounded-corners-and-transforms-part-2">Read this tutorial now

22. Design a Beautiful CSS3 Search Form

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-22.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

Ever browsed through a website, saw a plain and unattractive search form, and got turned off instantly? This tutorial teaches you how to avoid that to happen to your own website by creating a beautiful CSS3 search form.

23. Circle Navigation Effect with CSS3

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-23.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

Hover effects can add more fun and liveliness to your website. This tutorial teaches you how to create a circle navigation effect for an image navigation using CSS3.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://tympanus.net/codrops/2011/10/10/circle-navigation-effect-with-css3/">Read this tutorial now

24. Animated Web Banners with CSS3

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-24.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

Admit it, there are times you look at a web banner and thought, "This is way too cheesy" or "I wish this ad would just go away." Learn how to create an animated web banners that are effective with CSS3 by reading this tutorial.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://tympanus.net/codrops/2012/01/10/animated-web-banners-with-css3/">Read this tutorial now

25. CSS3 Spinning Social Media Icons

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-25.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

Social media has become a very important part of the Internet world, and one of the ways that website or blog owners promote themselves is by posting social media buttons on their website. How about adding a little animation to your buttons? Read this tutorial to learn how.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://www.paulund.co.uk/css3-spinning-social-media-icons">Read this tutorial now

26. Orman Clark’s Vertical Navigation Menu: The CSS3 Version

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-26.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

There are lots of tutorials on how to create horizontal navigation menus out there, but what about a vertical navigation menu? This tutorial not only teaches you how to create a vertical navigation menu, it also teaches you how to create one with CSS3 and jQuery using the least amount of images possible.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://webdesign.tutsplus.com/tutorials/site-elements/orman-clarks-vertical-navigation-menu-the-css3-version/">Read this tutorial now

27. Image Map with CSS3 & jQuery Tooltips

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-27.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

Love traveling? Thinking of starting a website for globetrotters like you? This tutorial teaches you how to create an image map with pins and tooltips.

28. How to Design a Dribble-Style Homepage Layout

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-28.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

So you have a website and a bunch of images, and you want to create a system where your content is highlighted using your images. This tutorial teaches you how that can be done.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://spyrestudios.com/how-to-design-a-dribbble-style-homepage-layout/">Read this tutorial now

29. Creative CSS3 Animation Menus

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-29.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

This tutorial teaches you how to make your own creative menu hover effects for your website using CSS3.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/">Read this tutorial now

30. Filter Functionality with CSS3

src="http://www.webhostingsecretrevealed.net/images/2012/css3/Top30CSS3-30.jpg" class="border" width="750px" alt="Latest CSS3 Tutorials" />

This tutorial teaches you how, by checking a checkbox or a radio button, you can toggle the states of items of a specific type with a filter created using CSS3.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text" style="color:inherit !important;">
target="_blank" href="http://tympanus.net/codrops/2012/01/09/filter-functionality-with-css3/">Read this tutorial now

Page 24 – Web Hosting Secret Revealed