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 Pseudo Elements First Letters and First Lines The first-letter pseudo element applies to the first letter inside a box and first-line to the top-most displayed line in a box. As an example, you could create drop caps and a bold first-line for paragraphs with something like this: Before and After Content The before and after pseudo elements are used in conjunction with the content property to place content either side of a box without touching the HTML. The value of the content property can be open-quote, close-quote, any string enclosed in quotation marks, or any image, using url(imagename). The content property effectively creates another box to play with so you can also add styles to the “presentational content”: 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
Adding CSS class on pseudo-element 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
CSS3 Generated and Replaced Content Module Abstract This CSS3 Module describes how to insert and move content around a document, in order to create footnotes, endnotes, section notes. Inserted content can also introduce counters and strings, which can be used for running headers and footers, section numbering, and lists. Finally, techniques for declaring replaced images, as well as scaling and cropping them using CSS, are described. Status of this document This is a working draft of a CSS level 3 module. This document is written in the context of the CSS working group which is part of the style activity (see summary). Comments on, and discussions of this draft can be sent on the (archived) public mailing list www-style@w3.org (see instructions). This is a working draft and may therefore be updated, replaced or rendered obsolete by other W3C documents at any time. Patent disclosures relevant to CSS may be found on the Working Group's public patent disclosure page. This document may be available in translations in the future. 1. 2.
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