Tutorial Lounge [Learn Step bu step]

---

Valuable CSS3 Tutorials for the Creative Designers Posted: 26 Apr 2012 07:56 AM PDT In this era of internet and technology there are lots of field, if a person is professional in his field he can earn a sufficient income every month and designing is also one of them. If we talk about web page designing, CSS3 is also part and parcel of web designing and CSS3 has got a huge success to create very complicated and dense details by austerely using CSS and rejection of images. We can say that CSS3 is a wonderful mean that every designer can use to create attractive and eye-catching designs with great effectiveness. Here I am also going to present some useful dose to the designer in the form of CSS3 tutorials, below you can see CSS3 Tutorials that can prove useful for every designer to become creative and professional. How to Create Social Media Icons with CSS3 Its being so long when I posted a Pure CSS3 article i.e. Sexy Image Hover Effect. So, today I came up with some social site icons made in only CSS3. No images are used for this. To create social icons I have used gradient,radius property. View Tutorial CSS Refreshers: Borders Sure, we're all familiar with borders. Is there anything new that could possibly be introduced? Well, I bet there's quite a few things in this article that you never knew about! Not only can CSS3 be used to create rounded corners, but plain-ole' CSS can also be wrestled into displaying custom shapes. View Tutorial Sass vs. LESS vs. Stylus: Preprocessor Shootout In this article, we will be covering the various features and benefits of using three different preprocessors—Sass, LESS, and Stylus. View Tutorial FormBox – A jQuery & CSS3 Drop-Down Menu With Integrated Forms When designing the layout for a website there's one thing that we as designers are always conscious of – making things easier for users. No matter what it is your site offers, you're still going to need to balance the interface in a way that keeps it very easy for users to find and perform core site functions around your site or service, ideally without having to load up a completely different page. View Tutorial 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. View Tutorial  3d animation using pure CSS3 I was absolutely stunned by the example And all that Malarkey created and was wondering how he was able to produce that kind of effect. I knew about the CSS3 transition property, but how to create that 3d effect? View Tutorial CSS3 quickie: The Facebook loading animation I today present you a CSS3 quickie. Just a short walkthrough to create a simple effect, to learn some basic stuff. In this case, we’re recreating the Facebook loading animation using CSS3 animations. I’m pretty sure that you’ve seen the animation before, if you’re a Facebook user. View Tutorial jSlickmenu: A jQuery plugin for slick CSS3 menus The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3features 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. View Tutorial Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5 In this tutorial, you'll learn how to transform an HTML list into a wall of "sticky notes" that look and work like the following… View 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. View Tutorial Create an Advanced CSS3 Menu – Version 2 This tutorial is still being linked and used by many people, so I thought I would revisit it and release an even better version. This update brings a lot of improvements including code, customization, user experience and is even more scalable than before. View Tutorial [CodeSnippet] CSS3 Flying Menu This is a request post from my reader. He asks me how to create a simple menu that have a flying effect when user hovering them using only CSS. As we know CSS3 is more powerful with its transition property, it help us creating animation without any JavaScript or even Flash help. We'll use them for creating the flying effect and here is the result. Enjoy! View Tutorial How to Create a Beautiful Icon with CSS3 Today, I'd like to show you a neat trick. We'll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element. View Tutorial 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. View Tutorial Halftone Navigation Menu With jQuery & CSS3 Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well. View Tutorial Making an Impressive Product Showcase with CSS3 A product page is any page on your website that showcases a product. It has to describe its features, give some screenshots, and be descriptive. Naturally, this is the place where you build up the visitor's interest towards your product,  but it is getting increasingly difficult to be original in grabbing their attention. Luckily, a new compact JavaScript library can help you make a splash. View Tutorial Apple-like Login Form with CSS 3D Transforms In this tutorial we will see how we can use these transforms to create an interesting flipping effect on an Apple-inspired form. View Tutorial   PRETTY SIMPLE CONTENT SLIDER WITH JQUERY AND CSS3 Today we will create an auto-playing content slider with jQuery and CSS3. The idea is to alter the background image and to slide in the heading and the description. By clicking on one of the menu items, the auto-play function is stopped and the respective content slides out. So, let's start with … View Tutorial Pure CSS speech bubbles This tutorial contains various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semanticHTML. View Tutorial   ANIMATED CONTENT TABS WITH CSS3 Content tabs are a very common and familiar element in web design, and often their turn out to be pretty useful. So, in this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseudo-class and sibling combinators. View Tutorial The 30 CSS Selectors you Must Memorize So you learned the base id, class, and descendant selectors – and then called it a day? If so, you're missing out on an enormous level of flexibility. While many of the selectors mentioned in this article are part of the CSS3 spec, and are, consequently, only available in modern browsers, you owe it to yourself to commit these to memory. View Tutorial Spin those Icons with CSS3 On my new portfolio site, I included a neat effect which spins the social icons with the help of a CSS transform and transition when you hover over them. Nothing amazing but definitely a nice enhancement. I used Komodo Media's excellent social network icon pack (along with a couple I created myself) which look fantastic. Let's see how it's done. View Tutorial   LOGIN AND REGISTRATION FORM WITH HTML5 AND CSS3 A tutorial on how to create a switching login and registration form with HTML5 and CSS3. View Tutorial RESPONSIVE CONTENT NAVIGATOR WITH CSS3 Today we want to show you how to create a responsive, css-only content navigator. View Tutorial Elegant Accordion with jQuery and CSS3 Today we will create an elegant accordion for content. The idea is to have some vertical accordion tabs that slide out when hovering. We will add some CSS3 properties to enhance the looks. Ok, let's start with the markup. The Markup The HTML will consist of a list where each accordion tab … View Tutorial Cool Sprites – Free overlapped CSS menu using CSS Sprites This is an initial draft version, so far I have checked it only in Firefox 3.5, IE 7, Chrome 3.0 & Opera 9.02 and it looks fine. If anyone of you finds any issues in any other browsers, please lemme know. Cool sprites is a pack of four different versions of the same menu. View Tutorial Effet Lightbox en CSS3 grâce à transition View Tutorial Create a Fun Animated Navigation Menu With Pure CSS However, CSS3 offers a glimpse into a possible future where basic animations are performed with straight CSS completely independent of scripting. Today we'll take a look at how to use CSS3 to create a fun and unique navigation menu that uses @font-face, transforms and transitions. View Tutorial Dark Button Navigation using Css3 I recently came across a great looking set of navigational buttons designed by Orman Clark of Premium Pixels. I'm a big fan of his design style and decided to whip together a quick CSS3/HTML version of the buttons. Check out the demo and feel free to download the example zip file as well. View Tutorial CSS3 Minimalistic Navigation Menu 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. View Tutorial

You are subscribed to email updates from Tutorial Lounge To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610