Creating an accordion effect only using CSS

So I was toying around with the spry widget on Dreamweaver and I struggle to accomplish the desired effect. Hearing the tales of mystery and great power that CSS holds I thought, surely this magnificent tool can give me what I need! So as a result I stumbled upon www.cssnewbie.com which gave me an accordion effect using only CSS. Sweet! Now I am here to tell you how to do this!

 

 

 

 

Okay so wam bam thank you ma’am we start with some HTML as usual…

<div id=”accordion”>
<div id=”part1″>
<p>This text is in part 1.</p>
</div>
<div id=”part2″>
<p>This text is in part 2.</p>
</div>
<div id=”part3″>
<p>This text is in part 3.</p>
</div>
</div>

Basically what this did was create 3 panels for your accordion. The text is where you add all your little bits of information. Next we get to work on styling this baby. CSS layout is courtesy of CSS Newbie…thanks guy.

#accordion {
width: 500px;
margin: 100px auto; }

Now that accounted for how much space by accordion will take.

#accordion div {
float: left;
width:25%;
height: 300px;
overflow: hidden;}

Okay so the above information gave the accordion div a default setting so it sits centered and happy on your page – visually very good. We float the div to the left and define its width and height so its positioned. Quote from CSS Newbie who explains the overflow better than I ever could:

“The overflow: hidden part here is also crucially important. This is what prevents my divs from either resizing to fit their content or spilling their content out of the containing div and onto our page. It also creates a nice visual effect… people will wonder what content they’re missing, and will mouse over the area to investigate.”

Next step is creating the hover effects which allow our bars to slip in and out and create the accordion effect. There are 2 steps you need to folllow.

step 1

#accordion:hover div { width: 20px; }

step 2

#accordion {
width: 500px;
height: 400px;
margin: 20% auto; }
#accordion div {
height:25%;
overflow: hidden;}
#accordion:hover div {
height: 20px; }
#accordion:hover div:hover {
height: 340px;
overflow: auto; }

Those are big steps…

Once you have slapped that code in you can tweak it to fit your page. You can customize it too by adding color and font types to give it a personalized feel. Go CRAZY! Enjoy.

You have learnt well from your master!

Turning People into Cartoons

The easiet and most efficient way to immediately turn someone into a cartoon has got to be the poster edges effect. For a more comic art feel you will have to follow a lot more steps. This is a picture of Kelly Clarkson….a nice clear picture with a white background works well

Nice and clear with white background works best!

Then to make her cartooned you open her up in photoshop then go to Filter, Artistic and Poster Edges. Then adjust the brightness and contrast to define it a bit – approximately 13 for brightness and 30 for contrast. Change it until you get the desired effect.

CARTOONY!

To stylize this picture I simply put a gradient shading over it with the combination of a blue (#65c7b8) and a purple (#7a51ff). I chose the linear gradient and simply dragged it over the image. You can do this with any colour combination or just one colour.

Making a logo

For my photo gallery assignment I had to make a logo! My theme was Campus Perception so I toyed around with a Greek education sort of theme. Campus Perception also eludes to the fact that your campus can be whatever you imagine it to be – a prison that enslaves and entraps you or a beautifully built structure housing brilliant minds and affording amazing opportunities for an abundant future. I see UCT as buildings housing gods atop of Mount Olympus…hmmm so in my logo I wanted to convey this feeling. I see the students as soldiers going into battle everyday to succeed at every course so that they’re equipped with the knowledge needed to face the big bad world out there. So on Photoshop I took a picture of a Greek soldier with a spear and replaced his spear with a sword – toying with the idea of “the pen is mightier than the sword” or spear.

Hmmm so muscly and strong you are my hunky logo. His physical strength is a symbol for UCT student’s mental strength.  So out of Photoshop and into Illustrator I took my little man and traced him to create a logo looking image.

 

 

Now he is traced and logo looking! The pen looks like a spear more so than a pen, but I hope either way my message is conveyed! The next step was to give my logo some text. I chose my gallery’s name to be CAPE, the first two letters of Campus and first two letters of Perception. CAPE was also fitting because for the photo assignment we had to take pictures of an area in CAPE Town…yes I do think I’m smart with my catchy word play!

I chose a simple text so as not to overwhelm my image. I also wanted a smart formal look that educational institutions take on. I replaced the letter ‘A’ with a graphic I made with shapes which looks like the glorious Jameson Hall. I added a brownish colour on certain areas of my image and text to bring out the brown colour of the buildings on UCT campus. It’s not the brown of bricks, but a more natural sort of brown that allows UCT to blend in with its luscious natural setting. And with that my logo is complete.

How to design a website

Starting up a website needs direction and acute attention to your target markets needs. Before you begin setting it all up ask yourself these very pertinent questions. Seriously…go to the bathroom, look in the mirror and ask…

  • What do I want to achieve from this website?
  • Who are my target users? (Move away from Flash websites – takes too long to download and our target must remain within African)
  • What impression do I want to create with my target user? (How many people view my site)
  • What are the technical limitations of my target users? (Is your website Mac friendly? Eg. What kind of computers are my target users using?)
  • What is the identity of my brand and ideally where do I want it to be positioned? Eg. Brand position of Vula – humanities blue colour but humanities kids are more funky. They designed it to be user friendly.

Now you are done looking like a crazy person. Let’s think of ways we can adapt that time spent in front of the mirror asking questions…

Say for example you own a bank and you’re hired to make a website for it. Think of the aspects of online banking.

Needs analysis – security, formal, trustworthy look. Eg. FNB. Serious banks would not faff around with trendy designs.

Eg. A humanities bank site would be trendy.

The look would consist of the important info such as log in info, contact details, branches and where I can find atms etc.

Now add design elements

1. Layout – form allows function so keep it consistent

                Types of layouts include: portfolio, corporate, news,

Corporate page has listed info

News sites have bit size info and all info is given out at the same time

Tip: don’t hide all info under fancy icons and make use of widgets!

2. Colour – with style. Don’t use more than 4 colours KISS. Colour pallete ideas: colourlovers.com

3. Content – what text, which pictures or add video? Add a gallery to display work on portfolio sites. Proper grammar and spelling is important! No text language. Images must be no more than 100k and NOT pixilated. Less than 50k is ideal.

 Once you have added your elements add the basic programmers information to make your site functional and you have it!

Web design Trifle

Web designer trifle

In South Africa we have a dessert called a trifle. Its a layered pudding of custard, jelly, canned fruit and nuts topped with whipped cream and chocolate grated over that. Its so good! And how does it work? It works with each layer being built so lovingly that when you put it all together you get a great Christmas dessert. So that’s how web design works– with each layer complimenting the next. The layers in web design are defined by Jennifer Nierdest Robbins.

My family made this one

Structure layer

This layer includes all the content of the web page. This is the HTML mark up of the document. This forms the foundation so one has to have basic fundamental skills to build on.

Presentation layer

Now to control how your content must appear! Using styles sheets (CSS look it up if you don’t know this by now) the structure of your document will now have a layout specified by yourself.

You have the foundation so build up!

Behaviour layer

The behaviour elements contain scripts, which make your web page interactive.

Thats the very simple explanation of the processes weaved together to design a web page, but once you get into it you will realise that there is a lot of work that goes on in between. Like with everything else in life – the better your skills and the better your ingredients the more people want to eat your cake! That did not sound suggestive in any way…uhum…Serving suggestion below!

My family and I made this one…it was delicious.

Actually making a website involves more, these 4 steps are the VERY BEGINNER steps you’ll take….

Step 1: start with content

This is the text content. – What you want to say in your website.

Step 2: give the document structure

HTML elements that give the text content structure.

Step 3: identify text elements

Describe the text content using the element tags for headers, paragraphs etc.

Step 4: add an image

Add images to your page.

Step 5: change the look with a style sheet

This is when you get to toy around with CSS to give your document style.

Okay so the steps above are completely basic, but once you start getting your hands dirty coding and programming gets tricky. This was just an extremely brief overview of what web designers do whenever they create a page.

CSS the big bad wolf

Up to this point in my life I have the capability of designing a…wait for it…a single page site! Schweeeet! So that just entails me slotting html codes onto a Dreamweaver html page and linking my pictures and thumbnail images into a table so that when I click the thumbnail, a bigger version of my photo pops up! That was a mouthful. That was phase 1. Phase 2 involves creating a multipage site, which includes links to various other pages linked to your site. Moving swiftly along I am now venturing into this dark and dreary alley called CSS. What is that you may ask? I’ll tell you…

CSS stands for Cascading Style Sheet. Too vague? Well look at a web page…

Besides just putting information on a site, there is a layout with a header and buttons which leads you to various other pages on the site.  These pages also have layouts – where the content is positioned, where the header is positioned, where the pictures go, where the side-bar goes etc. CSS with coding allows this layout and format to be set up so that you have multiple pages with various pieces of information or images etc. On Dreamweaver I have learnt to make templates, which is the basic markup I will use to tag my multiple pages and link them to one another, then moving on I will create a CSS style sheet. The CSS sheet will apply to all my pages that use the template as a basis as long as I attach the style sheet to the template. I can then manipulate the positioning and style of every tag.

Designing portfolio websites

Great portfolio sites aren’t just thrown together. A lot of thought goes into the design and architecture of anyone’s site that’s proud enough to boast their work. I have chosen a few that caught my eye not because of elaborate effects or just plain wacky eye-catching interface, but because the way that content is displayed remains thematic and all round well put together.

This website looks neat, formal and very minimalistic. It’s modern and trendy because it tends to not clutter the home page, but have a simple sleek background (it’s just two decorated squares really) with models or a single model posing in front. Everything on the home page has a function and links lead you straight to the info you want. The logo makes use of just 3 colors with the company’s name Concentric big and bold and the type ‘studio’ sits snugly beneath it. The logo echoes the name concentric with circles and the colors work nicely with the colors of everything else on the page. I like it because it speaks to its consumer and it does so without all the fluff and glitter.Concentric studio is a company specializing in brand management and they proudly boast their latest client Victoria’s Secret on their home page…smart.

 

 

 

 

 

 

I like the use of color on this site, it all seems to be in harmony with even his portfolio photos. The stocking feet add a retro perspective. Maintaining a formal presence he gives minimal information but encourages further explanation with thumbnails and 3 arrow heads at the bottom leading you to his other content.

Shifting gears momentarily I’ve chosen to analyse a funkier more playful website. This website feels to me like a personal reflection on the web designer who created it, Luc. The background is a simple play with greens and blues dripping onto a white backdrop. The header has creative designs that integrate into the site’s functions. The image is a cartoon manifestation of the author himself and “I design with my noodle” is a cute line which gives us insight into his intelligence. Could that bird to the right of the cartoon be a twitter bird? The opening phrase creates humour simply by design; the scratching line over freelance and replacement of 9-6 and the smaller sized wannabe next to the word blogger. The blurb of the author gives us his info without it invading the content he posted. The Flicker images are functional and everything on his page is relevant without causing cluttered spaces.

 

 

 

 

 

 

This website is simple and easy to navigate with every bit of info is straight to the point which is important for online – people tend to read a lot slower on the web and get tired of long columns and blocks of text. The picture insert of himself I feel is a bit unimpressive for a designer with 11 years experience – it’s a Polaroid looking picture with bee line swirls around him (looks like a Facebook profile picture). However I do enjoy the bee line swirls following onto links as if I’ following a chain of I do like the simplicity yet modern look of his stick figures ad the speech bubble is interactive as it’s a link to his iChat account.

 

I’m not quite sure what the design concept behind this site was but it is very original. Every sentence is a link to other articles of his and the lack of images creates a direction of attention to content more than elaborate design. When you hover your mouse pointer over a sentence all the others fade away, i admire this work on CSS to make the page more interactive.

 

 

 

 

 

 

I love this website’s header, with the superhero dog and the logo emblem on his chest – very creative and bold. The name ‘dawghouse’ already inspires a youthful vibe with a trendy comic feel. The welcoming line, “Oh Hi There,” immediately interacts with the online user and the white text on a peach texture background describes what the site’s busniess is about. Icons for rss feeds, Facebook and twitter and other social media are above the posts and using simply the icon without accompanying text indicates that anyone could click and get in contact with the designer. This site has an open and inviting feel to a cool kids party, “Waddup dawg!”

 

 

This German site has many features to comment on, but one particular feature caught my eye. Once you open the page you see Home, Portfolio, Blog, About and Contact right on top to navigate different pages – when you scroll further down the headings are out of sight BUT not on this site. When you scroll down the bar right on top drops down using the same links to the other pages! This keeps the online user from having to scroll all the way up to get to those links. Very neat, convenient and clever. Or maybe I’m just impressed by small things.

You see the bar displayed above

Scroll down and the links on top are still visible from a drop down bar

Read the rest of this entry

Online Advertsing

Browsing the web becomes a nuisance when every 5 minutes you’re confronted with a pop up ad. The day my irritation was pushed to the limit was the day when a pop up ad for a penis-enlarging pump jumped onto my screen. It’s known that the negative effects of online advertising can dissuade consumers from returning to the main site.

Many companies are constantly bombarding our monitors with online advertising so the market out there is tough due to the huge amount of competition. Their techniques have to be truly impactful to stand out as online ads are criticised for being senseless, absurd, uninformative, interfering and all round ineffective. The form of advertising then changed and pop-ups and pop-unders were created to grab attention. Consumers eventually block pop ups and scroll quickly down web pages to avoid long streams of adverts. Some advertisers have managed to dodge pop-up blockers however and make their intention known – YOU WILL NOT AVOID US.

One has to understand the idea of an online consumer to understand the effects. Online consumers have a purpose when they’re on the net unlike those watching TV clicking through channels. If an ad interrupts your soapie you can get up and make a TV snack or change the channel. The online consumer is deterred when confronted with an ad and must go through the tedious task of closing pop ups and scrolling past ads.

The above states that online consumers are focused…they browse the web with purpose and intent of procuring whatever information they deem necessary. When targeting the online market, advertisers therefore need to make their information focused and necessary.

Need help working Adobe apps?

Working Adobe applications can be daunting as I have discovered. It requires not only your creativity and great mind, but computer skills and “pc street smarts”. If you are tired of clicking random icons until you a get a less than desired go to www.adobe.com and click on the HELP tab to get some information on how to run programs such as Flash, Dreamweaver, Illustrator and Photoshop.

May the force be with you…

 

Taking and Making Pictures

The use of Photoshop extends far beyond a few touch ups on a facebook profile picture. Photoshop is very versatile and you can place an image of yourself in a different country or airbrush your butt till it’s gone.  You can compose a whole new image by combining 2. For example…

Picture 1

Picture 2

Foreground picture 1 and background picture 2

Depending on your style its best to alter images in a way that does not distort from reality. One would want to blend and blur images to create a flawless composition. Photoshop is all about playing around with an image till you find what looks best.There are times when Photoshop ventures into the realm of the absurd! My favourite categories are…

  • Too many hands make crap work

Taking a good look at a few pictures show a few too many hands at times.

  • Wretched reflections

I have seen one too many ads with bad reflections. Either the reflection is the wrong way around or it seems as if its another reflection all together. What ever the reason, its totally ridiculous what our eyes can let us get away with.

 

Is this 8gb or 4gb?

  • Malnourished models

Last year Ralph Lauren wrote an apology to the Huffington Post for their deceptively skinny models. The scandal caused quite a stir. Women photoshopped to the point where their heads are bigger than their pelvis has become quite a trend and the only thing Ralph Lauren should be sorry about is hiring that really crappy photoshopper.

Me so hungweeee!

  • Bolloks backdrop

Ever tried putting a photo of yourself in a picture of Mexico then showing your teacher the picture explaining, “This is why I was absent from my exam ma’am.” Yeah…me neither, but that was before I started working on photoshop.


For more of these photoshop disaster pictures check out http://www.psdisasters.com.

Whether being used or abused, Photoshop still remains an amazing tool for a web designer to have in their back pocket.