CSS3-Only Tutorials and Techniques for Your Next Design - Speckyboy Design Magazine RSS

---

CSS3-Only Tutorials and Techniques for Your Next Design Posted: 01 Mar 2012 01:27 AM PST Today we are showcasing some of best tutorials and techniques that will help you create beautiful and functional designs by using only CSS, focusing primarily on the properties of CSS3. All with absolutely NO JAVASCRIPT. For the most part, the techniques we have highlighted below, can be used for everyday use, others probably not. Please do check browser compatibility when implementing any of these techniques. You might also like… CSS3 Compatibility Tools, Resources and References for Internet Explorer → CSS Form Templates, Tools & Services → 25 Free Fonts Perfect for @fontface → & @fontface Icons → Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks → Pure CSS Alternatives to Javascript → 40 Essential CSS Templates, Resources and Downloads → Or, you could browse our extensive CSS Archives. CSS3 Image Galleries, Slideshows and Image Effects Sliding Image Panels with CSS3 In this tutorial you’ll be shown how to create some neat sliding image panels. The idea is to use background images for the panels and animate them when clicking on a label. Sliding Image Panels with CSS3 → Fullscreen Background Image Slideshow with CSS3 You’ll create a CSS-only fullscreen background image slideshow with this tutorial. You’ll learn how to create different image transitions and also make an animated title appear. Fullscreen Background Image Slideshow with CSS3 → CSS3 Lightbox With this tut you will be shown how to create a lightbox effect using only CSS. You will have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, you will learn how to make the larger image appear in a sleek and fancy way. CSS3 Lightbox → CSS3 Image Styles In this tutorial you will be shown how much you can do with background-image. You’ll be shown how to use box-shadow, border-radius and transition to create various image styles. CSS3 Image Styles → CSS3 Menus, Navigation & Buttons The Apple.com Menu Created Using Only CSS3 The Apple.com Menu Created Using Only CSS3 → Making a CSS3 Animated Menu In this short tutorial, you will be using the power of CSS3 effects and transitions, to build an animated menu, using some neat features such as the :target pseudo selector and :after elements. Making a CSS3 Animated Menu → CSS3 Menu Navigation Effect CSS3 Menu Navigation Effect → Animated Buttons with CSS3 The idea of this tutorial is to create some animated link elements with different styles, hover effects and active states. Animated Buttons with CSS3 → Creative CSS3 Animation Menus With a simple composition of elements, an icon, a main title and a secondary title, you will learn how to create an animated menu on hover using only CSS transitions and animations. Creative CSS3 Animation Menus → Circle Navigation Effect with CSS3 In this tutorial you will be shown how to create a beautiful hover effect for an image-based navigation using CSS3. Circle Navigation Effect with CSS3 → CSS3 Dropdown Menu Here you will be shown how to create a simple drop-down menu and insert CSS3 transitions to make it more interactive. CSS3 Dropdown Menu → CSS3 Navigation with Transitions CSS3 Navigation with Transitions → CSS3 Animations Animated Web Banners with CSS3 In this tutorial you will learn how to create some amazing animated web banners with CSS3. Animated web Banners with CSS3 → CSS3 Loading Animation Loop 2 Set CSS3 Loading Animation Loop 2 Set → CSS3 Tooltips & Alerts CSS3 Tooltip with Animation NO jQuery In this tutorial you will learn how to create a simple animated tooltip with CSS3. The effect created is amazing, and the most important thing is that you will not be using any Javascript. CSS3 Tooltip with Animation NO jQuery → CSS3 Effects 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”. Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5 → Experiments with Background-Clip: Text With the CSS property “background-clip: text”, you can add a background image to a text element. With this tutorial you will experiment with it and create some fun examples by adding CSS3 transitions. Experiments with Background-Clip: Text → Filter Functionality with CSS3 Using the general sibling combinator and the :checked pseudo-class, you can toggle states of other elements by checking a checkbox or a radio button. This tutorial will explore those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type. Filter Functionality with CSS3 → Original Hover Effects with CSS3 The power of CSS3 is enormous and in this tutorial you will be shown how to exploit it in a very creative way, by creating some thumbnail hover effects with CSS3 transitions. Original Hover Effects with CSS3 → CSS3 Sliders and Charts CSS3 Progress Bars In this tutorial you will learn how to create the awesome CSS3 Progress Bars you can see above. CSS3 Progress Bars → CSS3 Layouts & Pages Splash and Coming Soon Page Effects with CSS3 In this tutorial you will be shown how to go wild using CSS3 animations and create an amazing splash and coming soon page. Splash and Coming Soon Page Effects with CSS3 → Slopy Elements with CSS3 In this tutorial you will see some simple examples and ways to create slopy, skewed elements with CSS only. Slopy Elements with CSS3 → Page Transitions with CSS3 In the last few years, we’ve seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Here you will be shown how you can have your own, but instead, using CSS Transitions and the :target property to do all the magic. Page Transitions with CSS3 → Creating a PHP and CSS3 Powered About Page In this tutorial, you will be creating a simple about page that is powered by PHP, HTML5 and CSS3. Creating a PHP and CSS3 Powered About Page → Miscellaneous How to Create a Beautiful Icon with CSS3 In this tutorial you’ll create a document icon with pure CSS3. How to Create a Beautiful Icon with CSS3 → How To Create Depth And Nice 3D Ribbons Only Using CSS3 In this tutorial you will learn how to create beautiful 3D ribbons only using CSS3. How To Create Depth And Nice 3D Ribbons Only Using CSS3 → Bokeh with CSS3 Gradients In this tutorial you will learn how to create a beautiful Bokeh effect using CSS3 Gradients. Bokeh with CSS3 Gradients → You might also like… CSS3 Compatibility Tools, Resources and References for Internet Explorer → CSS Form Templates, Tools & Services → 25 Free Fonts Perfect for @fontface → & @fontface Icons → Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks → Pure CSS Alternatives to Javascript → 40 Essential CSS Templates, Resources and Downloads → Or, you could browse our extensive CSS Archives →

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