CSS3 Image Styles When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I'm going to revisit the topic and show you how much more you can do with the background-image CSS trick. I will show you how to use box-shadow, border-radius and transition to create various image styles. View Demo Image Styles Problem (see demo) Take a look at the demo and note that there is border-radius and inset box-shadow applied in the first row of images. Workaround To get the border-radius and inset box-shadow working, the workaround is to apply the actual image as background-image. Dynamic Way To make it dynamic, you can use to jQuery to wrap the background image dynamically for every image element. Output
CSS Techniques I Wish I Knew When I Started Designing Websites Dec 18 2009 By Tim Wright and TJ Kelly CSS is the best thing to happen to the web since Tim Berners-Lee. It’s simple, powerful, and easy to use. But even with all its simplicity, it hides some important capabilities. Ask any designer, and they’ll tell you that the majority of their code headaches are caused and ultimately solved by CSS. All designers at some point in their career go through the process of encountering a weird display issue, searching for a resolution, and discovering a trick, technique, or hack could have saved them hours of frustration—if they had only known when they started. We’ve put together a list of the most frustrating and time-consuming CSS headaches and, more importantly, their solutions (along with examples and further resources). Resets & Browser Inconsistencies Not all browsers are created equal. The early stages of resets, designers dealt with differing margin and padding values, using a global reset: inputbuttonhr Resources for Resets Extras Floats & Clearing <!
Building a shopping cart with knockout.js - thebeebs Prior to joining Microsoft I worked for a large online retailer, so I know first-hand how difficult it is to produce a good shopping cart. As a user updates quantities, deletes items or changes delivery options it’s important to update the sub total, tax and shipping instructions. It’s critical that the experience reacts quickly and that nothing gets in the way of a user making the purchase. Even when creating a simple shopping cart it is easy to end up with a bug ridden, mess of JavaScript onChange events. For this article I’m going to be using the shopping cart example from the knockoutjs.com website. Declarative Binding – The HTML is attached to the model we create using the html attribute data-bind. You can see a demo of the cart in action here. Installation To install Knockout you will need to download the files from the installation page here and add the script to the top of your page. Next up we are going to pump in some fake data. The HTML The Template The Model
Creating a Complete HTML5 Drag and Drop File Uploader with jQuery Today we’re going to be creating a file uploader using HTML5 drag and drop, along with the file reader API and some PHP. We’ll also be using local storage to remember which files were uploaded by the user. Getting Started For this tutorial I’m using jQuery and an icon font called symbolset. If you don’t want to get symbolset you could use an alternative or just not use a symbol font all together! Next lets do the main HTML in the body: There is also a little bit of simple CSS. jQuery Effectively what we want to do is get the Data URI for all the images that the user drags into the drag area. To begin, we need to initiate some variables: Next we need to bind a function to the drop event. Now we want to check for any errors. When the user drops an image in the drop box, the first 5 will be shown as images. Now we can run the file reader function. The rest of this function is to do with grammar and placing the images in the correct div. And that’s all the Javascript! And now we’re done! Support
Blur Menu with CSS3 Transitions There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we'll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering. View demo Download source There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. The images in the demos are by fabulous Mark Sebastian and they are licensed under the Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0) License. Please note that this will only work properly in modern browsers and unfortunately Internet Explorer does not belong to that category yet since it does not support transitions (and many other suggested CSS3 properties that others do support). The Markup Let’s create the HTML structure for our menu first. Now we’ll add some style!
Top 10 CSS buttons tutorial list Looking for CSS3 buttons? Check out this post. How to make sexy buttons with CSS » Source Scalable CSS buttons with PNG images and background colors » Source Sexy CSS Hover Button » Source CSS Submit buttons » Source Simple Round CSS Buttons ( Wii Buttons ) » Source Make fancy buttons using CSS sliding doors technique » Source Beautiful CSS buttons with icon set » Source Sliding Doors buttons using only 1 image » Source Rediscovering the button element » Source Using sliding doors in WordPress » Source
The Top 10 Web Design Skills You WILL Need! Here are my top 10 web design skills that you WILL need to master to become an effective web designer. If you’re serious about mastering web design and marketing, check out the Pro Web Design Alliance. See how Jordan benefited from the course forum and Google hangout sessions to make his and his clients’ sites better. Look at Jordan’s site and the testimonials from his clients here.  The personal interaction with Ben and fellow students while  working on live sites makes the learn by doing course philosophy start generating money for you while you are still in the course. Your priorities may be different (and my priorities may be different a few months down the line). And I’d add that you don’t need all these skills in any particular measure to make it in web design. #1. I’m convinced the #1 most important skill for a web designer is the ability to use words effectively. Effective wording is of singular importance in several highly important factors in the success of web pages: #2.
Animated Content Menu with jQuery Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, he background image is going to change according to which menu item was clicked. The main idea is to […] View demoDownload source Today we will create a slick animated content menu with jQuery for a restaurant theme. The main idea is to have a restaurant menu with the different menu categories displayed. So, let’s get started. The Markup The HTML structure is going to contain some elements for the background image, the grid overlay, the loading icon and the main menu. As a default background image when the page loads, we will have the image Default.jpg. The menu content will be wrapped by a div with the class “ac_content”. For each menu item, we will have a div “ac_subitem” which will contain the submenu content box. Let’s take a look at the style. The CSS @import url('reset.css'); The JavaScript
postcard from Paris – css3 keyframes animations in use | PeHaa Blog postcard from Paris – css3 keyframes animations in use I decided to explore the area of css3 keyframes animations. The idea was simple – to create a sort of virtual postcard. I live in Paris so obviously I send you my greetings from Paris :). The css3 animations are supported by : Chrome 2+, Safari 4+, Firefox 5+, iOS Safari 3.2+ and Android 2.1+ (source Smashing Magazine). The html structure is very simple : We will use the following images (I will discuss the sparkling effect a little bit later) Let’s start to complete the css stylesheet : Animating clouds To animate the three layers of clouds independently we use the following keyframes. This way we have defined the property of background-position for the beginning, middle and end of our animation. to associate the animations with the proper elements and to define the duration, timing-function and iteration count, respectively (I use the shorthand notation). Animating phare light (here and further, repeat the same with -moz- prefixes).
10 Useful CSS3 Tools for Your Next Web Development HTML5 always an important phenomenon within web design community. Another most valuable aspect that web designers should accept is CSS3. CSS3 offers new and exciting improvements on your web design and development. In this article we present some useful collection of CSS3 Tools for your next web development. A simple stylesheet for rendering beautiful keyboard-style elements. CSS3 Click Chart This text is divided into paragraphs inside of a single div element, but with CSS3 the text in these paragraphs is divided into columns. CSS3 Button Maker Drag things, pick colors, make a nice class for your buttons… introducing the Button Maker. Transforms Take a look at our fun and productive free tools for web developers. CSS3 Generator This simple CSS generator helps you to understand capabilities of CSS3 introduced by WebKit. CSS3 Gradient Generator Select the format you would like your colors generated in. Web Browser CSS Support The following are units that are used in CSS properties. CSS3 Maker
Free Photoshop Brushes from BrushPortfolio.com - Original High Resolution Photoshop Brushes I love how much cool free stuff you can find on the web. Designers are always sharing their talents and you can find some pretty amazing stuff. To help with your search, I have compiled a list of 20 great sites where you can find awesome freebies. There’s no way to include all the great sites online. If I have missed one of your favorites, leave a link in the comments section. 1. Design Shard offers a lot of valuable resources for designers including design tips, inspiration and free resources like Photoshop brushes and textures. 2. Texture King has an amazing selection of high quality textures for download. 3. Free images for your inspiration, reference and use in your creative work, be it commercial or not! 4. Great collection of free Photoshop resources: brushes, shapes, patterns, styles and gradients. 5. I love this blog and find myself reading it all the time. 6. This site just rocks! 7. The artist behind this blog is Jen Furlotte. 8. Design Freebies Heaven. 9. 10. 11. 12. 13. 14.
Project Seven: Dreamweaver Menus, CSS Templates, Widgets, Slide Shows, Tooltips, and More (Better) Tabs with Round Out Borders The following is a guest post by Menno van Slooten. You might notice we've been down this road before, but I quite like Menno's approach here. The end result proves you can get a little fancier with the design than I originally did, with borders, gradients, and shadows and while actually using less elements. A good-looking tab control usually has one feature that I've always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS :before and :after pseudo elements to create this effect without using images. First, let's start with some basic markup. The markup <ul class="tabrow"><li>Lorem</li><li>Ipsum</li><li class="selected">Sit amet</li><li>Consectetur adipisicing</li></ul> This would be about as basic as you can get. Getting started To get started, let's get rid of the default <ul> and <li> styling and get these babies in line. LoremIpsumSit ametConsectetur adipisicing Share On