DD_roundies: Code-only rounded HTML boxes 2011/4/8: It is high time I update the documentation here. This plugin got as far as supporting IE8 Release Candidate 1. That was a while ago. I spent some time away from the project before IE8 final was released. Foolishly, I never wrote anything to this effect because I'd hoped to give it a new college try at some point. Turns out I like riding my bicycle during my free time more than maintaining this project. That said, IE9 is supposedly offering itself as an update. This was a neat experiment, but note that I never took the version numbers out of "alpha" mode. If I were truly sore on this subject, I would take this page down; I will leave it up for posterity instead. This is a Javascript library that makes creation of rounded-corner HTML boxes easier, with a focus on Internet Explorer. IE is supported through use of VML. Since Opera doesn't currently (time of writing: 2009-01-01) support border-radius, this library doesn't do anything in Opera. Table of Contents Quick summary:
CSS Decorative Gallery Did you like my previous CSS tutorial on how to create gradient text effects? I'm using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. View Demo Gallery Download Demo ZIP What Are The Benefits Of This CSS Trick? Saves Time — You don't have to manually create the decorative template in Photoshop and export the individual image. Basic Concept (see demo) You need to insert an extra <span> tag within the <div> tag, with which we'll apply a background image to create the overlaying effect. Then in the CSS, the key point you have to remember is: specify the div element to position:relative and the span element to position:absolute. IE PNG Hack To make the transparent PNG image work on IE6, I use this wonderful iepngfix.htc hack. Look and Feel The jQuery Solution (see demo) #1. #1b. #2. #2b. #3. #4. #4b. #5. #5b.
Form Elements: 40+ CSS/JS Styling and Functionality Techniques Aug 17 2008 Designing effective web forms isn’t easy, as we need to figure out more practical styling and functionality techniques to provide a great user experience. Recently there have been a number of noteworthy techniques such as styling different form fields, live validation, Context highlighting, trading options from field to another, slider controls and more – using CSS and different Javascript libraries. Below we present findings of search to more than 40 tutorials and demos to showcase the capabilities and robustness of CSS and Javascript. You might be interested to check other CSS related posts: 1-Styling dropdown select boxes- To style a dropdown select box is heavy work. 2-<select> Something New, Part 1-With a little DOM scripting and some creative CSS, you too can make your <select>s beautiful… and you won’t have to sacrifice accessibility, usability or graceful degradation. 3-Styling even more form controls-There are a lot of controls that can be used in an HTML form. Homepage
Video Screencasts #130: First Moments with Grunt There are all these tasks that we need to do as front end developers. Concatenate and compress our files. #127: Basics of JavaScript Templating A template is a chunk of HTML that you need to inject onto the page. #126: Using Modernizr Should Modernizr be part of every modern web project? #124: A Modern Web Designer’s Workflow This is a presentation I gave at conferences in late 2012 and early 2013. It talks … #121: The Right CMS is a Customized One The perfect CMS to suite the needs of any non-trivial content-oriented website does not come out-of-the-box. #119: Let’s Answer Forum Posts! In this screencast we live answer more forums posts with no planning whatsoever. #117: Let’s Attempt To Do a “Pull Request” I’ve never in my life submitted a “Pull Request” on GitHub. #115: Don’t Overthink It Grids Even if the layout of a site is simple as a main content area on the left and a sidebar on the right, that’s a grid. #113: Creating and Using a Custom Icon Font
Font Stack Builder | Build and preview your CSS web font stacks! Want to preview your own header text? Just edit any box and hit "Return" to update. Paragraph text is static. Ideal Font Start by choosing your ideal font, often the least-commonly available in the stack. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. percent of users will have this font Mac Option Next, choose a fallback for Mac users (roughly 12% market share). Windows Option Now, choose a fallback for Windows users (roughly 85% market share). Linux Option And last, a fallback for Linux users (roughly 3% market share). Web-Safe Font "Web-Safe Fonts" are fonts that are installed on nearly all computers by default. Default Last of all, specify a general fallback for the tiny percentage of users who do not even have the "Web-Safe" fonts available. Voila! font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Dejavu Sans", Verdana, sans-serif ; Credits Site design © Erin Lawrence, 2011. Mm
Software/Fonts Fonts Lists of Free/Libre and Open Unicode fonts Draft Recommendations for Default Unicode Fonts By Script Introduction Free/Libre Open Source (FLOSS) desktop infrastructure has matured rapidly in the last few years. As GNU/Linux and other Free Software / Open Source operating systems become mainstream all over the world, there is an increasing need for distributors of these operating systems to be able to build out font infrastructure from a common basis or set of standards. This draft document represents the beginnings of one part of that effort and follows from a recent discussion at the GNOME User and Developer European Conference (GUADEC, on figuring out the most appropriate FLOSS fonts that a distribution could choose for various Unicode script blocks. The task of choosing a set of default fonts has both objective and subjective aspects to it. Testing Please collect test material on per-script pages and link them from the Software/Fonts/Tests page. African Scripts
Removing The Dotted Outline Anchor links (<a>'s) by default have a dotted outline around them when they become "active" or "focused". In Firefox 3, the color is determined by the color of the text. I believe in previous versions and in some other browsers it is by default gray. This is default styling for the purpose of accessibility. You can try it for yourself by clicking on a link and mousing off of that link before letting go. Usually, this default styling isn't a big deal. Bear in mind that this styling literally uses the "outline" CSS property. How to remove it If you want it gone, and you want it gone on every single anchor link, just include this as a part of your CSS reset: In general, I recommend just leaving the default outline styling active, but there are a few circumstances where it is quite annoying and should be turned off. Make sure to add in new focus styles a:hover, a:active, a:focus { // styling for any way a link is about to be used } Wow. Flash Firefox Inputs Share On
CSSrefresh - automatically refresh CSS files How to fix the superscript and subscript line-height problem with CSS If you code CSS / XHTML, you are most likely familiar with the Superscript and Subscript tags. If you use these tags in a situation where there are multiple lines of text you might run into a common problem. The problem is that the Super or Subscript characters push the lines of text further apart to make room for the character. This leaves you with an ugly looking block of text, with 2 lines with too much space between them. What needs to be done is to undo this default setting of pushing the lines apart. Here’s is the CSS to do just this. Here’s another method some people use which you can try.