Using CSS to Do Anything: 50+ Creative Examples and Tutorials Apr 21 2008 CSS can powerfully open the doors to a lot of rich and unique techniques. Today we are presenting a round-up of CSS coding, creative approaches and techniques. You can also take a look at other 2 articles in this series : So let’s get started and don’t forget to subscribe to our RSS-Feed to keep track on our next post in this series. Styling Lists The Amazing <li>- With a little CSS, the <li> becomes one of the most powerful and versatile tags in a web designer's arsenal. Better Ordered Lists (Using Simple PHP and CSS)- Here is an example where you ditch the traditional ordered list and create your own! Style Your Ordered List- Here is a quick CSS tutorial on how you can use the ordered list <ol> and paragraph <p> element to design a stylish numbered list. List Based Calendar- A simple way to add multiple views to a calendar, so you can view your events in a simple list, or in a month based calendar format. Live DemoView it Here Forms and Form Elements Footers Image Sprite Navigation
Pushing Your Buttons With Practical CSS3 - Smashing Magazine Advertisement CSS3 is the partially implemented sequel to the CSS2 spec we all know and love. It’s already popping up in new browsers such as Firefox 3.5, Safari 4 and Chrome. Calls to action are critical for any website, and a compelling, attention-grabbing, clickable button goes a long way toward driving that engagement. Step 1: The Super-Awesome Button Some time ago we published a post titled “Super Awesome Buttons with CSS3 and RGBa.” Using Box-Shadow and RGBa Our first goal when we were about to create a versatile family of buttons was to eliminate the problem that HEX-based drop-shadows have on different backgrounds. RGBa works like the standard RGB model — 255, 255, 255 for white, for example — but has a fourth property that controls the alpha, or transparency, channel. That solves our box-shadow problems. The Amazing Border-Radius Creating objects with rounded edges has always been a mess on the Web; after all, every object on the Web is a rectangle. Final Touches And that’s it!
Hover.css - Collection Of CSS3 Powered Hover Effects All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place. Licenses Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. To compare licenses please visit the Ian Lunn Design Limited Store and purchase a commercial license. Personal/Open Source For personal/open source use, Hover.css is made available under a MIT license: Use in unlimited personal applications Your application can't be sold Your modifications remain open-source Free updates Read full license Commercial Commercial License Purchase | Read full license Extended Commercial License Purchase | Read full license
CSS Message Boxes for different message types - StumbleUpon Can you believe this: Few days ago I went to my bank to check my credit score with the Credit Bureau. The bank official typed in my personal data and sent a request. Web application responded by displaying a yellow message box with an exclamation icon saying that data processing is still in progress. He checked several more times, but he didn't notice that at one moment the message changed to "Account available". But the message box hasn't changed. He continued to check a few more times and eventually he realized that the request was successful. I don't know what was in the minds of developers and designers who created this application, but it certainly wasn't the user. To prevent this, different message types should be displayed differently. I will show you a remake of CSS message boxes I used on my latest project. Let's first take a quick look at message types. 1. The purpose of information messages is to inform the user about something relevant. 2. 3. 4. Design process Conclusion
InMotion Hosting - HTML5 Cheat Sheet Hosting Comparisons Embed it! <img src=" width="800" height="1487" border="0" alt="Where Does Your Website Live?" /><div>InMotion Hosting - <a href=" of Web Hosting Plans</a></div> SEO Audit Checklist <img src=" width="1000" height="1900" border="0" alt="20-Minutes or Less SEO Audit Checklist" /><div>InMotion Hosting - A Los Angeles <a href=" Hosting</a> Company</div> HTML5 Cheat Sheet - Tags HTML5 Cheat Sheet - Event Handler Attributes HTML5 Cheat Sheet - Browser Support An Introduction To The CSS3 Multiple Column Layout Module The Multi Column Layout Module has been introduced to help us create columns quickly and easily using CSS3 only. In this tut I'm going to be taking a look at some of its properties and demonstrate them through a series of examples. Anyone who has tried to create multiple columns in the past using CSS will already know that this type of layout has been achievable for a long time. However, this has often resulted in the use of hacky techniques and floats. The new approach, which is an extension to the current CSS box model, allows content to run from one column to another and makes it easily adaptable for different viewing devices and dynamic data. Ok, so before you get too excited about this new module it's important to understand which browsers support it, which prefixes to use and a few browser limitations. IE10+Firefox 5+Chrome 12+Safari 3.2+Opera 11.1+ Both Chrome and Safari use the '-webkit-' prefix. Here's a preview of how the columns will be rendered:
Transition Timing Functions < CSS This article follows on from the related article on Animation using CSS Transforms and investigates the transition-duration and transition-timing-function properties which control, respectively, the duration and speed at which a transition is carried out. The examples on this page will currently only work if you download a WebKit Nightly Build web browser now work in Safari 5, Chrome 6, Opera 10 and Firefox 4 Beta. They will not work in Internet Explorer. 1. The transition-duration property is simple to understand. The transition-timing-function is more difficult as it defines the rate at which the transition is carried out, which can involve speeding up and slowing down. The transition-timing-function property describes how the animation will proceed over time. Rather than trying to work out what all that means, lets look at the keyword values for this property and how they affect a simple translation across the page. default » linear » ease-in » ease-out » ease-in-out » cubic-bezier » 2. 3.
CSS ShortHand Property Cheat Sheet digg Shorthand properties can be used to set several properties at once, in a single declaration, instead of wasting your precious time and space making declaration for each individual property. With css shorthand we make our code less complicated and more readable for those who want to explore it. Unfortunately, quite a few shorthand properties are available, that`s why we`ve collected most useful and most used for you. But be careful shorthand declaration is effective when condensed correctly, sometimes it can bring surprises. We hope that today`s freebie come in handy. Got any handy hints and tips related to CSS shorthand? Enjoy and Good Luck! css-transitions-101 from webdesignerdepot.com Despite people’s expectation of change and movement on the screen, CSS and HTML have few controls that allow you to design interactivity, and those that exist are binary. A link is either one color or another. A text field is either one size or another. A photo is either transparent or opaque. This has led to most web pages feeling abrupt, with elements shifting and changing ungracefully. Yes, we can use DHTML and leverage the jQuery library for transitions, but this requires a lot of code for something that should be very simple. What we need is a quick and easy way to add simple transitions to the page and in this article you’ll find useful information about CSS transitions and how to use them. A few months back, I stuck my foot in my mouth by suggesting that designers should start using the new CSS 3 techniques that allow them to do some of the basic styling that they’ve been pleading for. Where CSS Transitions Come From Fortunately, the argument for dynamic styles held the day.
Slick login form with HTML5 & CSS3 – Red Team Design We already know that CSS3 has the ability to create a lot of new possibilities to design and implement better web forms. Also, HTML5 has its important role when it comes about creating more usable forms, without actually needing any Javascript code. Knowing that, check out the below preview to see the login form we're going to create in this article: View demo Markup <form id="login"><h1>Log In</h1><fieldset id="inputs"><input id="username" type="text" placeholder="Username" autofocus required><input id="password" type="password" placeholder="Password" required></fieldset><fieldset id="actions"><input type="submit" id="submit" value="Log in"><a href="">Forgot your password? The HTML5 stuff New HTML5 attributes descriptions, according to latest specifications: The CSS For this article, I will not paste the whole lines here. Paper stack effect Box-shadow will help us creating this nice effect by defining multiple shadows that actually overlap. Stitch effect Subtle gradient lines The final result