webtoolkit4.me » CSS

CSS3 Buttons using nothing but Pseudo-elements

Gerasimos — Thu, 12 Jan 2012 09:25:19 +0000

A really nice tutorial can be found over at Codrops about CSS3 buttons and the use of pseudo-elements. Don’t forget to check the demos where you can find 5 different button styles.

SpriteCow

Gerasimos — Wed, 22 Jun 2011 06:31:43 +0000

Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable CSS. How useful is that?

DD_belatedPNG: better PNG background-image support for IE6

CSS3 animations and their jQuery equivalents

Gerasimos — Sat, 18 Jun 2011 11:52:34 +0000

A really nice comparison chart with demos can be found over at marcofolio.net. The chart provides a small set of animations that we can create using pure CSS3 (webkit browsers only at the moment) and their equivalents using jQuery.

CSS Lint – Improve your CSS Code

Gerasimos — Thu, 16 Jun 2011 06:25:10 +0000

Nicholas Zakas and Nicole Sullivan released a really great tool called CSS Lint which according to its authors:

CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

The project is open source and available at github.

Flux Slider – A jQuery / CSS3 slider

Gerasimos — Thu, 09 Jun 2011 07:28:28 +0000

At some point in a project you might have used a slider of images for e.g. your featured articles or something. While there are literally hundreds of these out there, Flux goes a step further and while browser support is not the best, have a look at it as it utilizes some really great CSS3 effects. As the author states, you can either use jQuery or Zapto.js. In order to view the demo you need a browser that supports CSS3 transitions. Good stuff.

PaintbrushJS by Dave Shea

klou — Sat, 21 Aug 2010 17:40:14 +0000

PaintbrushJS is a lightweight, browser-based image processing library that can apply various visual filters to images within a web page. So, who’s into photoshop filters with just a little Javascript, CSS and HTML elements? Your “thank you” goes to Author of Mezzoblue, David Shea! Related posts:Smoke Effects: 42 High Resolution Photoshop Brushes Moogenda: a calendar [...] Related posts:

CSS and jQuery tutorial: Inline Modal Window

Gerasimos — Mon, 26 Apr 2010 15:45:39 +0000

As the author of this tutorial says, and i totally agree with him, there are times that out of the box solutions for modal windows are not working as they should. Especially when you have to combine scripts things can get really messy. So over at sohtanaka.com you can find a really good tutorial on how to create your own inline modal windows with css and jquery.

CSSDesk – Dynamic CSS Sandbox

Gerasimos — Tue, 13 Apr 2010 11:20:48 +0000

Online CSS tools are becoming really popular. One of them is CSSDesk that let’s you quickly test html code / css styles with the ability to download the snippet. Great tool.

Drop down menu with CSS and jQuery

Gerasimos — Wed, 29 Jul 2009 08:57:20 +0000

jankoatwarpspeed.com released an excellent tutorial on how to create an alternative drop down menu using only CSS and jQuery. HTML’s Select element is really useful but impossible to style it the way you want (Hello IE). The other drawback is that it only supports text. With Janko’s solution you can use images too.

SlickMap CSS

Gerasimos — Thu, 09 Jul 2009 07:36:08 +0000

“SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.”

Features and Benefits

Eliminates the need for additional software
Easily revised with clients on-the-fly
Clickable anchors with visible URLs
Design process results in working HTML code