CSS
Make CSS3 buttons that are extremely fancy - The Official Posterous Tech Blog
Hi everybody! Adam Singer here. Over the coming weeks and months, the rest of the Posterous team and I will be posting to this blog to give you some insight into what powers Posterous. We'll be showing off some cool stuff we've been working on, announce open source projects, and provide some useful tips for those power users out there. The first installment of the Posterous Technology blog is all about buttons.
Vegetables are good for you. It's an onion. Really, truly, this approach has saved me great trials when explaining things to people: your code is an onion. Here's what I'm talking about. Because of the multi-viewer nature of the web you don't know what people are going to use to read your message.
Design Rant p.2
The impression of a three dimensional cube can be created using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG. Using the proprietary transform property to skew and rotate shaded rectangles, individual cube faces can combine to form a 3D object. Currently only supported in recent WebKit and Gecko based browsers, most importantly Firefox 3.5+ -moz-transform ( documentation ) and Safari 3.2+ -webkit-transform ( documentation ).
3D Cube using 2D CSS transformations
My New Best Friend: CSS Generated Content | Viget Inspire
I’ve become obsessed with generated content lately. In an effort to use fewer and fewer images, I’ve started to use generated content more since more browsers support it (IE8+, FF3+, Safari 4+, Chrome 4+). The following are a couple of examples I have built for a project to streamline my pages. Triangles in CSS? This is a really zoomed in view of the design; the tricky part was the little triangle shadow on the right hand side. Instead of adding an additional element and using an image, I just used generated content and a little bit of CSS trickery.
Extreme Programming Rules
Planning User stories are written. Release planning creates the release schedule .Overview The Mouseover DOM Inspector, or MODI for short, is a favelet (also known as a bookmarklet) that allows you to view and manipulate the DOM of a web page simply by mousing around the document. Browsers currently supported are Firefox , Mozilla , Netscape 8 , Opera 7.5+ and MSIE6+ on all of their respective Operating Systems. To begin using the Mouseover DOM Inpsector, simply add the following link to your bookmarks by right clicking and selecting "Add to Favorites" or "Bookmark this Link" or whatever the nomanclature of your browser of choice. Bookmark this link for MODIv2
slayeroffice | tools | Mouseover DOM Inspector v2.0 Help
IE6 Three Pixel Gap
I've provided advanced CSS consulting for Milo and many other big sites. Hire me to help you too.
Skip to Example An alternative to image-only CSS maps has been published. If you're looking for an easier way of creating image maps involving a single image, you may be interested in reading CSS Image Maps, Redux Below is a sample image map that's built entirely using CSS and XHTML.
CSS Image Maps - Flickr-like Technique?
forms: checkbox and radio button
What is the difference in the web form elements checkbox and radio button, what are the possibilities to modify their appearance by using the attributes and CSS properties, or why it is not possible to remove the border of checkbox, are going to be answered in this article. Further, experimental muliple state checkbox, based on current HTML text box is demonstrated. Live form which follows is appended by corresponding CSS code and is intended for comparison of live form in your actual browser with screenshots from other browsers.
Pre 2006 copyright © stu nicholls - CSS play Information Another one based on sliding doors this one uses NO images so it can be INFINITELY resized. It also allows the use of the whole tab for a hover effect.
Fitted Doors NO Images
CSS For Bar Graphs
Having a working knowledge of XHTML and CSS when developing applications is a big help in knowing what can be done client-side and what should be generated server-side. Recently we’ve had to tackle some interesting visualizations which we coded in XHTML and CSS. The method we used, while fairly simple, was a big help to the engineer and created a very flexible and inexpensive solution. We thought we would share our solution and code in case anyone else ran against similar situations.Doug Bowman’s Sliding Doors is pretty much the de facto way to build tabbed navigation with CSS , and rightfully so – it is, as they say, rockin’ like Dokken. But since it relies heavily on floats for the positioning of its tabs, we’re constrained to either left- or right-hand navigation. But what if we need a bit more flexibility?