Friday, July 22, 2011
Thursday, July 21, 2011
Monday, July 11, 2011
Website - popup div(connect with fb, twitter, google) -- another popup div (video ad) on top
Website - popup div(connect with fb, twitter, google) -- another popup div (video ad) on top
Thursday, July 7, 2011
Wednesday, July 6, 2011
Jquery TABS and content - use on resume page, with multiple resumes
1 simple css3 example: http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/
Simple Tabs w/ CSS & jQuery
http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/
Simple Tabs w/ CSS & jQuery
Tags: Intermediate, Widgets
I know there are quite a few tutorials out there that demonstrate how to create tabs with CSS & jQuery, but I decided to create my own as well. I’m not sure if the techniques are the same, but hopefully this tutorial will be easy to understand even for a beginner.
For those who are not familiar with jQuery, check out their site for a general overview, and you can also follow up with the various tutorials out there.
Step1. Wireframe – HTML & CSS
Use an unordered list for your tabs, and follow up with the “tab_container” container right below it. Make note that each list item (tabs) has an attribute of “href” that matches the ID of the “.tab_content” div. This will be very important once we have jQuery pull off the actions. Also keep in mind that I used generic names like “tab1″ so its easier to understand. In reality, you should be using keywords so it can semantic and also benefit you in SEO.
Automatic Image Slider w/ CSS & jQuery
http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/
Automatic Image Slider w/ CSS & jQuery
Automatic Image Slider w/ CSS & jQuery
ags: Intermediate, Widgets
With the release of the iPad and its lack of support for flash, it has stirred up a lot of debates regarding the future of flash. With this in mind, I believe it is wise to build simple widgets like the image slider using HTML/CSS/Javascript, and leave more interactive applications for flash if needed. The html based image slider will have its benefits with SEO and will also degrade gracefully for those w/out js.
The Wireframe – HTML
Start with having a wrapping container div called main_view, and two sections nested inside called image_reel and paging. The image_reel will contain the sliding images, and paging contains the paging controls. Take a look at the image below for a visual.
PNG Transparency Fix in IE6
http://www.sohtanaka.com/web-design/png-transparency-in-ie6/
PNG Transparency Fix in IE6
Tags: Beginner
As I was exploring different ways to use Transparent PNG files in some of my designs (Check out Smashing Magazine’s PNG post for some great examples), I had to first find out how to make PNG files work in IE6. As we all know, IE 6 does not fully support transparency.
The .htc Fix
Download the .htc file and specify which element/tag you want PNG support on. To learn more here is an online demo and set up instructions.
The Java Script Fix
SuperSleight
This is probably the best Java Script PNG fix for IE6 that I have come across. Please check out www.24ways.org’s tutorial for a guide on how to implement.
Google Code
I stumbled across this Google Code which was pretty straight forward. The downside of this is that script only fixes images named: *-trans.png. Unfortunately, the transparent background image cannot be tiled (repeated) using background-repeat. Nor can it be positioned using background-position.
Or the CSS Fix
I stumble across a simple technique that worked effectively, which uses CSS and conditional tags for IE, no Java Script involved.
Fancy Thumbnail Hover Effect w/ jQuery
Fancy Thumbnail Hover Effect w/ jQuery
5 Habits to help you complete your project in record time
http://webitect.net/freelancing/5-habits-to-help-you-complete-your-project-in-record-time/
Everybody wants to be more productive. Productivity translates to success, whether you’re a freelancer or an employee. Here are five powerful ways to make sure you’re getting the most out of your time.
Even if increased productivity didn’t bring extra income, people would still want to be productive because there’s just a confidence-building, make-you-feel-great kind of charm about knowing you can work fast, be efficient and get the job done without rushing.
As time management will obviously be a huge part in this post, you may also be interested in 5 Simple Time Management Techniques for Freelance Designers.
The first step, and the most important, is to plan out the details of your project before you start. It is absolutely amazing how much time you can save by having a clear idea of where you’re going before you start. When I’m pressed for time, I sometimes find it tempting to skip the planning stage and just get on with the work. And every single time I find that it costs me later. If you’re a designer, build those wireframes before you ever touch the computer. Developers, plan out your code with flowcharts or outlines.
The #1 rule of productivity is, ‘Be Organized’. There is something almost magical about the amount of time you can save by just writing out the steps of your project before you get started. By doing this, you can get a clearer picture of your project and see obstacles coming before you get to them. You will have a better idea of input you need from others, and you will appear more composed and professional.
We can’t remember everything, and I’m sure everybody has experienced one of those moments where your mind goes blank, leaving you thinking, “I’ve used this command a billion times. Why can’t I remember it all of a sudden?” This is where reference sheets come in. Some call them cheat sheets, but ‘cheat sheet’ paints a bad picture in most people’s minds. Referring to a source of information is not cheating, it is being efficient. No matter what you call them, they can save you a lot of time.
Of course, everybody will have a different list of commonly used tools and technologies. The important thing is to pick a few quality reference sheets that fit you and your working style, and then use them. You could even print them out, laminate them and get them bound at your copy shop. You may alr
Creating Fancy Checkmark Icons with Pure CSS3
The #1 Rule of CSS3 Coding
Before we start on any project, we have to remember the number one rule of CSS3 coding. Well, actually it’s two rules:
- It must be cross-browser acceptable. I’m not talking identical, but a CSS3 technique is not very useful if it destroys the experience for users with older browsers. Use progressive enhancement.
- No worthless markup! I know CSS3 is fun, and it’s not bad to experiment, but if you have to add a whole bunch of non-semantic junk markup just to save yourself from needing to use an image, you’ve defeated the point.
These are the two principles that I regard to be the unchangeable law for using CSS3. So anyways, enough of my rant – I just feel with all the buzz about CSS3 that it’s very important to use it in a mature and responsible way. Let’s move on with the tutorial.
The Concept
Before we can start coding, we have to figure out what approach we’re going to take to create these icons. How is it going to be done?
Subscribe to:
Comments (Atom)