CSS-Plus

Gaussian Blur and CSS3/SVG

cssplus-admin — Tue, 27 Mar 2012 15:15:16 +0000

Gaussian blur is something I use a lot when it comes to Photoshop. It would be very handy to have that kind of ‘filter’ power within a browser environment.

Before we get started, I think it’s just important to understand that both the SVG and CSS filter properties affect an element and all of it’s children. A child element cannot be ‘un-blurred’, only blurred more. There are a few methods of recreating this Gaussian blur effect, some work cross-browser, others don’t but will be supported in future.

In the example jsfiddles you may notice HTML IE conditional statements: Usually those conditional statements are applied to the element and I’ve added them to a div to mimic that functionality.

CSS3 text-shadow

I’m sure you’re either aware of, or easily understand how this trick works. Very simply, you give the text a text-shadow and make the it transparent so that only the shadow is visible. This gives a simple and effective blurred text effect. Usually I would detect for IE9 but it’s necessary in this case since IE9 doesn’t support text-shadow.

Problems

Opera doesn’t currently support the transition to the text-shadow property. The blur works well though!
I’ve applied a lte-IE8 shadow filter to the text. It looks more like a smudge than a blur, but there you have it – use it, don’t use it.

Fallback

Use Modernizr ( or feature detect manually ) for text-shadow support to apply fallback styles. This is necessary due to the fact that the text has a transparent color and without the shadow, the font is illegible.

SVG blur filter applied to a SVG element

The title may seem superfluous but it’s actually quite important to understand when it comes to SVG filters. SVG supports filters and we can easily and freely apply these filters to all kinds of SVG elements. Note: NOT all kinds of HTML elements, I’ll elaborate a little later.

Problems

Chrome isn’t currently able to apply a SVG filter if one has already been applied to an element. This means: if a SVG element contains a filter, another filter won’t be applied via class change, hover or any other CSS pseudo class.
IE6-IE8 doesn’t support SVG within HTML. They see these tags as made up tags and treats them as that. They elements are not able to be styled unless the SVG is wrapped in an element and that wrapper element is styled. Alternatively document.createElement() could be used (This is what the HTML5 shim/shiv makes use of. more about it by Paul Irish).
No browser supports the transition property being applied to a SVG element

SVG blur filter applied to a SVG image element

Most of us want to apply a blur filter to images so the above example is all well and good, but it probably won’t be of too much assistance since the CSS3 text-shadow blur does the same thing. We’re not able to drop elements into SVG an image, luckily SVG has it’s own way of inserting external images. Suddenly this gives us quite a lot of freedom when it comes to Gaussian blur or other SVG filters.

Most of the above problems apply here as well as a few more:

Chrome can’t apply a SVG filter if one has already been applied, however there is a work around for this in Chrome Canary. If you apply a filter to a parent SVG element and a hover filter to the child element, the hover effect will take place.
No browser supports the transition property being applied to an SVG element
IE9 renders the image (without an applied filter), But lte-IE8 doesn’t display the image whatsoever.

SVG Blur Filter applied to HTML elements

Problems

Firefox is the only browser that supports this
The transition property still doesn’t take affect when applied

CSS Blur Filter

This is where it all gets very exciting. A CSS property that fully supports all kinds of filters including the most important one (for this article at least), the blur filter. It is more simple to use than you could ever imagine – element { filter: blur(2px) }

Unfortunately this can’t be applied to SVG elements, however there is a bit of a work around: You can wrap the SVG element within an HTML tag and apply the CSS filter to that. The only draw back is that the entire SVG element will be blurred, and not a single element.

It’s merely a filter property with a blur value applied. Absolutely amazing. On top of everything, since it’s a standard CSS property, the transition property works perfectly. You can transition from a normal image, to a half blurred/half grey scale image if you’d like. It’s all up to your imagination.

Problems

The only ‘browser’ that currently supports this is Chrome Canary

The “problem” is quite a large set back here. The only browser that supports this is a nightly browser version – This means that we should pretty much stay away from it until at least 2 popular browsers support it… Right?

I think you could use it now actually

As long as it’s not an absolutely dependant feature, browsers will degrade gracefully – If the property isn’t supported, the image is unaffected.
It should be supported in Chrome pretty soon
You could use the CSS filter (webkit only) along with the SVG filter applied to an HTML element (firefox only)

Here is an example of the CSS Filter used alongside the SVG filter.

HTML 5 Rocks has a cool article and demo about this property – Keep in mind the demo currently only works in Chrome Canary.

Good old fashioned images

This is obviously the most popular at the moment due to the browser support.

Problems

Increased page size due to extra images
Increased HTTP requests (if you don’t use a sprite)
Annoying to manage if something has to change across all images

What was learnt?

Chrome can’t swap SVG filters. This means that an element can’t have a SVG filter applied and then have that filter change on hover. IE9 can’t do much of this which was expected, but what I didn’t expect was for Safari to be almost as bad at it.

Anything else?

You could blur the images via the HTML5 canvas, but that’s another article.
I don’t really mention Safari in this article – Most of this doesn’t seem to work in Safari 5.0.1 for Windows.
The CSS filters are going to be very cool

Article influences

Paul Irish helped me look in the right direction – There is a surprisingly little amount of information about this topic out there.

@jamygolden canary supports CSS filters dvcs.w3.org/hg/FXTF/raw-fi… certainly the shorthands. havent tried the others. you should!
— Paul Irish ◕‿◕ (@paul_irish) March 6, 2012

Paul’s article SVG filters on HTML5 video was quite informative. High Res Browser Icons was a life saver and I now make use of CSS3 Please multiple times a day.

The IE ‘blur’ method which was used originates from a useragentman article. Subsequently Zoltan Hawryluk’s (the owner of the useragentman blog) added some really helpful comments in the comments area and helped achieve a really good looking text-blur effect for IE7+.

My Journey to the Perfect Text-Editor

cssplus-admin — Mon, 20 Feb 2012 15:39:40 +0000

This article is about why I feel Sublime Text 2 is the best text editor ever and how/why I ended up using it. I’ve decided to write this because I seem to talk about this topic quite often and it would be easier for me to reference someone to an article rather than explaining my rationale over and over again.

Dreamweaver

I started using Dreamweaver’s design mode when I began web-development. I didn’t touch HTML. I started using some of the DW javascript functionality which I thought was quite powerful at the time ( this was literally all done without looking at HTML ), but I was getting frustrated with the tabular layout – It felt like I was fighting it more than working with it. Changing the width of tabular layouts isn’t easy when you have multiple nested tables.

I started seeing all kinds of unbelievable tutorials and javascript plugins online. Things like dragging elements around as if they were windows in an operating system. I slowly started manipulating other people’s code within the DW code view and eventually I was permanently using that view. I felt design mode was for newbies and tabular design was old-school and evil. It was at this time that I started following popular online blogs such as CSS-Tricks and David Walsh, etc.

Dreamweaver features that stood out for me:

I enjoyed the syntax highlighting colours
Wrap text in element functionality
tags closed automatically
Find/replace throughout open files

Note: It took Dreamweaver 30 seconds to load up so I could take the screenshot. Core2Quad 2.3ghz with 3gb of ram.

Notepad++

I eventually moved over to Notepad++. I enjoyed how quick it was – Lightning quick compared to the bulky Dreamweaver. However it didn’t have most of the things I liked about Dreamweaver and it wasn’t nearly as aesthetically pleasing with regards to icon layout, icons, colours in general and the syntax highlighting. I actually found – and still do find – the toolbar of icons ( including print, copy/cut/paste, find, etc) very insulting. Eventually I was using Notepad++ without turning back to Dreamweaver for anything, but still I didn’t feel completely comfortable with it, something was missing.

Note: I probably didn’t use this editor to it’s full potential.

E-TextEditor

I began noticing how many people were talking about TextMate but I could not use it since it was/is a Mac specific application. After some googling I noticed there was a ‘Windows’ version of TextMate called ‘E-TextEditor’.

I found the syntax highlighting very pleasing and it had almost everything I could want, including FTP built into the app – This felt much more simple to get going than the Dreamweaver FTP functionality. One thing it didn’t have was ‘Find/replace throughout open files’. This was something I had missed since Dreamweaver.

Without a doubt, this became my text-editor of choice.

GEdit

I was getting fed up with Windows for various reasons and I couldn’t afford a Mac, so Linux ( Ubuntu ) was my next logical step. GEdit was/is the default text editor for Ubuntu and I was surprised that the default text editor that was so ‘advaced’ compared to other default OS text editors. This mainly included pleasing syntax highlighting and tabbed functionality. GEdit didn’t have the ‘Find/replace throughout open files’ functionality and something about it didn’t feel great when using it for larger projects. As far as features went, it didn’t have too many that I was aware of. For small HTML/CSS/JS projects or tests it was perfect though.

Scite

By default Scite has ( or my default installation at the time ) the line numbers disabled. This is/was highly annoying and on top of that, it wouldn’t ‘remember’ my option to keep line numbers enabled. Small things like this can really get to me – I want to feel completely at ease, comfortable and happy with my tools.

I didn’t really like the icons and the general look and feel of the editor, however, it was definitely much more advanced and nicer to use than GEdit – with options like “Convert selection to lowercase” to regular expression searches. By this time I had decided Scite was the Linux text editor for me, however as much as I liked it I preferred E-TextEditor, but I had completely moved away from Windows – apart from my virtual machine with PhotoshopCS3 and IETester. It’s difficult using a text editor when I would have switched it for E-TextEditor or TextMate in a heartbeat.

Coda

I began using a Mac at work and it had Coda pre-installed. I had heard almost as much about Coda as I had about TextMate, mainly from Chris Coyier and a co-worker/friend. I enjoyed Coda – It had extremely simple and intuitive FTP support and was very nice to use. Coda had random nuggets I hadn’t seen in editors, like a wildcard character within searches. This could be achieved with regular expressions in other text editors, but the simple option was nice. The lack of functionality I was used to got to me. Coda was nice for larger PHP projects or smaller HTML projects.

TextMate

I was really eager to try out TextMate. I had heard so much about it and E-TextEditor was based on it.

TextMate was very different from other editors – especially since I was new to OSx. It was pretty much just a window of text. All the options could be accessed via keyboard-shortcuts or by the options panel. It took me a couple of minutes to get used to it but I really loved it.

Komodo Edit

As much as I liked TextMate, I could never get completely used to it because at the time I was working on 2 operating systems – OSx ( work ) and Ubuntu ( home/dev ). I was also sure I would end up using Windows for some or other reason in future due to work or somewhere else I was forced to. This meant that I would be using a different text editor on each operating system. This made me feel uncomfortable and I didn’t want to learn to use something I’d end up not using. It felt like a waste of time investment. I definitely wanted to get used to an editor that worked across all platforms. I wanted a text editor I would use for the rest of my life.

My seeking continued until I had found KomodoEdit. It was great. It had a couple of things I wasn’t ecstatic about, but the fact that it was cross platform made me forget about those quickly. KomodoEdit was definitely a very powerful text editor. I was referred to the application by a hardcore PHP backend friend and that made me feel good since I felt that I could grow with the editor if I needed to.

KomodoEdit is a light-weight and free version of KomodoIDE. I had found pretty much everything I had wanted.

Light-weight – Check
Multiple language support – Check
Plenty of options – Check
Powerful – Check
Cross-Platform compatible – Check
Aesthetically pleasing – No
Find/replace throughout open tabs – No

Sublime Text 2

Finally I stumbled upon Sublime Text 2. And it was good.

It had everything I could ever want and more, this went from Multi-select to distraction free mode. It had all the above checks, it was aesthetically pleasing and had an unbelievable find functionality. The Mac text editors ( TextMate and Coda ) look and feel far better to use than applications on other operating systems – It’s like they’re just made better. SublimeText2 has kept this feeling, even on different operating systems. The fact that text editors had to look ugly in Linux and Windows had been something I had wondered about on and off for a long time – Finally there was one editor that broke my perception.

I had never used a dark theme before but the default SublimeText2 was perfect. It had Chrome styled tabs, you could record macros, create your own snippets very easily and it had a visual map of document on the side of the editor ( this seemed like it could get old quickly, but I find it very useful in spotting patterns in larger documents).

The options worked differently compared to any other application I had used before. An options page was a text page in a sort of object/array layout. At first I thought this was temporary and it would be updated in a future version, but I finally realized how brilliant it was. You could search for options via the text editor. Search results appear in another default text-editor tab and it’s all consistent. You don’t ever leave tabs and text, brilliant.

The best part is, it’s only a beta. That’s right, until the time of this writing ST2 is a beta and it gets updated VERY often. New features, functionality and bug fixes come out with every update. ST2 has always been expensive for a text-editor, atleast $59 is expensive for one to me, but ST2 allows you to trial the software for as long as you’d like. On the site it says:

Sublime Text may be downloaded and evaluated for free, however a license must be purchased for continued use.

The license comes with a bunch of perks, the most noticable includes a per-user license, not per-install or per-machine. This means you can use the registered version on whatever operating system and machine you’re using. After running and using it on all operating systems I decided to purchase it and I would urge anyone who loves it half as much as I do to support the development.

On top of all of this, I’ve subsequently began to learn Ruby and it’s got a Ruby build system installed – along with a bunch of other builds, including ant build. ST2 supports a vast amount of languages ( more than just syntax highlighting ), has plugin support and it supports Textmate snippets. The community is also pretty great.

As you may possibly know, I develop HTML, CSS, Javascript, PHP and Ruby. I’ve got friends who I’ve convinced to permanently use ST2 and they use languages ranging from Python to C++.

According to me, it is by far the best text-editor around.

tldr;

Sublime Text 2 is awesome.

Disclaimer

I don’t own any of the icons used, they belong to the text-editor/operating system.
I may have unfairly moved on from some of the text editors due to lack of specific functionality (or perceived lack of), aesthetics and cross-OS support. I may have been a bit unfair and some of you may disagree with me, but for me ST2 wins in every field. Also, if I’ve misrepresented any text-editor above, please correct me by with a comment.

Bulletproof full page background images don’t exist

cssplus-admin — Thu, 05 Jan 2012 16:23:16 +0000

They don’t and can’t exist. Before I continue, let me explain what a ‘bulletproof full page background’ is. This is a solution that will always give the ‘perfect’ full page background-image across multiple viewports regardless of which image you are using.
Note: I understand ‘perfect’ is a very subjective term.

I have been asked to create a full page background image before; There was a problem, however…

Images can stretch nicely as long as the proportion remains constant, otherwise the image looks stretched. This is an example of what someone might consider a perfect full page background-image:

As you can see, the scale remains constant and this works with the perfect full page background-image.

Problem 1

The background in the previous example contains the width/height of the viewport. If the second viewport didn’t have the same dimension ratio, that very same background could look something like this:

That is clearly an example of a ‘failed’ full page background.

Problem 2

A typical and easy way to fix it would be to set the background-image width to be equal to the viewport’s width, but leave the height a dynamic size. This would give you something that looks like this:

Obviously the problem here is that the entire bottom area of the image is currently not visible… Unless you scroll down, which defeats the purpose of a full-page background-image.

Problem 3

You could very well set the height to fit the viewport’s height and have a dynamic width. With this example, the output would now look something like this:

This seems like the perfect full page background image solution right? Well… Not really. If we used the exact same technique with an image that has a larger width than it does height, it would look like this:

So, what is the solution?

The perfect solution exists, as long as you don’t feel that ‘perfect’ implies every image should look great with the specific solution. As long as you have background images with similar layouts ( All have width > height or visa versa ) you could use a solution to work with them all.

I have seen a static image used as a centered background image which worked well for that situation.

Conclusion

When it comes to full page background images and dynamic backgrounds, make sure you understand how the dimensions work and pick the right solution for your needs.

Use :pseudo-elements as list-style-image alternatives

cssplus-admin — Thu, 01 Dec 2011 16:25:17 +0000

Styling lists with CSS can be a bit of a pain from time to time. If I require an kind of customized bullet, the first CSS property I think of is list-style: none;. I’ve tried on more than one occasion to use list-style-image but it’s given me nothing but trouble when attempting to position it. A popular alternative is to use the image as a background-image of the list item.

li { background: url(images/bullet.png) no-repeat left top; list-style: none; }

This gives us the ability to move the ‘list-item‘ around as we please without problems. Great solution! right?! No, there are three very annoying (however, small) problems with this method:

You can’t effectively include the list item in a sprite, as you’d run into problems displaying areas of the sprite you wish to remain hidden.
An image obviously can’t work with ordered lists as the numbered list-style-type would require a different image for each list item. This is possible but not very effective as it would require a lot of images and it wouldn’t be ever-expanding – It would have static amount of numbered images.
Adds to HTTP requests – this is especially annoying if you’ve got a couple of different lists all using this method

Those are my two problems I have with the background-image, but I have managed to find a way around it.

Standard background-image method

Before I get started on the way I usually do this, let me show you what I did before and what I think most people do.

The HTML necessary


	SEO
	Content Management System
	Social Network Integration
	Another list item for emphasis

The CSS necessary

.first-example li { background: url(../i/tick.png) no-repeat left 8px; }
.first-example li { border-bottom: 1px solid #eee; font-size: 14px; list-style: none; padding: 10px 0 10px 40px; }

You can see what’s going on, no explanation needed. The only thing to note here is the list items contain a background image and that image is a single file separate from the sprite which adds to http requests.

Make use of pseudo elements

Pseudo elements are our friends. They are that extra bit of gas in the tank. When everything looks dull and there is no easy way to do what it is you want to do, look towards pseudo elements.

We could use pseudo elements as the ‘bullets’. This would solve the problem of showing more sprite than we’d like since we can set the pseudo-element’s width and height and give it the sprite background.

The HTML

The HTML is exactly the same as the first example with. The only difference is the class selector used for us to target.


	SEO
	Content Management System
	Social Network Integration
	Another list item for emphasis

li { border-bottom: 1px solid #eee; font-size: 14px; list-style: none; padding: 10px 0 10px 40px; position: relative; }

ul.second-example li:before {
	content: '';
	background: url(../i/sprite.png) no-repeat left top;
	height: 20px;
	width: 20px;
	position: absolute;
	left: 0;
	top: 8px;
}

ul.second-example li:nth-child(2n):before {
	background-position: -21px 0;
}

Why exactly are we giving every second example a different list item image? For two reasons:

It gives me an excuse to use a sprite in this example
We’re just retro and hip like that

Le’s see what would have happened if we gave the first example the sprite as the background.

List item with the sprite as a background-image

List item with pseudo element using the sprite as a background image – Preferred method

Make use of CSS counters

What exactly are CSS counters? A CSS counter is a function that is accepted by the content property of a pseudo element. You can count whatever it is you like. The amount of

elements in an article, the amount of

elements, etc. In this case we’re going to be counting the amount of

elements. This way we can dynamically give the :before/:after pseudo elements a numerical value which will help to number our list items.

The CSS counter property is within the CSS 2.1 spec. So this means that it has support down to IE8. I understand that it won’t work in IE7 & IE6, but I don’t really care too much — I’d probably just give them the default numerical list-item-type.

Bring on the CSS

Some of CSS following will be the same as the previous CSS, but that’s because the list is styled in a similar fashion.
li { border-bottom: 1px solid #eee; font-size: 14px; list-style: none; padding: 10px 0 10px 40px; position: relative; }
li:first-child { border-top: 1px solid #eee; }

ul.first-example li { content: ”; background: url(../i/tick.png) no-repeat left 8px; }

ol.third-example { counter-reset: li; }

ol.third-example li { position: relative; }

ol.third-example li:before {
	content: counter(li);
	counter-increment: li;
	background: #f692bb;
	color: #333;
	font: bold 14px/20px sans-serif;
	height: 20px;
	text-align: center;
	width: 20px;
	position: absolute;
	left: 0;
	top: 8px;
	-webkit-border-radius: 10px;
	   -moz-border-radius: 10px;
	        border-radius: 10px;
	-webkit-box-shadow: inset 0 0 5px #F0498D, 2px 2px 0 rgba(0,0,0,.15);
	   -moz-box-shadow: inset 0 0 5px #F0498D, 2px 2px 0 rgba(0,0,0,.15);
		box-shadow: inset 0 0 5px #F0498D, 2px 2px 0 rgba(0,0,0,.15);
}

Before I continue, thanks paulirish and jon_neal for CSS3 Please – Quite a helpful tool.

Note: the position relative on the list item is very necessary since you’ll be absolutely positioning the pseudo elements within each item.

To use the counter() function properly, 3 things need to ne done.

The counter of the specific element needs to be reset — Or as I like to think of it, enabled
The counter-increment needs to be told what to count, and by how much. (the increment could be by 2, or 10, in this example we’re going to leave it on 1 by default)
The counter() function needs to be passed into the content property and then told what to count

Ok so first thing to do is to add the counter-reset property to the parent/ancestor container of the item you wish to count. You then give the counter-reset value the element type of the element to count. If you’d like to count the amount of paragraphs in the article element, you could reset the counting by adding the following CSS to your document:

body { counter-reset: p; }
/* Or */
article { counter-reset: p; }

It cascades, so any container will do.

You would then add the counter-increment property to the pseudo element, this tells the pseudo element which element to count and by how much.

li { counter-increment: li 5; }

That example would count in increments of 5 starting on that value, so: 5, 10, 15, etc. If you leave that value out it defaults to 1.

Finally, you would then add the counter() function to the content property of the pseudo element. This literally tells the pseudo element to contain the incremented value.

Conclusion

I find this extremely useful and consider it one of my better CSS tricks.
Browser support isn’t horrible, but not brilliant either — The inclusion of IE7 would make it brilliant. Never the less, it’s completely usable in every day scenarios since I use it fairly often and I give IE7 the deafult numbered styling.

To recap: counter-reset: element, counter-increment: element num, content: counter(element).

Note: I actually make use of the custom bullets via pseudo elements on my unordered list items within my current website design.

How to make the input placeholder more user friendly

cssplus-admin — Thu, 22 Sep 2011 14:15:03 +0000

I’ve always loved placeholder text for input fields. Not too long ago the only way to achieve this would be to create a special javascript function that enabled the desired functionality, but now it magically comes pre-built into HTML5. Incase you’re wondering, placeholder text is the text within an input field that disappears once you click on it. It’s often used in place of a label.

How is it not user friendly? tl;dr – Take me to the tutorial already

Placeholder text can be very helpful and can save a lot of page space while also being aesthetically pleasing. With this great feature, however, comes a problem: If the placeholder text is being used in place of a label, it can become very confusing when you focus on the field and the ‘label’ disappears.

It’s important for users to know:

What field they are currently on
What field they have filled in

Typical input placeholder problem

Which input field am I on?

Based on the image above, it’s impossible to tell what the first/focused field is. It is relatively simple to deduce it’s either a ‘username‘ or ‘email‘ field. The only way to find out which field you’re on would be to remove all the text in the field and blur (lose focus). I have personally been caught by this dozens and dozens of times and I find it very annoying.

One method that websites, such as Twitter, have been adopting is to have the placeholder text fade out slightly on focus, but only disappear once the user inputs some text. This is arguably the way that the HTML5 placeholder should work by default.

An improved version

Normal Placeholder text
Placeholder text fades out slightly on focus
The input field is unknown once text has been added
The title attribute is used to add information

The method that the Twitter login system uses is a big step up from the problem in fig.1, however the same problem still exists once the user has added text.

The title attribute has been used here so a user can see the placeholder text by hovering over the input field which is a great addition. Unfortunately in general, I still don’t feel this is as very user friendly as it could be.

The solution

I would like all of the bonuses of both the placeholder method and the standard label method. I’ve decided there is one basic way to achieve this: Have either the label of the input field or an appropriate icon appear to the right of the field after the field has received focus.

So that’s it, in this tutorial I’m going to show you how you can make a form with placeholder text that is semantic, user-friendly and degrades gracefully for legacy browsers.

The HTML

The following HTML is normal

markup. It’s what we do with the CSS that really matters.


    
        
            
            Your Email
        
        
            
            Your Password

The CSS

#login{font-size: 12px; margin: 0 auto; width: 700px;}
#login li{float: left; list-style: none; margin-left: 30px; position: relative;}
#login li:first-child{margin-left: 0;}

label{line-height: 40px; position: absolute; right: 120px; top: 0; bottom: 0;
    -moz-transition: 0.3s right ease;
    -ms-transition: 0.3s right ease;
    -o-transition: 0.3s right ease;
    -webkit-transition: 0.3s right ease;
    transition: 0.3s right ease;
 	z-index: 0}

input{color: transparent; font-size: 12px; height: 35px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
    -moz-transition: 0.3s all ease;
    -ms-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;}

input[type="email"], input[type="password"]{border: 1px solid #ccc; height: 35px; padding: 0 10px; width: 240px; position: relative;
	-moz-box-shadow: inset 0 0 10px rgba(0,0,0,.06);
	-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.06);
	box-shadow: inset 0 0 10px rgba(0,0,0,.06);
	z-index: 2;}

input[type="email"]{color: rgba(47,130,194,.8);}
input[type="password"]{color: rgba(237,28,112,.8);}

/* Placeholder */
input[type="email"]:-moz-placeholder{color: rgba(47,130,194,.6);}
input[type="email"]:-ms-input-placeholder{color: rgba(47,130,194,.6);}
input[type="email"]::-webkit-input-placeholder{color: rgba(47,130,194,.6);}

input[type="password"]:-moz-placeholder{color: rgba(237,28,112,.6);}
input[type="password"]:-ms-input-placeholder{color: rgba(237,28,112,.6);}
input[type="password"]::-webkit-input-placeholder{color: rgba(237,28,112,.6);}

/* Label */
input[type="email"] + label{color: rgb(47,130,194);}
input[type="password"] + label{color: rgb(237,28,112);}

input:focus + label{right: 10px;}

input[type="email"]:focus, input[type="password"]:focus{background-color: rgba(255,255,255,.8);}

/* Submit */
input[type="submit"]{
	background-color: #333;
	background: -moz-linear-gradient(bottom, #333, #444);
	background: -ms-linear-gradient(bottom, #333, #444);
	background: -o-linear-gradient(bottom, #333, #444);
	background: -webkit-linear-gradient(bottom, #333, #444);
	background: linear-gradient(bottom, #333, #444);
	border: 1px solid #222; color: #fff; cursor: pointer; height: 35px; width: 110px;
}

input[type="submit"]:hover{color: #ff6937;text-shadow: 0 0 1px rgba(255,255,255,.2);}

The CSS mostly consists of general styling, I’d say the most important two lines are:

input:focus + label{right: 10px;}
input[type="email"]:focus, input[type="password"]:focus{background-color: rgba(255,255,255,.8);}

So the label is absolutely placed behind the input field. On focus the label moves to the right while the input’s background fades to a lower opacity. This gives the illusion of the label sliding right while fading in.

That’s pretty much all there is to it. I think it’s a neat little trick.

Let’s give IE a bit of love

As always, IE spoils the party, but as always Modernizr is here to save the day. We can get the form to act almost identically (sans animations) on IE8 and functionally on IE 6 and 7. Firstly, make sure you’ve given either the or the tag IE specific styles. For example:

Also, notice I’ve included Modernizr. I make use of Modernizr on pretty much every project I work on. It allows me to feature detect with javascript and I can make some pretty cool fallbacks with that.

Once we’ve got that set up we can easily start fixing up IE.

IE specific CSS

.ie input{line-height: 35px;}
.ie input[type="email"]{color: #2F82C2;}
.ie input[type="password"]{color: #ED1C70;}
.ie label{right: 10px;}

.ie input[type="email"]:focus, .ie input[type="password"]:focus{
    background:transparent;
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)";
    zoom: 1;
}
.ie7 label, .ie6 label{display: none;}

The CSS just makes things work in IE. Nothing special really. The weird -ms-filter is to add opacity to the background in IE.

Placeholder functionality fallback – jQuery with Modernizr

if(!Modernizr.input.placeholder) {
    $("input[placeholder]").each(function() {
        var placeholder = $(this).attr("placeholder");

        $(this).val(placeholder).focus(function() {
            if($(this).val() == placeholder) {
                $(this).val("")
            }
        }).blur(function() {
            if($(this).val() == "") {
                $(this).val(placeholder)
            }
        });
    });
}

This little snippet does the following:

Detects for the placeholder attribute support. If no support is found, it continues
It then looks for all input elements with the placeholder attribute
It then takes the placeholder value and puts that within the ‘value’ attribute
When focus is given to the element the value is set to none
When blurred, if the value attribute isn’t nothing, it leaves the text alone
If the value attribute is nothing, it replaces it with the placeholder text again

Foreseeable problems

The user can’t see the text if the input is full of characters.

True story, but the opacity of the label is so low that it doesn’t really interfere with the readability of the text itself. A way around this would be to add padding-right which covers the length of the label. The only downside to this would be the input field having to be very long.

In general I think this is fine, but if you’re very worried about this, I’d say add padding-right to the label and use icons instead of text. This will save a lot of space.

Conclusion

I think it’s a pretty solid technique that will leave your website visitors — or me at least — happier and less confused while logging in.

Master the jQuery for each loop

cssplus-admin — Mon, 05 Sep 2011 07:00:01 +0000

The jQuery for each loop can be very powerful. It is used just like any other jQuery function such as .click(), .hover(), etc. and it accepts a callback. As you know, or have probably guessed, the jQuery for each function loops over selected items and does whatever you’d like to targetted items.

You may be asking yourself:

But isn’t that what CSS or jQuery selectors do anyway? What’s the difference?

Standard jQuery for .each()

Not only does the jQuery for each function loop over each selected element, it also keeps track of the element index within the loop. For example:

As you can see in the example, it’s some very basic HTML with some very basic CSS. The jQuery is also relatively simple, I’m pretty sure you would be able to guess what is going on even if I didn’t explain, but I will!

The above example is selecting all

elements and looping over them. It is then adding a class of ‘item-’ with its index value appended to it. The index begins at 0.

The $(this) keyword references each iterated element. This is where .each() becomes very useful.

I feel that’s a pretty straight forward jQuery for each loop that you should be able to get the hang of pretty quickly if you’re fairly familiar with jQuery.

The javascript for loop

If you’re still pretty new to jQuery and you’re feeling adventurous, how about throwing in a javascript for loop instead of a jQuery for each loop? ‘Why’ you ask? Well because it is much faster.

While you won’t notice the difference on small scripts and pages, it could make a difference while looping through many items and even other loops. It’s also never a bad thing to learn some javascsript when you can.

Personally I prefer doing this. It certainly isn’t much more complicated than the jQuery version.

Alright, how is $.each() any different?

If you didn’t already know, there is another jQuery for each function, but it’s not the same as the one we’ve already covered. The $.each() function loops over items in an array or items in an object. I didn’t run into arrays or objects until quite a while after I was comfortable with jQuery, so don’t feel left out if you don’t know what’s going on. I suggest having a look at the jQuery fundamentals page. It covers basic javascript and helps you use jQuery to it’s full potential.

Back to the point: how would we use $.each()? Without further a due, here’s an example!

In this example I’ve used an object instead of an array, but they both work pretty much the same way. First the object obj is declared with a couple of random key and value values. It is then looped over using the jQuery function. As an example, I’ve appended the values to a div and also used the key as the class of each paragraph.

Conclusion

As you can see, there isn’t much to jQuery or javascript for each loops! Save time and make your life more simple by making use of them!

Create Accordions with CSS3, HTML5 and jQuery

cssplus-admin — Mon, 22 Aug 2011 15:35:44 +0000

First thing is first, let me clarify what I mean by Create an Accordion with CSS3, HTML5 and jQuery. I am talking about creating 3 different accordions, one which relies heavily on CSS3, one with jQuery and one with HTML5.

If you haven’t already had to create some sort of accordion by now, I’m sure you will run into it sooner or later. It’s actually a very simple concept that requires very little script to create a fully functional accordion.

Accordions are typically used to toggle extra information. They help to organize and de-clutter information. You could make use of an accordion to display:

child pages in a menu
the answers to questions on a FAQ page
WordPress makes heavy use of accordions in it’s admin-area.
Your imagination is the limit

Whatever the use, it’s essential to have the ability to create any kind of accordion in your web-dev-brain-toolbox.

First, we’re going to create a basic accordion with jQuery, then an accordion with CSS3 and finally an accordion with HTML5. The jQuery version will have excellent browser support while the CSS3 version will have less, and finally the HTML5 version will have the least browser support.

All right, let’s get started.

HTML and basic CSS

This is the basic HTML and CSS of the accordion we’ll be working with:

HTML

The layout is pretty basic.


	Aliquam tincidunt mauris eu risus
	lorem ipsum dolor....
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit
	lorem ipsum dolor....
	
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
	
		lorem ipsum dolor....
		lorem ipsum dolor....

The h2 will be the “button” for the accordion. The element that comes directly after that will be the element being toggled by clicking on the previous h2. Any element, meaning it could be an image, a paragraph, a div containing whatever you want. I feel that’s the most efficient way of creating this type of accordion.

CSS

.accordion{border: 1px solid #ddd; border-top: none; margin: 10px 0; width: 470px;}
#accordion > a{display: block; text-decoration: none;}
#accordion > h2, .accordion > a{background-color: #fff; background-image: url(../img/gradient.jpg);
background-image: -moz-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -ms-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -o-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -webkit-linear-gradient(bottom, #f1f1f1, #fff);
background-image: linear-gradient(bottom, #f1f1f1, #fff); border-top: 1px solid #ddd;
color: #222; font: 14px/30px 'Verdana', sans-serif; height: 30px; margin: 0; padding: 0; text-indent: 10px;}
p{color: #555; font: 12px/18px 'Verdana', sans-serif; padding: 20px 10px;}

The CSS is just doing some basic styling. I’ve thrown in some CSS3 gradients with a fallback image because that’s how I roll.

The jQuery

It’s really amazing at how simple jQuery can make our lives. This is all that is required for the accordion:

$('h3.accordion').click(function(){
    $(this).next().slideToggle();
}).next().hide();

Now if that’s not simple, I don’t know what is.

That’s it. You now have a fully functional jQuery accordion!

The CSS3 version

The CSS version has some slightly different HTML and 2 new CSS lines.

The HTML becomes


	Aliquam tincidunt mauris eu risus
	lorem ipsum dolor....
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit
	lorem ipsum dolor....
	Aliquam tincidunt mauris eu risus
	

		lorem ipsum dolor....
		lorem ipsum dolor....

There are 3 basic changes:

The
s have been turned in to anchor links
The hidden contents have been given an id
The anchor links have been given an href containing the id of the following element with an appended hash

The CSS

The CSS is the same as before, but with the added lines:

a[href^="#accordion"] + *{display: none;}
#accordion :target{display: block;}

Very basically, the CSS is doing this:

Target all anchor links that have an href that begins with ‘#accordion’ and target whatever element comes directly after that.

As for the #accordion :target line, that’s saying whatever is target should just display block. Unfortunately we can’t use the transition property over here since we would have to define a set height. Transition doesn’t animate display or height: auto so the height can’t be dynamic — or maybe I just haven’t figured that out yet.

There is a con to using the CSS3 method: The anchor links cause the page to jump to the :target which is pretty annoying. There are two ways around this that I’ve come up with.

return false with javascript
Make sure the page height is too short to have a scrollbar – This will work, but I’m not serious about this one

The Javascript – Remove page jump

$('#accordion a').click(function(){
	return false;
});

Return false just tells the HTML not react with it’s normal behaviour.

The HTML5 method

I think this is the most semantic way of doing this and it has a pretty decent fallback (Same fallback as the jQuery version). If the sliding functionality isn’t 100% essential, this is a pretty cool way of doing it. Currently only webkit (Chrome and Safari) support this.

The HTML


	
	  Vestibulum auctor dapibus neque
	  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum.sis luctus, metus
	
	
	  Vestibulum auctor dapibus neque
	  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum.sis luctus, metus

The CSS

By default the browser adds a little arrow next to

. I didn’t want this so I’ve turned it off:

details summary::-webkit-details-marker{display: none;}

Conclusion

The jQuery method is definitely the most cross-browser-friendly by far, but I think the HTML5 way may because used more and more as the browsers progress.
Regardless of the CSS3 methods’ cross-browser issues, it doesn’t really work well enough for us to use in production without the added bit of javascript so I think it’s best to use one of the other two methods.

jQuery if / else statements

cssplus-admin — Tue, 26 Jul 2011 16:45:33 +0000

There is no such thing as a jQuery if / else statement. Shocking, isn’t it? You might be thinking something like: “There must be! In fact, I’m 99% sure there is!“.

They don’t exist. This is because jQuery is javascript. What you’re looking for is a javascript if/else statement.

Why I decided to write about jQuery if

This article exists because when I started out with jQuery, I looked everywhere for a ‘jQuery if / else statement‘. It blew my mind that something as important as an if statement didn’t exist on the web. It took me a while to realize that I couldn’t find it because I was looking in the wrong place. It was because of this ~~giant journey~~ problem I decided to write an article for anyone following a similar path.

looking for useful jQuery tutorials?

Before I go on, if you’re looking for some pretty useful jQuery tutorials, have a look at

What is jQuery?

jQuery is a one of many javascript libraries. Very simply, these libraries are shortcuts created by people with crazy javascript skills for people like you and I. You could look at these libraries as one giant javascript plugin which make writing javascript 100 times more simple.

jQuery syntax is javascript, and therefore a lot of the things you do in jQuery are pretty much the same in plain ol’ javascript. ‘jQuery if statements’ are written the same way as javascript if statements, since it IS javascript.

The basic syntax

if(condition) {
	// code to be executed if condition is true
}
else {
	// code to be executed if condition is false
}

The javascript (jQuery) if / else statement is almost identical to the PHP if / else statement.

$a = 5;
$b = 10;

if($a > $b) {
	echo "A is larger than B";
}
elseif($a == $b) {
	echo "A is equal to B";
}
else {
	echo "B is larger than A";
}

And the javascript(jQuery) if / else version is:

var	a = 5,
	b = 10;

if(a > b) {
	$("body").html("A is larger than B");
}
else if(a == b) {
	$("body").html("A is equal to B");
}
else {
	$("body").html("B is larger than A");
}

Note: The jQuery function html() is not equal to echo.

Explanation of another example if statement

HTML

jQuery/javascript

$(document).ready(function(){ 

	var n = $("#example div").length;

	if (n < 2) {
		$("body").css("background", "green");
	}
	else {
		$("body").css("background", "orange");
	}

});

Very basically the above is saying: Count the amount of div’s within the ID #example, and if it is less than 2, change the body’s background colour to green, otherwise change the background colour to orange.

What do you think the outcome would be?

If you guessed orange… Then you would be right.

Javascript shorthand if statement

As Stefan has commented and pointed out to me, there is a shorthand javascript if statement which we could use instead of the above:

var n = $("#example div").length;
$("body").css("background", (n < 2) ? "green" : "orange");

Now that is pretty handy! Creating a javascript if statement couldn’t be more simple.

Conclusion

What is a ‘jQuery if statement’? – It is a ‘javascript if statement’ that happens to contain some jQuery.

Behold the CSS Lightsaber

cssplus-admin — Wed, 22 Jun 2011 16:35:02 +0000

Note: Check out the demo before reading. I’ve been working on CSS lightsabers lately. I remember seeing one a while back and liking the concept, however I thought it could be greatly improved. I’ve also been itching to create animation out of CSS transitions. By “animation” I mean one event followed by another event. Transitions can mimic full blown animation by transitioning multiple elements at the same time with different delays. This gives the effect of an element being animated. Very simply they all occur simultaneously, but the initial delay make the events appear to follow each other.

The sabers were both very carefully crafted with CSS alone. With Yoda’s saber I focused on having different options. Switch on, increase power and increase length. It was a bit of a work around to get the options to work with each other since only one transition can occur on an element at any given time. This would mean that in order to keep the Saber on, decrease power and decrease length is == to power up.

I’m pretty sure people will mention that some of this could be done with the CSS keyframe animations. Yes, it can and should, however, I started this a couple of weeks back (Firefox5 was only released yesterday with support for the CSS property) and I don’t really like working in Webkit.

Firefox loves lightsabers

This demo looks best in Firefox by far. Everything is rendered absolutely perfectly. In other browsers? Not so much.

Chrome

The demo doesn’t work as it should in Chrome and there were two main problems with this demo. The transition can be applied to pseudo elements. I started of animating pseudo elements all over the place, but I stopped because I wanted Webkit to at least partially support the demo. Also, Webkit doesn’t seem to handle transitions very well yet. Have a look yourself. Go to the demo: Click on “Higher”, then on “Longer”. It refuses to do the transition. It seems like Webkit has a problem when going from one transition into another. In order to get it to work you have to use a transition, clear it and then fire off another transition. In comparison to Firefox, the shadows look a bit… Hard.

Opera

Opera has a different set of issues. It animates (along with a few rendering bugs here and there) from transition to transition, however, a transition on the box-shadow property doesn’t seem to take.

IE10

I haven’t tested this yet. If you have IE10 and you test it, let me know what the problems were.

That’s about it

This took me a fair amount of time to complete and iron out the major bugs. Let me know if you have any questions and what you think.

CSS-Plus V2

cssplus-admin — Fri, 17 Jun 2011 18:32:42 +0000

If you haven’t noticed the new design, you’re either new to CSS-Plus or you have hit ctrl / cmd + r in a while. I’ve been talking about a redesign for longer than I’d like but it’s finally here, however it’s not 100% complete yet. You may notice that things look a little funky here and there, but don’t worry, I’m working on it! It should be complete within this week.

What’s new?

In general the font is larger, the headings are larger, the website is fluid (Or will be once I’m done). My main objective was the make the the website easier to read, easier to navigate and more enjoyable to be on.

Colour palette

I’ve decided to go largely with the blue and pink. The colour palette consists of 5 colours: Orange, pink, light-blue, navy blue and grey. I’ve decided to go with a very light template compared to the previous one. I feel it’s much easier to read and more enjoyable to be on a lighter website. Darker colour palettes can work, but I don’t feel they really work on blogs.

The logo

After messing around with many types of logos, I noticed that the ‘P’ in CSS-Plus could contain a plus symbol if I were to extend it a bit. I think it looks pretty cool. Other than that, the font used was ‘Cantarell‘.

Where did the tags go?

The tags are still there, I’ve just removed all links to them. Ultimately I’m going to remove them completely because I don’t really think they serve a real purpose. The analytics agreed with me.

Navigation and Sidebar

I’ve realized that it’s been a bit tough to navigate the site easily.

The sidebar now includes most popular articles, the latest articles and my latest plugins — I plan on making a handful of very useful jQuery plugins.

Search here…

I’ve always had a search bar but it was barely used. Also, the results page was pretty nasty… Perhaps that’s the reason it wasn’t used all that much? Anyway, I’ve implemented the new GSE code and the results are much easier on the eye.

Article Thumbnails

I’ve started using the WordPress thumbnail feature. I think it makes everything much more interesting to look at. At largest they are 180×180 images with a border, drop shadow and inner shadow. The more CSS I used, the more control I have over everything.

Pretty comments

I quite like the new comments. I’ve made them much more orderly, easier and more enjoyable to read.

The footer

The footer is largely the same. I’ve replaced the latest tweet area with my delicious links. I think they are much more useful than what I’ve said last on twitter.

Social

The latest additions to the social family has been the Google +1 button and a link to my Github account. Why +1? Because I think Google is absolutely awesome.

Images and javasript has been avoided

I haven’t avoided images as much as possible, but I have tended towards avoiding them. They aren’t necessary (Excluding fallback images) and it’s fun making everything as semantic as possible. As for javascript, it’s overkill for something that CSS can easily and semantically do, such as the hover effect in the footer.

Suggestions?

Let me know if you have any suggestions.

CSS-Plus

Gaussian Blur and CSS3/SVG

CSS3 text-shadow

Problems

Fallback

SVG blur filter applied to a SVG element

Problems

SVG blur filter applied to a SVG image element

Most of the above problems apply here as well as a few more:

SVG Blur Filter applied to HTML elements

Problems

CSS Blur Filter

Problems

I think you could use it now actually

Good old fashioned images

Problems

What was learnt?

Anything else?

Article influences

My Journey to the Perfect Text-Editor

Dreamweaver

Notepad++

E-TextEditor

GEdit

Scite

Coda

TextMate

Komodo Edit

Sublime Text 2

tldr;

Disclaimer

Bulletproof full page background images don’t exist

Problem 1

Problem 2

Problem 3

So, what is the solution?

Conclusion

Use :pseudo-elements as list-style-image alternatives

Standard background-image method

The HTML necessary

The CSS necessary

Make use of pseudo elements

The HTML

List item with the sprite as a background-image

List item with pseudo element using the sprite as a background image – Preferred method

Make use of CSS counters

Bring on the CSS

Conclusion

How to make the input placeholder more user friendly

How is it not user friendly? tl;dr – Take me to the tutorial already

Typical input placeholder problem

An improved version

The solution

The HTML

The CSS

Let’s give IE a bit of love

IE specific CSS

Placeholder functionality fallback – jQuery with Modernizr

Foreseeable problems

Conclusion

Master the jQuery for each loop

Standard jQuery for .each()

The javascript for loop

Alright, how is $.each() any different?

Conclusion

Create Accordions with CSS3, HTML5 and jQuery

HTML and basic CSS

HTML

Aliquam tincidunt mauris eu risus

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

CSS

The jQuery

The CSS3 version

The HTML becomes

s have been turned in to anchor links

The CSS

The Javascript – Remove page jump

The HTML5 method

The HTML