Why does the blog look terrible? Find out
mikestreety~coding & life

Archives

It’s My Way or the Highway. Not.

Recently with the spate of CSS3 and media queries, there has been a few debates over how development should be done. Several people have emerged saying that you should be considering mobile first. The attitude of some of these people on the web, is do mobile first or don’t bother doing it at all. Now, I understand why …

Recently with the spate of CSS3 and media queries, there has been a few debates over how development should be done. Several people have emerged saying that you should be considering mobile first. The attitude of some of these people on the web, is do mobile first or don’t bother doing it at all.

Now, I understand why you should. It helps you focus and means that the content is all the content you need. If you do mobile first, you’re not tempted to slide in the odd random graphic here or there. But i’ve been thinking. Why should we have to do it this way?

I’ve always been of the mindset that with the web, as long as its accessible and semantic and it makes sense, its perfectly acceptable. There are hundreds of different ways to skin a cat and as long as you get a clean website at the end, who cares how you got there? (People even have prejudices against certain bits of software…).

I often get annoyed on the web when people tell me I have to do something a certain way. I prefer to be nudged in a general direction than having a certain technique forced upon me. For example, I have recently read a couple of Sitepoint books – jQuery: Novice to Ninja and HTML5 & CSS3 for the Real World. They are fantastic books (highly recommended for people starting out in jQuery and HTML5).

The thing I like about the books is that they imply that there are several ways to do things. The code examples in the book are starting points  that give you a nudge in the right direction. Before I read the jQuery book – I was under the impression that it was really complex, but the book showed me how simple things were and from that I have evolved into a jQuery Deputy Master.

So next time you read a technique, or tutorial, remember that it is not the only way and no matter what operating system, software or method people are using, please be nice and accept their working process – you might be surprised and realise they’re doing it better.

Read More

Twitter Style Glow on Input Focus

Recently Twitter homepage went through a redesign and included a soft glow on their login boxes when highlighted. A colleague wanted to recreate the effect and asked me to provide the code. The twitter one is a lot more complex and has a few more functions but the code below is the basics behind the …

Recently Twitter homepage went through a redesign and included a soft glow on their login boxes when highlighted. A colleague wanted to recreate the effect and asked me to provide the code.

The twitter one is a lot more complex and has a few more functions but the code below is the basics behind the effect. On the :focus style, the appropriate web browser prefixed CSS is required, but you get the general idea!

[CSS]
input {
border-radius: 5px;
border: none;
outline: none; /* Get Rid of the Webkit Default Glow */
}
input:focus {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.9); /* -webkit/-moz prefixes needed */
}
[/CSS]

Read More

Drop Shadow

These text and box shadow techniques were written in an edition of .net magazine. At the time I couldn’t find any documentation on the text/box shadow fallbacks for up to IE 5.5 (which these are.) However, they should be used with great caution – the MS Filer CSS properties use a lot of processing power …

These text and box shadow techniques were written in an edition of .net magazine. At the time I couldn’t find any documentation on the text/box shadow fallbacks for up to IE 5.5 (which these are.)

However, they should be used with great caution – the MS Filer CSS properties use a lot of processing power and should be used sparingly.

The .net magazine article can be found here: CSS3 Techniques

Box Shadow:

[css]
-moz-box-shadow:0px 5px 5px #333333;
-webkit-box-shadow:0px 5px 5px #333333;
box-shadow:0px 5px 5px #333333;
/*IE 8*/
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color=’#333333′)”;
/*IE 5.5 – 7*/
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color=’#333333′);
[/css]

Text Shadow:

[css]
text-shadow:2px 2px 2px #333333
/*IE 8*/
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color=’#333333′)”;
/*IE 5.5 – 7*/
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color=’#333333′);
[/css]

Read More