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.
www.weirdal.com CSS Design: Taming Lists As early as July of 1999 I was pontificating on email lists about the virtues of style sheets. Some things never change. What has changed is how I think about CSS, and the underlying structure of (X)HTML to which it is applied. Of course the reason that we don’t mark them up in that way is that we don’t want a bullet in front of every link in our navigation area. In this article, I’ll demonstrate how to use CSS to bring unwieldy lists under control. Setting the stage#section1 For purposes of this article, I am using unordered lists. <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5 we'll make a bit longer so that it will wrap</li></ul> Each list is simply placed inside a different DIV, and the CSS is written so that the list’s behavior is determined by the DIV it is in. Without any additional styles applied, the list is rendered in this way in the base DIV: Item 1 Item 2 Item 3 Item 4 Item 5 we’ll make a bit longer so that it will wrap Positioning#section2
Shaken and Stirred Themes A Premium Version of Shaken Grid A premium version of Shaken Grid is now available, offering many many more features than the free version. With Shaken Grid Premium’s built-in theme options panel you are able to upload your own logo, customize the look and feel of your site without touching any code, and many more possibilities. The premium theme includes: Smartphone and iPad optimized, 4 unique page templates, 8 color schemes (with the ability to customize these farther), 4 different grid box size options, video support, social networking options built-in, 8 custom widgets (Flickr, Twitter, Popular posts, Category Posts, Share Buttons, Testimonials, Related Posts, Simple Ads), and much more! View the Demo or Purchase today! Blog post with an image This is a blog post with an image as well. Continue Reading → Website Photo II Photo VIII Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Photo VII
Styles sheets optimization This article discusses the creation of a base styles sheet for WebKit-based browsers. A companion table lists all rules found in the UA’s styles sheet plus rules from a reset, a base and a fonts’ styles sheet. The idea is to leverage “native” rules while implementing the styling of combined styles sheets. For the purpose of this exercise, I am using YUI3 sheets, but the technique is the same regardless of which reset, base or fonts styles sheets you use. Bottom line, you want to avoid overwriting declarations or disabling styles that cater to directionality. before, after, end and start The WebKit styles sheet contains the following: margin and padding properties -webkit-margin-before -webkit-margin-end -webkit-margin-after -webkit-margin-start -webkit-padding-before -webkit-padding-end -webkit-padding-after -webkit-padding-start text-align values: start end The above are writing-mode dependent properties and keywords. The good news The bad news margin-right: 1em; -webkit-margin-start: 2em; padding: 0;
Melville | A literary theme for WordPress Moby Dick; or, The Whale by Herman Melville N or was the pulpit itself without a trace of the same sea-taste that had achieved the ladder and the picture. Its panelled front was in the likeness of a ship’s bluff bows, and the Holy Bible rested on a projecting piece of scroll work, fashioned after a ship’s fiddle-headed beak. What could be more full of meaning? Father Mapple rose, and in a mild voice of unassuming authority ordered the scattered people to condense. There was a low rumbling of heavy sea-boots among the benches, and a still slighter shuffling of women’s shoes, and all was quiet again, and every eye on the preacher. He paused a little; then kneeling in the pulpit’s bows, folded his large brown hands across his chest, uplifted his closed eyes, and offered a prayer so deeply devout that he seemed kneeling and praying at the bottom of the sea. November 1, 2010 2 Comments Birds of America, by John James Audubon October 31, 2010 Comments Off On the Origin of Species, by Charles Darwin
Understanding CSS’s vertical-align Property “Vertical-align isn’t working!” cried the web developer. The vertical-align property is one of those features of CSS that sounds pretty self-explanatory, but can cause problems for CSS beginners. I think even many CSS veterans have had problems figuring this one out at times. In this post, I’ll try to cover it in an understandable manner. What it Does Not Do The common misconception about vertical-align is that, when it’s applied to an element, it will make all the elements inside that element change their vertical position. This reminds me of something we used to do back in the days of table-based layouts: <td valign="top"> Whatever... <td valign="top"> Whatever... In the case of this table cell example, the “valign” property (now obsolete in HTML5) would cause the elements inside of it to get pushed to the top of the table cell. But this is not how vertical-align works. What it Actually Does The vertical-align property can be broken down into three easy-to-understand steps: Why? Some Visuals
Marketing Inspiration: 100 Clever and Creative Advertisements In response to our previous Guerrilla Marketing article, we’ve put together 100 more awesome creative advertisements for your marketing inspiration. You’ll see print ads as well as ambient ads that are found in the streets. As a designer & freelancer, you should always be looking for inspiration on how to market your business and I think todays post is going to give you a TON of inspiration! Click an image below to view full size. About the Author James Vincent is a previous owner of MyInkBlog and a full time web developer and designer. More posts by James Vincent
Html/css - How to center floating elements Understanding z-index How to use it The six color boxes (A, a, B, b, C, c) are "draggable", which means you can use your mouse to position them anywhere in the page.The input elements in the colored fieldsets below let you set z-index and position values for each one of these six boxes. These fieldsets are color coded, which means a fieldset's background color matches the background color of the box it is supposed to style. Set and reset Things to keep in mind: The z-index value is set once the input field loses focus or if the user presses the enter key while the caret is in that field, so you need to type some value and then TAB out of the box (or click outside of that box) for the new value to "kick-in".Dragging a box makes its position relative (note that the relevant radio button is "checked" only after that box is "dropped").The "set" and "reset" links above allow you to remove the negative margin applied by default to box A, B, C and also let you revert the document to its original state. Markup Hint
CSS Positioning 101 If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. In what might be a refresher for some, or even an “a-ha!” for others, let’s look at the CSS position property to see how we can use it to create standards-compliant, table-free CSS layouts. Article Continues Below CSS positioning is often misunderstood. Sometimes, in a bug-fixing fury, we apply different position values to a given selector until we get one that works. The CSS specification offers us five position properties: static, relative, absolute, fixed, and inherit. Get with the flow#section1 First, let’s take a step back to recognize the world we’re working in. Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Think of a “box,” as described by the spec as a wooden block—not unlike the ones you played with as a young whippersnapper. Static and relative—nothing new here#section2 In action#section6
Understanding CSS3 Transitions It was 1997 and I was sitting in a terribly run-down apartment in beautiful Allston, Massachusetts. A typical late night of viewing source and teaching myself HTML followed a day of packing CDs at a local record label for peanuts (hence the run-down apartment). I’m sure you can relate. Article Continues Below One triumphant night, I pumped my fist in sweet victory. I still remember the amazement of seeing a crudely designed button graphic I’d cobbled together “swap” to a different one when hovered over by the mouse. We’ve come a long way over the past decade in regard to interaction and visual experience on the web. My first JavaScript rollover back in 1997 took me several nights of head scratching, many lines of code that seemed alien to me at the time, and multiple images. We can start to use CSS3 transitions right now as long as we carefully choose the situations in which to use them. Tail wagging the dog#section1 Let’s take a look at how transitions work, shall we?
The Mystery Of The CSS Float Property CSS3 . Info - All you ever needed to know about CSS3