How To Code Snippets & Web Design Help
Welcome To Picnic Website Code Tutorials. This website's sole purpose is to display code in a fun, attractive, and organized fashion. My name is Eric Watson, and I am a fellow Web Designer like yourself. My long term goal is to educate myself, and document within this website, every possible and conceivable question, and its answer, I or others may ask of me, either now or in the future, so I never have to Google for another answer ever again. Admittedly, a lofty goal, however succeed or not, this page represents my attempt.
Whether you’re a novice or an experienced Web Designer, you will likely find this website to be an invaluable resource. Within its confines you will find many of the more commonly sought after code snippets, tutorials, and their demos you'll routinely need to either get started, or to simply build on what you've already achieved. I went to great effort to make these code examples as easy as possible to understand, and even easier to implement and use in your own projects. No lectures, no run-on stories, just code, displayed in a clear and concise manner. I don't bore you with my life story before giving up the goods. In short, there's no hand holding, I skip straight to the point. Additionally, all the demos are done with as little style as possible so there is no other code to get in the way of your understanding. I alone, work very hard on this website and all it contains. Therefore, positive feedback is always much appreciated. If you found a particular tutorial or demo to be helpful, please share the love on facebook, twitter, or other. Thank you - have a great day.
When it comes to hosting for your new site, do your research in order to find the best web hosting plans. You can easily compare popular hosting companies using tools like Best Web Hosting Ratings, or drill down in more detail to dedicated review collections like iPage Reviews. Finally, if you're new to starting a website and want to prepare yourself for a little DIY, iPageTraining offers tutorial videos for customers who use iPage hosting.
Newest Entries
- phpBB Change Users Post Count
- phpBB How To Custom Logo
- phpBB Default Notify To Post
- phpBB Increase Subject Line Length
- jQuery CSS With Delay
- jQuery Random Image
- How To Delete Saved Usernames
- How To Change IP Address
- phpBB Open Links in New Window
- PHP Display Current Date & Time
- What's My IP Address?
- How To Generate Free Traffic
- Buy 20 PageRank 8 & 9 Backlinks
- How To Add phpBB To Website
- Free Dofollow Backlinks
PHP
- PHP Display Current Date & Time
- One Webpage PHP Contact Form
- Simple PHP Captcha
- Simple PHP HoneyPot
- Form To Email - The Ultimate Guide
- PHP In HTML In Wamp
- IE PHP Browser Sniffer
- Automatic Copyright Date Update
- PHP Includes
- Contact Form Validation & Security
Photo Galleries
- CSS3 Polaroid Photo Gallery
- Pure CSS Lightbox
- The Fancybox Photo Gallery
- The Photo Gallery
- THE JAMIE RUTH
- CSS Scroller
- Body Scroller
- Simple CSS Popup Image
CSS Nav Menus
- jQuery Slick Animated Menu
- CSS3 Mega Drop Down Menu
- Compilation
- Sprites Navigation Menu
- CSS Mega Drop Down Menu
- Flyout Menu
- Tabed Menu
- Slide-In Menu
- Drop Line Menu
- Drop Down Menu
jQuery Plugins
- jQuery CSS With Delay
- jQuery Random Image
- jQuery open Links In New Window
- jQuery Show Description OnClick
- jQuery Rhythmic Heart Beat
- Repeating jQuery Animation
- jQuery Add & Remove Class
- jQuery Back To Top Of Page
- jQuery Animate/fadeIn
- jQuery Wiggle Plugin
- jQuery Horizontal Website
- jQuery Fancybox
- jQuery Validation
- jQuery Ajax Submit
- jQuery Animated Hover
- jQuery In Field Label
- jQuery Photo Gallery
- jQuery Custom Select
- jQuery Fading Tabs
CSS
- CSS3 Full Size Background Image
- CSS3 Slide Out Image
- CSS Shapes
- CSS3 Faux Columns
- CSS Small Caps
- HEX To RGBA Color Chart
- How To Double Border/Border Radius
- CSS3 Sticky Footer
- CSS3 Transparent Border
- CSS3 Equal Height Columns
- Simple CSS3 Accordian
- CSS3 Image Replacement
- CSS3 Blinking Image w/ @keyframes
- CSS3 Polaroid Frame
- CSS3 Cheat Sheet
- CSS Blockquotes How To
- Vertically Center Unknown Height
- .clearfix 2012 and Beyond
- CSS3 Animated Tooltip
- Vertically Liquid Round Corner Box
- Modern CSS Opacity
- Vertical Text
- CSS Popup Menu
- Cross Browser CSS Ellipsis
- CSS Content Swap
- Irregular Shaped Anchor
- CSS Sticky Footer
- Centered Navigation Menu
- Image Replacement (Updated)
- Four Sided Plug-n-Play Shadow
- Image Map With CSS Tooltips
- Shadowed Borders
- CSS Opacity Made Simple
- Break Long Strings of Text
- CSS Tooltip Extravaganza
- Linked Image Swap
- CSS Equal Height Columns
- Containing Floats
- Drop Shadow
- Rounded Corners With Pure CSS
- Rounded Corners With CSS & Images
- CSS Button
- Nested Lists
- Highlight Current Page Plus
- Displaying Code Examples
- Vertical & Horizontal Centered Div
- CSS Custom Cursor
- 100% Height, Sticky Footer, & Centered
- Initial CSS Settings
Photoshop Screencasts
- Create Sprite Navigation Image
- Create A Tapered Shadow
- Change Color Of An Image
- Remove Red Eye
- Create Rounded Corner Images
- How To Slice-Up Images
- Create A Perfect Circle
- Give Image Rounded Corners
- Add Borders To An Image
- Create A Gradient Image
- Add A Drop Shadow To An Image
- Create A Shadow
- Create A Shadowed Border
Javascript
- Hide Email From Spambots
- Style Sheet Switcher
- 40+ Ways To Hide Email Address
- Gracefully Obfuscate Email Address
- Add HTML With JS/No doc.write
- Add CSS With Javascript
- Vanishing loading.gif
- Multilingual Website
- Smooth Scroll To Named Anchor
- Format Phone Number
- Clear Input On Click
- Automatic Copyright Date Update
- Float Pusher
- Accessible Pop-up Window
- Highlight Current Page With JS
- Swap Panels With JS & CSS
- Rounded Corners With JS 2
- Rounded Corners With JS 1
- Equal Height Columns
- Maximum Textarea Characters
- Simple Form Validation
- Open off-site links in new window
IE Specific
- Safe IE CSS Hacks
- Target IE Only (Updated)
- min/max height & width in IE6
- How To Feed Rules Only To IE
- IE6 :hover on non <a> via javascript
- IE6 :hover on non <a> via expression
- Position Fixed In IE6
Flash & Music
- Play Sound onMouseOver
- Embedding Music On Your Website
- Embed Valid Flash With Object Tag
Helpful Tips
- How Pseudo Class Selectors Target
- Button With No URL
- Remove Gap Under Image
- Prevent IE6 From Expanding
- Float Fact
- Position Absolute Trick
- The IE6 a:hover Bug
Website Templates
- Style: Easy
- Style: Sharp
- Style: Practical
- Style: Clean
- Style: Centered
- Style: Contemporary
- Style: Fixed|Fluid|Fixed 5
- Style: Fixed|Fluid|Fixed 4
- Style: Fixed|Fluid|Fixed 3
- Style: Fixed|Fluid|Fixed 2
- Style: Fixed|Fluid|Fixed 1






