Wiki Entry #7: Hover Effects

Hover effects over an image can really enhance how a website looks, and really change the website user's experience. Although there are many websites that allow you to add hover effects to an image, here is one way.

1) Go to http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

2) Go to 'View Demo' to see the different styles available. For this tutorial, I will be using hover style 6. 

3) Go back to the homepage of the website, and scroll down to the section titled Markup. Copy and paste the code there into your own document.You can change any of the content, and the image you your liking.

4) Move down the page and copy the css there into your own css stylesheets.

5) Scroll down the hover effect you chose. Copy and paste the css there and also put it into your stylesheet.

6) Here is what it looks like when you are not hovering and what it looks like when you are:

Use hover effects to your advantage, as they are useful, and look very nice!

Wiki Entry #6: Bootstrap

Bootstrap is a website were there are pre-coded items for free use. There are many different things there, from nav bars, to glyphicons, to templates of whole websites, all precoded.

Clearly, Bootstrap is very important, and a great tool to know how to use.

1) Go to http://getbootstrap.com/

The page will look like this:

2) Click on Getting Started. Scroll down, to where it says Bootstrap CDN. Copy and paste the text there into the Head section of your code. It looks like this:

You can download Bootstrap, but I personally do this instead.

3) Go to Components. Scroll down, and choose something you want to use in your website. Again, there are a lot of interesting things you can add using Bootstrap! For an example, I will use a Bootstrap nav bar.

You will get a page like this:

This shows you how to use the Nav Bar.

Right below it, there is the code you need to use, and what the Navbar will look like. All you need to do it to copy and paste it into your HTML.

And everything should work! This is how you use Bootstrap.

Wiki Entry #5: Adding Shadow Effects in CSS

You can add shadow effects to your text in css. It may not always be useful, but it is a cute effect to know how to do. the CSS tag is text-shadow. Here is how to use it. (Note that it will not show in Dreamweaver, you need to open it in a web browser.)

You can change the size, and the color to your likings, and this is what it looks like.

You can change this to look better to your liking. This is how you can add a shadow effect to your text.

Wiki Entry #4: HTML Entities

Some characters are reserved in HTML, because the browser might get confused. An example would be the greater then sign (>) and the less then sign (<). The browser might mess these up, and confuse them with tags. So there are special ways to write characters like this, using HTML entities.

HTML Entities will have a

&entity_name;

and/or

entity_number.

Both will work equally well.

These will vary based on each symbol. Here are some useful ones, and their code.

These are how you can use HTML entities.

Wiki Entry #3: Forms in HTML

The <form> tag in HTML can add a form to your website so you can collect data. Inside the form tag are where the form elements are placed. They are different types of input elements, check boxes, submit buttons, and more.

The <input> tag is easily the most important element, with different variations, all based on the type attribute.

     a.  There is the Text, which allows normal text input, where users will type their answers into textboxes. An example of when this will be used is while asking for a user's name or address. This looks like this online, with code on the left.

     b. There is Radio, which is if there multiple options but the user can only choose one, like a multiple choice question. An example would be askign what a user's favorite animal or color is. Here is the code to do this on the left, and what it will actually look like on the right.

     c. Submit is for defining a submit button so a user can submit their information. To add this to your form, simply add this code at the end of your form, before the form end tag:

<input type="submit" value="Submit">

This is how you create different forms in HTML.

Wiki Entry #2: How to Add Texture to Skin (or anything else you wish)

1. Open up an image, make sure its a person of some kind. This technique can be used many different places, but to keep things simpler and so you can follow along, choose an image like the one being used.

2. 

Select around the woman using any of the lasso tools, however the magnetic lasso tool and the basic lasso tools work best. You can also use the Quick Selection tool, but it really doesn't matter. Once the woman is selected, hit the delete button.

Add a layer mask to the woman by going to Layer -> Layer Mask -> Reveal All. Now the woman should be the only thing there.

3. Create a new layer and place it underneath the layer of the woman. Make a black and white gradient, using the gradient tool. If you hold shift as you create the gradient, then it will come out perfectly vertical. 

4. Open a texture of your choice (**NOT IN PHOTOSHOP** open the image in whatever application it will default to, like Preview for Mac). Select all (Control+A) and Copy (Control+C) and Paste it into Photoshop. (Side Note: Make sure your texture is big enough for your image)

Once your texture is on top, clip the texture layer(Alt+Click between the texture layer and the woman)

5. Set the blending mode of the image to Multiply. Multiply usually looks best, but I encourage you to play around with the blending modes to find which you like best.

The finished product looks like this: