20+ Enhancing CSS3 tools and generators CSS3 is an enhanced version of the Cascading Style Sheets specification, and it comes with many enchanting features that revolutionize Web layout and design, as well as other advantages. But it has some disadvantages as well, and tackling them requires smarts. CSS3 is new on the market, so there is still a lot to improve. The major problem is that the properties are browser-specific and cannot be easily implemented across browsers. Developers have to add extra code in order to implement the properties the same way across browsers. In this article, we’ll highlight some effective CSS3 auto-generator tools that can assist developers—especially lazy ones! 1. CSS3, please is a multipurpose tool with versatile features like border-radius, box-shadow and linear gradients. 2. CSS3 Generator helps developers generate cross-browser snippets for various CSS3 properties. 3. Border Radius makes your designs look more elegant with less effort. 4. 5. 7. 8. CSS3 Gen is a handy tool for novice developers.
Rotating Words with CSS Animations Using CSS Animations we will change or rotate some parts of a sentence. View demo Download source In today’s tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We’ll be “exchanging” certain words of that sentence using CSS animations. Please note: the result of this tutorial will only work as intended in browsers that support CSS animations. So let’s start! In the following, we’ll be going through demo 2. The Markup We’ll have a main wrapper with a h2 heading that contains first-level spans and two divisions for the rotating words: Now, ignoring the garbage placeholder text, we want each span of the rw-word to appear at a time. The CSS3 First, we will style the main wrapper and center it on the page: We’ll add some text shadow to all the elements in the heading: And add some specific text styling to the spans: Each span inside of a rw-words div will be positioned absolutely and we’ll hide any overflow: And that’s it folks! Demos
CSS Transitions, CSS Transforms and CSS Animation - all one one page Introduction This website is designed to help you build modern sites that are able to make use of some of the newer, exciting parts of CSS. The site is currently focussed on CSS Transitions, Transforms and Animation, though I will be adding other topics as they become available on any major platform. Though of course your browser must support the technologies to use them, most things degrade nicely in older browser, meaning that you can use much of this today, even without a fallback. If you need to have the same appearance in older browsers (mainly IE6, 7 and 8), then all the animation bits can be easily covered by using jQuery's .animate(). 2D transforms can be emulated to a degree in older versions of IE, but 3D transforms can't. None of the actual animation uses javascript, though I am using jQuery to add and remove classes to add interactivity. If you are using a touch enabled device, replace hover with touch and hold wherever appropriate.
Timelines CSS - 7 astuces Présenter une histoire, une succession d’événements, bref toute une vie et pourquoi pas une navigation, telle est la raison d’être d’une timeline. Découvrez 7 astuces pour réaliser la votre en CSS. Une timeline en CSS permet de se dispenser d’une image, difficilement évolutive dans un site web dynamique. Une timeline CSS basique, verticale Pure CSS Timeline par MattBango Une timeline CSS scrollable Un exemple bien réalisé par Smashing Magazine Un tutoriel bien complet par TutorialZine Une timeline avec un tutoriel complet Exemple et sources à télécharger par Eric Meyer Un exemple avec le nouveau portfolio de Peter Cain, construit sur une timeline : petejcain.co.uk/ Cette entrée a été publiée dans CSS, avec comme mot(s)-clef(s) astuce css, chronologie css, css, css timeline.
All About Buttons: Inspiration, PSDs for Download, CSS Generators and Frameworks Whether they are used to subscribe to services, send a contact form or simply to call the user’s attention to a specific page, buttons are a very important part of websites. When well designed, they have the power to change conversion rates, bring new customers to a service or help users perform and validate specific tasks. No wonder web designers tend to put so much time and effort into creating nice, appealing buttons. In this article, we will present a showcase of websites that can inspire designers in their quest for the perfect button design, some websites to find and download nice PSD button templates. We will then take a look at some online tools to create nice HTML CSS buttons using CSS3 goodness, and finish with a showcase of pretty CSS button frameworks ready for use. All About Buttons Finding Inspiration on the Web: Button Showcases House of Buttons House of buttons is a nice Tumblr website that showcases great UI buttons spotted all over the web. CSS Button Makers Conclusion
Crafting Minimal Circular 3D Buttons with CSS The following post is written by Brandon Pierce. Brandon saw some nicely designed buttons by Wouter on Dribbble and set about building them with CSS. They came out nicely and he agreed to post about the process here. Here's what we are going to make in this tutorial: The Base HTML We will be using a simple unordered list1 within a <nav> tag to create our buttons. Some Resources These icons in the buttons come from the Fontello icon font and web app.The textured background is from Subtle Patterns. CSS for the Icon Font There are a few ways to go about this, but we'll go with this: CSS for the Buttons The buttons will be arranged horizontally by making the list items inline-block. The lovely three dimensionality of the buttons comes from a subtle gradient and bevel and embossing courtesy of a pair of box-shadows, one normal and one inset. We can flatten out the buttons a bit on :hover to create a pressed look. At this point our buttons should look like this: Not bad, but we have a ways to go.
Pure CSS Timeline – Notebook | MattBango.com I wanted to build a CSS timeline for the “About” section of my site while using some clean and simple markup. I wanted to avoid using images as much as possible, so I spent a few minutes prototyping some options and came up with a solution using unordered lists. The result is a simple and clean looking timeline with some very straight forward markup. Introduction First and foremost, is the solution I’m about to share with you the best solution? What are we building? Let’s take a look at a screenshot of the timeline that we’re building in this tutorial. We have a nice looking timeline styled completely with CSS, but what happens if the visitor doesn’t have CSS enabled? What would make this better is if the labels for the x-axis of the timeline would work better with the timeline block labels. The Markup I chose to use a unordered list implementation. The CSS The CSS is as simple as the markup. Summary Take the timeline a step further. Further Reading
Introduction · Intro to CSS 3D transforms › Docs Ladies and gentlemen, it is the second decade of the second millennium and we are still kicking around the same 2D interface we got three decades ago. Sure, Apple debuted a few apps for OSX 10.7 that have a couple more 3D flourishes, and Microsoft has had that Flip 3D for a while. But c’mon, 2011 is right around the corner. That’s Twenty Eleven folks. Granted, the capability of rendering complex 3D environments has been present for years. Rationale Like a beautiful jewel, 3D transform can be dazzling, a true spectacle to behold. The entire application does not, and should not, take advantage of 3D. Take for instance the Weather App on the iPhone. Also consider slide cycle plugins. 3D transforms are more than just eye candy. Current Support Environment The CSS 3D transforms module has been out in the wild for several year now. This all adds up to a bit of a challenge for those of us excited for 3D transforms. The choice is yours. So I bid you, in the words of the eternal Optimus Prime