Pure CSS GUI icons

Tags:

While I was listening to Sitepoint’s 118th Podcast the other day and they mentioned a very interesting CSS 3 experiment.  Sadly this won’t be working with IE just yet so it’s not something we can put to use right away, but the idea of Pure CSS icons is quite neat :)  The use of pseudo elements to create the icons out of pure CSS is truly innovative and makes me start to think about all the code that could be cleaned up by taking advantage of pseudo elements as opposed to adding in more DIVs to get certain background and border effects…

Regardless, it’s an interesting peek in to what we’ll be able to achieve once CSS 3 is fully supported

http://nicolasgallagher.com/pure-css-gui-icons/demo/

Permalink » No comments

Free certifications from Gild

Tags: , , , , , ,

I was looking at those pricey w3schools certifications, but everywhere I asked said it was a big waste of money. So I decided to see what alternatives there were and see if there were any certifications that were especially well know that I should take.

What I did find was the Gild website where you can get certifications for free!

The price is right, and if I learn something along the way then I say it’s definitely time well spent.  I am still considering the w3schools certifications, but I’m going to start out with the free ones from Gild and see where that takes me.

http://www.gild.com/

Permalink » No comments

Javascript Style Reference

Tags: , , , ,

I’m always forgetting what the JavaScript equivalent is of certain CSS styles.  for instance you could change the border by:

document.getElementById(‘myText’).style.border = ‘1px solid #333′;

CSS PropertyJavaScript Reference
backgroundbackground
background-attachmentbackgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-width borderTopWidth
border-widthborderWidth
clearclear
clipclip
colorcolor
cursorcursor
displaydisplay
filterfilter
fontfont
font-familyfontFamily
font-sizefontSize
font-variantfontVariant
font-weightfontWeight
heightheight
leftleft
letter-spacingletterSpacing
line-heightlineHeight
list-stylelistStyle
list-style-imagelistStyleImage
list-style-positionlistStylePosition
list-style-typelistStyleType
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
overflowoverflow
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
page-break-afterpageBreakAfter
page-break-beforepageBreakBefore
positionposition
floatstyleFloat
text-aligntextAlign
text-decorationtextDecoration
text-decoration: blinktextDecorationBlink
text-decoration: line-throughtextDecorationLineThrough
text-decoration: nonetextDecorationNone
text-decoration: overlinetextDecorationOverline
text-decoration: underlinetextDecorationUnderline
text-indenttextIndent
text-transformtextTransform
toptop
vertical-alignverticalAlign
visibilityvisibility
widthwidth
z-indexz-index
Javascript CSS Style reference

Shamelessly stolen from: http://codepunk.hardwar.org.uk/css2js.htm

Permalink » No comments

Alignment issues

Tags: , , , , ,

Ever have this problem where your centered elements will “wiggle” out of place when you adjust the size of your browser?  It’s just by one pixel, and annoys me to death.

I found this article about it: http://acko.net/blog/css-sub-pixel-background-misalignments

It seems like it’s a margin/padding issue.  I took the offending div element and added “margin-left: 1px;” to it’s class and it worked!  Beautifully :)  You may also need to nudge any background images by one pixel.

It does concern me that other elements on the page align perfectly, where it was only the #footer div that was giving me grief.

UPDATE

The aformentioned fix applies to 100% divs that have a centered background.  I came across this same problem in a div that was set to margin:auto;.  I went ahead and added “margin-left: 1px;” to the body and that fixed everything up nicely :)

Permalink » No comments