Turn Images Into Postage There are many online articles on border-image, but I’ve found that few of them are terribly practical. Following up on my technical explanation of the property, I’ll try to reverse that that trend by showing how to create a postage stamp from a simple image with border-image. Why would we do such a thing? Well, there is usually more than one stamp on an envelope. If we want to present those on a web page, we have two choices: transform the images into postage stamps by using some kind of batch process in PhotoShop, or use CSS to add a border. First, we need to make our border. (You could make the resulting file size of the PNG even smaller by processing it through Fireworks). Now we’ll apply the PNG as a border-image: Because each side has the exact same dimension, I can shortcut them. (Oddly, Firefox requires both a separate border-width and a border-style, even though the width has already been declared and the style is determined by the image).
CSS Layout | layers, absolute and relative positioning and floating elements Path // → → CSS LAYOUT One of the major benefits of using CSS is that you’re no longer forced to lay your sites out in tables. The layout possibilities of CSS give you complete control over the positions and dimensions of all page elements. If you’ve tried laying out a page with tables, you have probably been irritated in the past by the inability of your browser to render your page exactly as you had wanted. Table structures aren’t the most flexible of page layout devices, as they weren’t really designed for this purpose. Now however, with some reliable browser support in the current generation of browsers, you have a new and much improved option. This page was last updated on 2012-08-21 Working with divs The <div> element is well-suited to take over from tables as a layout tool. The div tag has few attributes of its own (save for align="left | right | center"), with all of its formatting applied through stylesheets. <div id="navigation">...navigation links... Floating Elements Column 1
Quick Tip: The Multi-Column CSS3 Module For over six years, CSS3 columns have been available to us; yet, strangely, they're rarely utilized. Because they currently are only supported in Mozilla and Webkit-based browsers, this means that - again - no support in Internet Explorer. But that's okay! The world will not end if IE users see one longer paragraph. I'll show you how to use this helpful module in today's video quick tip. column-count: The desired number of columns for the element. Please note that we must prefix each property with the -webkit or -moz, accordingly; so: -webkit-column-count. Do you use CSS columns in your projects?
65 Good CSS3 Tuts The days when we had to sit and code for making even a simple thing for our website are long past. At that time you would have to write long codes to make even a simple curve. Today, we have CSS3 which has totally changed the way we work with our website. CSS3 makes it simple to include fonts, typography, texts and more. Web designers are always in the lookout for bettering their skills and here is chance for you. Take a close look at these CSS3 tutorials and you will notice that these tutorials are for creating amazing effects and for working with graphics. Following are some more related articles that you may like to browse through: It’s our pleasure that we have a platform to share our collections with you. Don’t forget to subscribe to our RSS-feed ; follow us on Twitter and Like our Facebook Page — for recent updates. This article contains many such CSS3 tutorials and let me make it clear that these CSS3 tutorials if mastered, could take you to an altogether different level. Visit Site
CSS Layers - CSS tutorial With CSS, it is possible to work with layers: pieces of HTML that are placed on top of the regular page with pixel precision. The advantages of this are obvious - but once again Netscape has very limited support of CSS layers - and to top it off: the limited support it offers is quite often executed with failures. So the real challenge when working with layers is to make them work on Netscape browsers as well. First look at this example: Second look at the code: To create a layer all you need to do is assign the position attribute to your style. The position itself is defined with the top and left properties. Finally, which layer is on top is defined with the z-index attribute. You can either position your layer calculated from the upper left corner(absolute) or calculated from the position where the layer itself is inserted (relative). While the position property indicates the out spring of our coordinate system, the left and top properties defines the exact position of our layer.
Coding Kung-fu: 35 Graphics Built Purely With CSS3 Look at the graphics below, awesome Photoshop works right? Nah, they’re created by CSS3. Yes, they’re completely “drawn” by CSS3! When we have seen enough CSS3 animations we thought those are all CSS3 can do as a potential Flash killer, but we’re wrong. Developers perhaps don’t satisfy with the fun of animation, so again, they push the boundaries of CSS3 to challenge the graphic editor’s realm. With this post comes 35 carefully crafted CSS3 graphics which even include something you wouldn’t relate with CSS3 like Apple iPhone, cartoon character Doraemon, and more surprises! You are strongly recommended to view these demos using the latest version of Safari or Developer version of Google Chrome. RSS Feed Icon RSS Feed Icon built with CSS3, exclusively from Hongkiat! Apple iMac Yeah my eyes also can’t believe that, but it’s iMac “assembled” purely with CSS3. Apple Keyboard It’s Apple Keyboard built with CSS3! Apple iPhone Oh, one more thing: iPhoneCSS3. Cherry Blossom Coffee Cup A tiring day? More
Radio Toggle in CSS3 You'll often find yourself using toggle sliders as a trendy alternative to checkboxes. Today we'll be creating one using plain CSS3 and HTML. Step 1: Begin With the Markup Create a new HTML document and add a span tag with a class of toggle-bg. Step 2: Semantics and Functionality To make the toggle functional, we'll be using some invisible radio inputs. They must have different valuesThey must have the same name I'll be using on and off as my values, with a name of toggle, but you may change this depending on your usage. Add the input to the span you created earlier. Depending on your own usage, you may also want to place this all within a form. Step 3: The Toggle Switch The small circle that will be the switch itself is simply a span that we'll style later on. This is your final HTML markup: Step 4: Style the Background To keep things simple, we'll start out with the bare minimum required to get this toggle working. Step 5: The Invisible Inputs Step 6: The Toggle Switch Step 7: CSS Hackery!
A css only dropdown menu further examples 24th May 2006 Menu #1 - 24th May 2006 This first example is a flexible width top level list that expands to fit the text.It has a fixed height and uses a background image that stretches the full width of the outer div, in this case 750px, and a background div in each top level link to mark the right hand edge of the link. The top level hover varies the text color and the bottom border color.The sub level hover varies the background color and adds a background square bullet against the top line of each list item. Sub level drop down lists can be positioned anywhere (left/right) beneath the top level list. The sub levels are a fixed size, but can easily be changed to suit your requirements, and have a single pixel border. Menu #2 - 30th May 2006 A simple looking menu this time, but looks can be deceiving.This one is for those people who have no room for a drop down/ flyout menu. The hover state varies the background and foreground shades of grey. Menu #3 - 4th June 2006 Menu #4 - 6th June 2006
Multiple Backgrounds and Borders with CSS 2.1 Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required. Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+. How does it work? Essentially, you create pseudo-elements using CSS (:before and :after) and treat them similarly to how you would treat HTML elements nested within your target element. To provide multiple backgrounds and/or borders, the pseudo-elements are pushed behind the content layer and pinned to the desired points of the HTML element using absolute positioning. The pseudo-elements contain no true content and are absolutely positioned. What effects can be achieved? Most structural elements will contain child elements. Example code: multiple background images Each pseudo-element then has a repeated background-image set.
A Really Nice Way To Handle Popup Information Doug Neiner gave a fantastic talk at this year's Front End Design Conference. He covered a lot of stuff there, which you can see in his slides, but I'd like to highlight one thing in particular: the way he handled popup information in the demo. I'm going to try and re-explain it... Let's say our goal is this: hover over an image to display extra information (like the title of the image and a URL). Pretty darn simple design pattern right? Simplest way: hide/show with CSS If our markup is: <figure><img src="image.jpg" alt="cool image"><figcaption><h3>Cool Image</h3><a href=" We'll use the <figcaption> as the popup info. But... it's so abrupt. Fade in/out We can chill it out with CSS transitions. We could get even fancier there if we wanted by applying different durations. But... popups come up even if we are just quickly moving our mouse past and likely not interested in seeing popups. "Hover Intent" You could apply that like this: