WEBEXPEDITION18 Never Stop The Exploring

Just how awesome is CSS3? The main goal of this round-up, is to try to give answer to this question, and show you how powerfull CSS3 is. We will share with you new powerful CSS3 techniques which you will hopefully find very useful and valuable.
We also hope that techniques presented here, in this article, will encourage you to experiment with CSS3 and help design community to push CSS forward.

Shadow Experiments: Have Some Fun with CSS Shadows

Shadows are cool. We started out having to create our shadows in Photoshop and attaching them as background images. Now our lives are made easier with CSS.
Using a little HTML and some CSS we take a trip to the dark side of the moon, create a periodic table and make a radioactive love concoction. We even throw some CSS animations in there to add to the party.

Build a Kickbutt CSS-Only 3D Slideshow

This tutorial will show us how to create a 3D slideshow using only HTML and CSS. No JavaScript required!

Equal Height Column Layouts with Borders and Negative Margins in CSS

This techinque does not rely on any of the usual tricks. It does not use images, nor extra markup, nor CSS3, nor pseudo-classes, nor Javascript, nor absolute positioning. All it uses is border and negative margin.

The Man From Hollywood

The Man From Hollywood is a kinetic type animation using only HTML, CSS and Javascript. All of the animation is done using Webkit CSS transition, transforms, as well as standard CSS properties. Javascript just acts as a helper to turn CSS classnames on and off at the appropriate times. All of the content you see on the demo is HTML and CSS, no images were used.

3D Text Using Just CSS

3D text using nothing but CSS. No extra markup, no :before or :after mess, and no images. Just progressively enhancing CSS to add some flair to your work.

Using CSS Text-Shadow to Create Cool Text Effects

The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop’s Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. This isn’t all the text-shadow property is capable of though, by getting creative and playing around with the colours, offset and blurring we can create some clever and pretty cool text effects!

CSS3 Dropdown Menu

Create a Mac-like multi-level dropdown menu using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome.

Build Kick-Ass Practical CSS3 Buttons

What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons!

Create a Vibrant Digital Poster Design with CSS3

CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications. Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS.

Type Study: An All CSS Button

In certain situations, CSS can replace the inflexible image buttons we used in the past. Add on top of that the advances made in @font-face and you have yourself a powerful combination for creating a wide variety of interface elements that are reusable and will degrade well in older browsers.
Through the use of box-shadow, text-shadow, border-radius, and CSS gradients, we can create highly polished interface components that don’t require images.

Simulate Realism with CSS3

CSS3 has not been created for the sole purpose of making it easier and quicker to create a website but also so we can create much better sites than we ever could with CSS before. Here are a few examples of how CSS3 can improve the web.

The Shapes of CSS

The article presents various geometrical forms, all created using CSS and a single HTML element. The following forms are presented: square, rectangle, circle, oval, triangle, parallelogram, trapezoid, star, pentagon, hexagon, octagon, heart and infinity — all using CSS only.

Pure CSS Folded-Corner Effect

Create a simple CSS folded-corner effect without images or extra markup. It works well in all modern browsers and is best suited to designs with simple colour backgrounds.

Angled Content Mask with CSS

This article explains how to create angled CSS content “masks”. The idea is pretty simple and uses CSS transform property (rotation, to be more precise).

Subtle CSS3 Typography That You’d Swear Was Made in Photoshop

Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby!

Case Study: Getting Hardboiled with CSS3 2D Transforms

In this example we’ll use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards.

Let’s Create Paper with CSS

If we’re smart with our shadows, gradients, and borders, we can relatively easily create nice looking notepad paper with just CSS3. I’ll show you exactly how in this week’s video tutorial.

How To Create Customizable Mac Dock With CSS3 Only

This post will show you how to create a customizable Mac like Dockbar using only CSS3. The mouse over animations are implemented only with CSS3 transitions without the help of Javascript.

Awesome Overlays

An example of using border-image and other new properties to make killer image overlays.

Pure CSS3 Post Tags

This is a rather simple pure CSS trick you can use to style your blog post tags, usually placed at the bottom of the posts.

Type Study: A Layered Text Shadow

Learn how to create three-dimensional feel and emulate offset printing mishaps occasionally seen in newspapers, using CSS3 text-shadow property.

CSS Box-Shadow:Inset

It’d be nice to be able to add a vignetting effect to photos sans-Photoshop, but the way browsers interpret box-shadow:inset is to throw the shadow behind the image, rendering it invisible.

Create Beautiful CSS3 Typography

In this tutorial, we’ll look at how to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3. There are no images or other external resources, just pure CSS magic.

Applying a Clean & Imageless Design to an Article – Part I

In this first installment of a two part tutorial, I would like to show you how to use simple CSS to apply an attractive, well-balanced design to an article.

CSS3 Border-Radius & Rounded Avatars

I love this solution. It yields rounded avatars with no additional images or scripts loading, just an extra line of code.

We offer all kinds of certification exams including MB2-867. Our guaranteed MB6-204 exams are freely accessible all around the world of testking microsoft and 70-683.