Welcome
Please come in, make yourself at home..
This is the personal website and project of Simon Donaldson. It's still early days but things are picking up in pace. I have installed this basic theme, which I created from scratch, it should do till the main theme is complete. I'm still working on customising the backend and the navigation. Hopefully I will have a portfolio section up very soon as well as some more mumblings and information about me. Until then, I hope you find my posts interesting or maybe useful, come back again soon!
Have you seen the new Pepsi advert and thought to yourself ‘that’s a bit random’? I have, i must admit it’s ok, it made me chuckle, the best bit is Cesc Fabregas dressed as Indian Jones playing a guitar, but then i saw this..
http://www.nike.com/ - Guy Richie’s Advert
It blew me away. This is Nike’s new tv advert! It’s really well shot, fantastic composition, superb colour and it’s a great story line all directed by Guy Richie!
I have stumbled across another great CSS tip!
Combine Your CSS Media Styles Into One File
As you are probably already aware you can declare a media type for your CSS stylesheet. This enables you to have a specific style for online, mobile, print etc. Declaring these sheets seperately means you have extra http requests. The more requests per page the less efficient it becomes..
CSS has a built in method of declaring the type as if it were an ‘if’ statement. Hence you can keep all your CSS in the one file! F.A.B.
@media all
{
/* all other attributes (web, mobile etc) */
}
@media print
{
/* print attributes */
}
I was very pleased to get this link in my daily blog subscription as i was just looking into these at work today! Getting a CSS drop down menu to work across all browsers can be very tricky especially as internet explorer doesn’t really like a hover state on anything other than a anchor tag! Check out this great collection of popular solutions including pure CSS, Javascript and AJAX!
Multilevel Drop Down Navigation Menus: Examples and Tutorials
Well, I’m slowly getting through all my bookmarks, blogging the important sites I’ve discovered over the last couple of years.
I’ve found another gem..
If you write CSS then you will be aware how bulky it can become and, more importantly, difficult to read. Using shorthand CSS you can cut through a lot of the bulk by removing excessive property declarations and with a quick scan you can find a property to change or update.
Roger Johansson over at www.456bereastreet.com has written a good post about the most common forms of shorthand.
A summary of efficient css with shorthand properties
Typically they combine many declarations into one single declaration. The most important thing to remember from these findings is the order of the attributes within the new longer declaration!
One other thing is worth mentioning again.. if you are setting a value to zero or 0 you don’t need to add the measurement on the end (it is px by default).
For example:
Margin:0;
is the same as
Margin:0px;
and finally, this is purely my own habit, when setting margin or padding i always use..
Margin:0 0 0 0; Padding:0 0 0 0;
..even if i just want to change one value. It saves typing, keeps things neat and if you do need to go back and alter something you have already included it so you just change the value!
I recently stumbled across a few 100% fullscreen interactive flash websites. Now, if there was an award for the ‘Best Interactive Flash Websites’ out there, these would have to be contenders!
I would love to have the opportunity to see the source code and fla’s for these:
Today I stumbled across a cool new online Web 2.0 application. It’s called ‘CSS Frame Generator‘ but I think that title is a little bit confusing to what it actually does..
Since CSS is hierarchical and semantic you can greatly condense your style sheets by cutting out the over use of classes and id’s. For example, if I were to have a list within a div, you only have to give the containing div and id name to style all the contents.
This is where the CSS Frame Generator comes in. Basically you enter your (x)html, with the main elements given id’s, and the application will create a stylesheet full of empty CSS attributes. You can then start filling in the style attributes and finally delete the ones you don’t use!
So, to sum up, it doesn’t help with design but could just save you some time and make your code better!
Two of the trickiest problems when coding with CSS is knowing the property name, the order of the property attributes (if using shorthand) and knowing which browser supports what..
This is what you need:
CSS quick reference sheet
and
CSS Property Index
