Posts Tagged ‘CSS’
February 4th, 2010
In the past two years, increased browser support has transformed CSS3 from a fringe activity for Safari geeks to a viable option for enterprise level websites. While cross-browser support is often too weak for CSS3 to hold up a site’s main design, front-end developers commonly look to CSS3 solutions for progressive enhancement in their sites. For instance, a developer might add a drop-shadow in Firefox, Safari and Chrome using -moz-box-shadow and -webkit-box-shadow, and then be comfortable with this design enhancement falling off for IE users.
But wouldn’t it be great if IE users could see the better version of the page? Fortunately there are cross-browser hacks for the more common CSS3 attributes. These hacks not only allow CSS3 attributes to work in all browsers, but in turn allow designers and developers to use CSS3 in the central styling of their sites.
In this article we’ll walk through … Read more…
Tags: cross-browser, CSS, CSS hacks, css3, IE, Opera, rounded corners, SVG, vector
Posted in CSS | 46 Comments
December 22nd, 2009
In Javascript it often makes sense to attach a stylesheet rather than style a bunch of individual attributes. Appending a stylesheet to the DOM has a number of advantages:
-
Stylesheets can be easier to work with than Javascript—it’s just more natural to use CSS syntax for styling.
-
It’s nice to avoid the cross-browser headaches associated with Javascript styling. Compare CSS’s simple float: left to Javascript’s style.styleFloat = ‘left’ and style.cssFloat = ‘left’.
-
Appending a stylesheet is better for performance when styling 15 or more elements.
-
CSS allows you to leverage pseudo-classes and define styles with the simple a:hover selector instead of both onmouseover and onmouseout event listeners.
There are a couple ways to append a stylesheet. Although it’s usually best to attach an external stylesheet, there are times when you need to build a stylesheet on the fly with Javascript. Let’s walk through the code we’ll need to append … Read more…
Tags: append, best practices, cross-browser, CSS, DOM, front-end, javascript, on-the-fly, unobtrusive, web standards, webdev
Posted in front-end | 1 Comment →
May 7th, 2009
Contact-Pop is a jQuery plugin that makes contact forms with grayed out overlays incredibly easy. The basic script grabs any links that point to your contact page and flags them for the Contact-Pop popup. When these links are clicked, Contact-Pop grays out the page and pulls in the contact form using AJAX. That means that with just a few lines of code, you can convert your site to use Contact-Pop’s form and overlay rather than your current contact page.
While there are a lot of options for producing grayed out overlays in jQuery, Contact-Pop provides a more robust and specialized solution for in-page contact forms. The main advantage is ease of use: simply flag any links to your current contact page by href or jQuery selector, and ContactPop does the rest. Combining this simplicity with a plethora of customizable options, Contact-Pop is a useful plugin for … Read more…
Tags: AJAX, best practices, blog, CSS, customization, forms, front-end, javascript, jQuery, PHP, plugins, unobtrusive, web design, web2.0, webdev
Posted in webdev | 33 Comments
March 24th, 2009
It’s time for developers to stop complaining about web typography. Custom font embedding has been around for years, and it has finally gotten to the point that typography nerds can be equally happy with the fonts on a website as they are with the Photoshop comps. Many of the things that were a total pain to support previously have become a piece of cake. Leading, kerning, and all the major typography buzzwords have been handled for some time. Even drop shadows and Photoshop-style font rasterization options such as ’strong’ and ‘crisp’ are now fully supportable.
So let’s make sure that we don’t become dinosaur developers, and get up on these modern methods of custom font embedding.
In this article we‚Äôll cover all types of font embedding, from older image replacement methods to embedding fonts with Flash, as well as native browser methods and even full Javascript … Read more…
Tags: best practices, cross-browser, CSS, flash, front-end, ImageMagick, javascript, licensing, typography, w3c, web design, web history, webdev
Posted in front-end | 13 Comments
December 30th, 2008
Flipbook is a jQuery plugin that produces a movie effect by running images in quick succession. The concept is similar to something I always did in middle school: doodling in the margins of my notebooks to make short movies. Times have changed and nowadays I use a Javascript object, pulling the images dynamically with jQuery’s AJAX function and a PHP script 
. But don’t worry, it’s just as easy to use as a real flipbook.
The jQuery Flipbook Plugin is built around my jQuery slideshow tutorial. It’s very flexible, providing great options for both new and seasoned developers alike. You can easily make anything from a short film to an image slideshow to a text viewer.
Tags: AJAX, animation, CSS, downloads, front-end, javascript, jQuery, object oriented, PHP, unobtrusive, video, webdev
Posted in webdev | 2 Comments
October 20th, 2008
QuickFlip is a jQuery plugin I wrote that uses a CSS trick to cause a div, paragraph or any other piece of HTML markup to flip like a card. With a result similar to the UI animation on the iPhone, this jQuery plugin is easily integrated into your webpage to make any portion appear to flip and show its back.
When a flip occurs, the front panel is split in half with Javascript. The right and left halves slide into one another, and afterwards the opposite occurs with the back panel. While it‚Äôs not as smooth as some Flash animation, it all happens so quickly that it really looks like the panel is flipping over (more…)
Tags: animation, CSS, downloads, front-end, jQuery, plugins, web design, webdev, widgets
Posted in front-end | 27 Comments
August 27th, 2008
Inevitably, when finishing development of a front-end, I find myself going through the painstaking process of cleaning up extraneous CSS styles. This style was for debugging, this block was for a page that got nixed, this piece I used when conceptualizing the site another way: I don’t think it’s possible to develop a website without removing some styles at the end. Dreading another round of CSS cleanup, I considered programming a tool to spider a site and tell me which parts of the stylesheets were used. It seemed a daunting task so I checked online, and sure enough, someone had already developed it, and far better than I could have. The tool I found, Dust-Me Selectors, is a Firefox extension that makes cleaning up CSS a snap. It can spider an entire site or a group of pages to determine which CSS blocks are unused … Read more…
Tags: CSS, front-end, plugins, workflow
Posted in front-end | No comments
August 18th, 2008
When I was seven, my all-time favorite video game was T&C Surf Designs for the 8-bit Nintendo® (NES). Feeling nostalgic this weekend, I developed a version of this old school game using jQuery and Javascript.
Up and Down to move, Left and Right to skate faster or slower, Spacebar to jump
After playing Javascript Mario Kart, I’ve been wanting to develop a classic video game with jQuery. T&C seemed like a good fit because its motion and overall simplicity are ideal for jQuery’s animation library (and it’s really fun).
I’m fairly pleased with the performance, which is vastly improved through the use of cell-based collision detection. Instead of having to check for collision every pixel, it can be checked every 32, with huge processing savings. Additionally, the use of CSS sprites greatly reduces the number of HTTP requests and the need to use … Read more…
Tags: cross-browser, CSS, javascript, jQuery, old school, performance, unobtrusive, video games
Posted in webdev | 16 Comments
July 29th, 2008
In the interest of following jQuery’s motto of “writing less and doing more,” let’s write a simple slideshow using jQuery, JavaScript and a bit of CSS.
For starters, our main goal should be keeping the markup as clean as possible: <div id=”slideshow”> <img src=”img/img1.jpg” alt=”" class=”active” /> <img src=”img/img2.jpg” alt=”" /> <img src=”img/img3.jpg” alt=”" /> </div> Now let’s use CSS to position the images on top of each other and bring the active image to the images on top of each other and bring the active image to the top level with z-index:
Tags: animation, CSS, front-end, javascript, jQuery, webdev
Posted in webdev | 227 Comments
January 1st, 2008
It’s a new year, and what better way to start off than with a lengthy rant. Strap yourself in.
People often ask me why I am so concerned with writing standards compliant HTML, and they have good points, mainly that it takes longer to develop something that is compliant, and the only people who really know if it is are other developers. I’ve always been in favor of standards compliant code, but to be honest, for a long time I didn’t even know why I did it, it was really just nerd lore to me, the big nerds wanted it, and I agreed blindly. You might think that a production environment with constantly encroaching deadlines would make me throw my compliance to the wind, well to a certain extent it does (although I write standards compliant XHTML out of habit, I do not have time to fix other people’s … Read more…
Tags: CSS, web standards, WYSIWYG
Posted in webdev | 4 Comments
