jQuery: The Write Less, Do More, JavaScript Library
Take Your Design To The Next Level With CSS3 - Smashing Magazine
Advertisement 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. So why is it that, when it comes to CSS, we’re stuck in the past and so afraid of experimenting? 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. In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. Please also consider reading our previous, related article: Push Your Web Design Into The Future With CSS3 Using Browser-Specific Properties To use most CSS3 properties today, we have to use vendor-specific extensions together with the original properties. The disadvantages to this approach are, of course, a messy style sheet and inconsistent design across Web browsers. Useful Links 1.
45 Powerful CSS/JavaScript-Techniques
Advertisement CSS and JavaScript are extremely powerful tools for designers and developers. However, sometimes it’s difficult to come up with the one excellent idea that would solve a problem that you are facing right now. Good news: almost every day designers and developers come up with fresh and clever CSS tricks and techniques and share them with other developers online. In this post we present 45 useful CSS/JavaScript-techniques that may help you find clever solutions to some of your problems or just get inspired by what is possible with CSS. Please notice that this is the first part of our large round-up of fresh CSS/JavaScript-techniques. We are aware that many readers are tired of “lists” floating around in the Web, but we are confident that the vast majority of our visitors will benefit from this post format and will find at least some of the techniques featured in this post useful. Interesting CSS Techniques CSS Navigation Menus Sproing! CSS Typography and Body Copy CSS Lists
Google Plus Circle Animation With Jquery and CSS3 in Your Website — Tech Blog
If you are a Google plus user, I am sure you will fall in love with Google plus circle animation. Google plus given an awesome user experience, specially circle’s animations. When I saw the rotation animation first time in Google plus, I was so excited to create my own rotation animation like Google plus. I have been working in these days to develop circle rotation animation effect with Jquery and CSS3. I have tried circle rotation animation effect with Jquery and CSS3. Click here to watch live demo T1 Click here to watch live demo T2 Circle CSS3 circle diameter 50px
Start Using CSS3 Today: Techniques and Tutorials - Smashing Maga
Advertisement We have been publishing articles about CSS3 for a while now, and we keep receiving angry e-mails from some developers who complain that it doesn’t make sense to use CSS3 today. Yes, Internet Explorer doesn’t support most CSS3 properties. And yes, CSS3 vendor prefixes are bad for maintainability (and this is why we recommend extracting vendor prefixes in a separate CSS3 file). But it’s OK to accept that Web is a dynamic medium, and it’s OK to create rich, interactive, beautiful designs for those who are already using a modern browser or will be using one soon. It just doesn’t make sense to keep looking back, beiDang afraid of looking forward and therefore avoid experimenting and learning about new CSS3 properties today. In this post we present an extensive round-up of CSS3 techniques, tools and resources that will help you learn how to use CSS3 in your designs right away. You may be interested in the following related articles: What’s Possible With CSS3? CSS3 Selectors
HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck
Documentation | Spritely
Spritely is a simple plugin with only two key methods, sprite() and pan() both of which simply animate the background-image css property of an element. The difference between the two is that a 'sprite' image contains two or more 'frames' of animation, whereas a 'pan' image contains a continuous image which pans left or right and then repeats. Typically, in either case, you would use a png file (with or without transparency) for this. For documentation in languages other than English, please see Unoffical Documentation. Please note: there is a problem with the current version of Mobile Safari on the iPad On the iPad, using the pan() method may cause crashes in Mobile Safari. Quick start If you're impatient to try out Spritely and want to see some self-contained working examples, you can download some sample 0.4 code as a zip file. What's new in version 0.6? Click here to see what's new in version 0.6 Animating an image with the 'sprite()' method Here's a quick example to get you started...
CSS3 Solutions for Internet Explorer - Smashing Magazine
Advertisement Experienced developers understand that CSS3 can be added to new projects with progressive enhancement in mind. This ensures that content is accessible while non-supportive browsers fall back to a less-enhanced experience for the user. But developers could face a situation where a client insists that the enhancements work cross-browser, demanding support even for IE6. In that case, I’ve collected together a number of options that developers can consider for those circumstances where support for a CSS3 feature is required for all versions of Internet Explorer (IE6, IE7, & IE8 — all of which are still currently in significant use). Opacity / Transparency I think all developers are baffled at why Internet Explorer still fails to support this very popular (albeit troublesome) property. The Syntax You really only need the second line, which works in all versions of Internet Explorer. The Demonstration This is the same element without the opacity settings. The Drawbacks Box Shadow
