"
We listing certain useful categories as: top navigation’s, link menus, latest css3 buttons, text effects using css3, image galleries over and done with css3 and alternate animation effects of css3.
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! Let’s take a look in this video quick tip.
CSS3 Loading Spinner
I made a little CSS3 rotate-y loading graphic thing just for kicks. Here’s an animated GIF of the glory as it appears in WebKit.
Slide Down Box Menu with jQuery and CSS3
In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.
Create a Multi Color and Size CSS3 Buttons
Today we are going to create some CSS3 Buttons which are available in multi color and size. There are lots of tutorials on creating css3 buttons over internet, But we have created our own css3 buttons for our various wordpress themes which we sold on wordpress marketplaces, so we thought why not to share that buttons with you guyz. So lets follow the steps for creating css3 buttons.First of all we need to have a simple HTML mark up for our button, here we need to define the class for our link.. like the main class as button then the size class as small, medium or large and then the color class as red, blue, green etc etc.
CSS3 Minimalistic Navigation Menu
As you have probably heard by now, CSS3 animations are a powerful tool, which enables you to create animations which run without the need of applying additional scripting to the page. What is even better, in the next generation of browsers we will have even more powerful tools, including 3D transformations (already present in Safari).But what difference does it make for us today? At the moment only three browsers give you the ability to animate CSS properties – Chrome, Safari and Opera, which together take up only a small part of the browser market. Firefox is expected to soon join the club, and with the impending release of IE9, it suddenly makes sense to start leveraging this technique.
So today we are making something practical – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.
Having Fun With CSS3: Spinning Newspapers
Imagine a cop drama taking place in the 1930s. After a streak of bank heists, a young detective is given the case of his life. He accepts the challenge, and after grueling months of hard work and life-threatening situations, he manages to bring the bad guys to justice.What follows is a classical device used by film makers of the period – newspapers flashing and spinning towards the camera, praising the heroic feats of our protagonist. So lets have some fun and build this classical scene using the CSS3 animations capabilities of the new versions of Firefox, Chrome and Safari, picking useful techniques along the way.
Creating a PHP and CSS3 Powered About Page
In this tutorial, we will be creating a simple about page that is powered by PHP, HTML5 and CSS3. It will present your contact information to your visitors, with an option for downloading it as a vCard (useful for importing it in third party applications).You can use today’s example as a placeholder for your upcoming personal website, or as an actual about page.
Create Animated Landscape using Pure CSS3
Some months ago we have created an animated landscape using Photoshop and jQuery. So today we just decided to create some what same effect with pure CSS3 technology. Below is the stepwise instruction to create animated landscape with css3.
How to Create a CSS3 Tabbed Navigation
Hiya folks! Today we’re going to have fun creating a CSS3 Tabbed Navigation. In this tut we’re going to be creating the darkwash jean version out of the many different themes available for these awesome tabs just because… #1 we can and #2, there is more styling involved and I can show you more neat tricks with CSS3 than with the other styles. If you prefer, there are much simpler themes in the source files so feel free to follow along with those as the structure is pretty much the same.Note: Support for IE7 & 8 is there but limited in that the functionality works perfectly but some of the overlay styles aren’t treated properly. If not for the wonderful and awesome CSSPIE and Dean Edwards fix, there would be no support for any version other than IE9.
Ok, now that that’s out of the way, I think it’s time we got started!
Create Animated Price Grid Using CSS3
So here today we will create a animated Price grid using css3 only. No Jquery No Images No flash at all.
How to Create a CSS3 Wheel Menu
There’s no better way to learn CSS3 than to get your hands dirty on an actual project and that’s exactly what we’re going to do. I’m going to teach you how to create an awesome, layered CSS3 wheel menu using a few beginner to advanced CSS techniques. So break out your favorite text editor or IDE and let’s get started on some CSS3 magic!Today you’ll be learning how to create the candy cane teardrop out of the many different styles and color variations available. You will receive all variations in the source files. Also as an added bonus I’ve added a little bit of optional Javascript so that you can rotate your images depending on the hovered menu item. The source file even comes with its own documentation!
Note: Support for IE is limited at the moment. We’ll mostly be going through this for the purpose of pushing the envelope with what we can do in CSS3… but as with all things on the edge of practicality, it means sacrificing a bit of stability. We will address the IE topic at the end of the tutorial though!
Fancy Image Hover Using CSS3
So here we will try to create fancy image hover with css3 as you all know we can have cool image hover effect using jquery but now using transform and transition properties of css3 we can have the same cooler effect with css3 only.
Apple Navigation with CSS3
Apple is known for very clean design and if you have been to their website in the last few years you’ve seen their primary navigation. It’s a staple of the apple website and today I wanted to take a crack at recreating the Apple navigation using CSS3 techniques.
How to Build a Kick-Butt CSS3 Mega Drop-Down Menu
Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.
Build Awesome 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! I’ll show you how in today’s video tutorial.
Animated Navigation Menu with CSS3
Since Last some days we are writing articles on CSS3. And today we will learn here to create animated navigation menu with css3. Here will try to create animated menu with css3 and also will create the same animation using jQuery. So lets start..
Grooveshark Search with CSS3
I am a huge fan of the Grooveshark interface. Every time I look at the site I start to dissect the UI and turn it into code in my head. I wanted to see if I could create the search box only using HTML and CSS. Sadly there is one image and it’s the search icon in the button. I recently read a tutorial that shows you how to create a custom font and use the font-face property for icons, but they didn’t have the search icon I needed.
CSS3 Chess Board
I was browsing the web today and found something exciting. I noticed that there are unicode characters for chess pieces. Always looking for ways to play with CSS3 I decided to try and build a chess board using my new best friend :nth-child and some unicode characters.
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.
How to create a kick-ass CSS3 progress bar
As I’ve shown you in some of my recent posts, the new features introduced in CSS3 allows developers to create stunning visual effects. Today, let’s create a fancy progress bar using CSS3 and jQuery, but no Flash or even images.
Impossible Things With CSS Now Possible With CSS3
Today will discuss about some basic properties of css3. Last week one of our reader asked me to post an article based on css3 basic and advanced properties so today we come up with some css3 basic properties.
How to Create a Modern Ribbon Banner Navigation Bar with Pure HTML/CSS3
As CSS3 becomes more robust and is more widely supported, the options for fun modern design elements that can be created without graphics are virtually limitless! For a recent project, I decided to see if I could create a centered ribbon banner with pure CSS3. This tutorial will walk you through how it was done.As it turns out, it’s actually quite easy, using only simple, semantic HTML and some CSS3 trickery thanks to the magic of the the border-width property. The only caveat: As with all new CSS3 techniques, it can act a bit wonky in some IE browsers… we’ll address that at the end of the tutorial.
Animated Wicked CSS3 3D Bar Chart
Do you remember the Wicked CSS3 3d bar chart that I placed online a couple of weeks ago? Paul Irish left a comment, requesting for an example with transitions. My reply was that I was already working on that, and today I’m proud to release the animated wicked CSS3 3d bar chart.The principle is the same as the previous version: Create a beautiful 3d bar chart. But this time, we don’t create a “stacked” one (since animation would be hard), but several bars placed under each other. When hovering, the animation shows and the bar will grow to the appropriate size.
Create dropdown menus with CSS only
I rarely see drop down menus that behave like drop down lists, but I really like them. I noticed, however, that people often use JavaScript to achieve this effect. Actually, there is a simple way to do it only with CSS.
jQuery quickie: Colourful rating system with CSS3
Today, we’re going to do a relatively simple jQuery tutorial. Rating systems are used a lot on websites, for example to rate how good a certain product, article or comment is. I slightly wanted to improve this idea, by making it more visually attractive.By using the jQuery Color plugin, we can animate colours. Simply use the animate() function from jQuery to have colours fade to another colour. When using this technique, combined with some CSS3 feautures (rounded corners and drop shadow), we can create a Colourful rating system.
Photobooth with PHP, jQuery and CSS3
In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.As you might know, it is not possible to access web cameras and other peripheral devices directly from JavaScript (and it won’t be for some time). However there is a solution to our problem – we can use a flash movie. Flash has perfect web camera support, and is installed on nearly all internet – enabled computers.
The solution we are going to use for this app is webcam.js. It is a JavaScript wrapper around flash’s API that gives us control over the user’s webcam.
Better Check Boxes with jQuery and CSS
In this short tutorial, we will be creating a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable.
Dark Menu: Pure Css3 Two Level Menu [Tutorial]
Some days ago we released a Freebie called Dark Menu in Free PSD and in this easy to follow tutorial you will learn how to create this two level Dark Menu in HTML and Pure CSS3. No Javascript or Images has been used in the creation of this menu and I hope that you can learn a few techniques that will help you in future projects.Now, if you aren’t so familiar with CSS3 you can either learn about it at CSS3.info or at W3Schools. You can also use this online CSS3 generator to help you create these styles easily. Off course you need to put all HTML code inside an HTML document and all the CSS styles either in the HTML document header or in a separate CSS file. All colors, effects, shadows are taken from the Dark Menu PSD file. Now let’s start our tutorial.
jSlickmenu: A jQuery plugin for slick CSS3 menus
After releasing several jQuery scripts, I wanted to take the whole jQuery programming to another level. For that reason, I’m proud to release my first jQuery plugin for everyone to use.The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3 features likes rotation and shadows, this plugin can really lift up your design. It’s fairly easy to use, highly customizable and pretty cool (and fun!) to see.
Getting Clever with CSS3 Shadows
HTML5 logo using CSS3
As you probably found out, yesterday, the The World-Wide Web Consortium (W3C) has unveiled the HTML5 Logo. They launched more than a logo as they got also a full branding, including badges, t-shirts and stickers.So, I suppose that’s a good thing, that HTML5 got some branding, sounds very interesting! While looking at it and admiring it, as I find it very nice, I thought about how can I do it with CSS3 (typically for me).
Cool notification messages with CSS3 & Jquery
Nowadays, UX is a key factor when it comes about creating/designing a product or system. To keep users happy, developers struggle to create a good experience and a better interactivity.UX is a term used to describe the overall experience and satisfaction a user has when using a product or system. So, a good UX will always make users happy and businesses more successful. Notification messages are an important part of the user experience and you can’t afford to omit them. A notification alert message should appear every time the user perform important tasks.
In this article, you’ll learn how to create some alert messages with CSS3 and Jquery.
Sexy CSS3 menu
One of the most common elements when talking about a website or an application design is definitely the menu navigation. No matter if vertical or horizontal, simple or complex, a menu is essential and it has to look that way.In today’s article, you’ll learn how to create a good looking menu using some CSS3 magic.
Pure CSS3 accordion
A while ago, I wrote about the CSS3 :target pseudo-class and how can that help you achieve cool results. Today you’ll learn how to create a pretty simple animated accordion with its help.
Rotating billboard using only CSS3
When I just finished creating the animated 3d helix, I came up with an idea that would look a lot like that one. Instead of having the flip animation on top of each other, I wanted to have them placed next to each other. This looks a lot like an animation most of you will know; a rotating billboard.When you only show two images, it would be pretty simple since the CSS would look a lot like the CSS from my previous demo. That’s why I wanted to take it just a little step further and let the billboard show three images.
Making a CSS3 Animated Menu
In this short tutorial, we will be using the power of CSS3 effects and transitions, to build a JavaScript-free animated navigation menu which you can use to add a polished look to your website or template. We will be using some neat features such as the :target pseudo selector and :after elements.
Related Posts Slide Out Boxes with jQuery and CSS3
The other day we were wondering how we could show our visitors more of our works. It’s normal that in a blog older posts get forgotten and even if something might still be very interesting and relevant, it get’s lost under the pile of new stuff. So we decided to create something like a little widget that can be used to show related posts in any page. The main idea is to show a fixed list at the right side of the screen with some thumbnails sticking out. When the user hovers over the items, they slide out, revealing the title and two links, one for the related article itself and one for the demo. Additionally, we will have a shuffle button under the list. When pressed, the list gets randomly refreshed with related posts.Before we use this, we of course, want to share it with you
So, let’s get started!
CSS3 Dropdown Menu
While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.
How to Create A Multi-Step Signup Form With CSS3 and jQuery
In this tutorial we will see how to create a simple multi-step signup form using CSS3 and jQuery. To spice up things a bit, we will include progress bar with the form, so the users will be able to see the percentage of form completion.
Take Your Design To The Next Level With CSS3
Cascading Style Sheets were introduced 13 years ago, and the widely adopted CSS 2.1 standard has existed for 11 years now. When we look at websites that were created 11 years ago, it’s clear that we are a thousand miles away from that era. It is quite remarkable how much Web development has evolved over the years, in a way we would never have imagined then.So why is it that, when it comes to CSS, we’re stuck in the past and so afraid of experimenting? Why is it that we still use inconvenient CSS hacks and JavaScript-dependent techniques for styling? Why can’t we make use of the rich CSS3 features and tools available in modern Web browsers and take the quality of our designs to the next level?
It’s time to introduce CSS3 features into our projects and not be afraid to gradually incorporate CSS3 properties and selectors in our style sheets. Making our clients aware of the advantages of CSS3 (and letting older deprecated browsers fade away) is in our power, and we should act on it, especially if it means making websites more flexible and reducing development and maintenance costs.
In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we’ll know a bit of what to expect from CSS3 and how we can use its new features in our projects.
"
Posted in: 
