Veteran designers can skip over this post, because you probably already know all about PHP and CSS3, but some of us learned HTML back in the day and have come back into the design world and have no idea what all this new-fangled code can do.
Below I am going to link you to 3 awesome tutorials that helped me figure out some things that I was previously unsure of (especially how to make those awesome header ribbons I keep seeing all over the place!)
[box type="info"]Tutorial-tastic Guide #1:[/box]
How to create this ->
Without so much as a single .gif.
Many developers design the bulk of their layouts inside of Adobe Photoshop, which offers a host of ways to tweak and make your design ready for uploading, up to and including mathematical representation as to where images need to be in relation to each-other once the coding stage of the game has taken place. But thanks to CSS3, gone are the days of having to meticulously create painstakingly rendered graphics for every nuance of your design outline, with the power of CSS3, users can create beautiful and imaginative designs without so much as opening or altering a single image.
This is by far, one of the most simple, amazing, and helpful tutorials that I have come across that can demonstrate the sheer scope of what can be done with CSS3. The tutorial is easy to understand and carefully worded by the guys over at Shock Bundle and offered as a free resource to web developers to take advantage of (or anybody with a desire to get their hands a little dirty in some code).
Another great thing about the tutorial? They offer all the code for you to play with on your own and tweak in any way you like (no link back or credit necessary), so even if you decide to dabble in the code and break it, the original code is always there for you to re-paste and experiment with again.
[box type="info"]Tutorial-tastic Guide #2:[/box]
WordPress Shortcodes
(Made stupidly simple)
Okay, I admit it, I adore WordPress, and it appears that I am not the nearly the only person on the planet that does. WordPress is wonderful in the fact that it is entirely customizable to suite your every need. Out of the box, it is simply a shell that is waiting to be filled with your own tweaks and customizations. It is meant to be personalized by you-the web developer, the blogger, or the personal site owner~!
But alas, customization requires coding knowledge (and more than a little programming savvy), for many there is always that impending fear of breaking something beyond all hope of repair, not everyone is sure how to backup their websites. (Hey! We aren’t all internet-web-savvy-gurus after all! Some of us just want to have a cute blog to update while we have or morning coffee!), but we all want to have a page that is unique to ourselves, and we want to have something that we are proud of from the ground up.
Shortcodes are a wonderful way to add interesting tidbits and take the annoyance out of repeating code over and over again (or fighting with the WordPress text editor), by wrapping words in brackets: ( [ and ] symbols) can easily call a defined function that wraps a unique div that you have stylized in your CSS coding to wrap around that area-and only that area-without even having to know how to call div tags in the first place.
The problem being: most people don’t know how to code their own shortcodes, and even if you use a predefined theme (such as this one) sometimes shortcodes come pre-packaged with the theme; however, sometimes we want to write in something new, or edit pre-existing ones, and this tutorial was created by the lovely folks over at Our Tuts and explained in greater detail than most shortcode-related tutorials that I have sifted through on the net. It is most certainly worth a lookie-loo.
[box type="info"]Tutorial-tastic Guide #3:[/box]
CSS Ribbon Headers
A.k.a. The Modern Design Standard
Okay, I admit it, I have been tearing my hair out for AGES trying to find a decent guide about these stupid things, they have become a de-facto standard among custom designs for over a year now, and while I am readily aware as to how to create them in Photoshop, finding a decent guide about how to explain “wrap around ribbons for dummies” has been slightly more… problematic.
The wonderful thing about this guide? It is entirely accessible to both oldbies and newbies alike, it first explains the anatomy of a “box”, and extending your header beyond your box’s padding via easily crafted code, and wrapping your ribbon back around your content. The guys over at Red Team Design also include an extra demo page to give you a bit of creative spark so that you can fiddle and make your ribbons unique to you.
At the very least it kept me from ripping my hair out ages ago.
Pingback: Eclipsed Moon Re-Vamp Notice | Eclipsed Moon