CSS+HTML

=CSS/HTML Snippets= This is where you can little bits of helpful code that we learn in class or discover on your own. toc

Open and Postions New Browser Window
To open a new browser window to a **certain location and/or size**, place the following code in the head section of your HTML files: code  self.moveTo(0,0) self.resizeTo(960.960) code

Fluid Centre in Browser Window
Add a class to CSS file code format="css" .centered { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 60%; margin: auto; } code

In the HTML file, just under the create a new tag that will encompass all your code code code Just above the closing close the div you just made

This can be changed the percent % value to move your layout within the browser window

Also possible centre your layout vertically, adding space above and below your layout within the browser window. Simply add this line to your centered class

Project 1A Template

Slide Transition
//one image to another, on hover (transitions with a soft transparency)//
 * note* I think this might be css3.

> First up, the HTML markup. Without CSS enabled, you just get two images. Remember to add alt text for production use. code format="html4strict"   code code format="css" position:relative; height:281px; width:450px; margin:0 auto; }   position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; }
 * Plan**
 * 1) Put one image on top of the other
 * 2) Change the opacity of the top image on hover
 * Code**
 * Then the CSS:**
 * 1) cf {
 * 1) cf img {

opacity:0; } code View the web example I've made here: [|Sample]
 * 1) cf img.top:hover {

Rotating Images
This is a code to use for Project 1C or 1D which may be a helpful component for your design idea. If you place a square image, it will start rotating if you indicate the angle rotation that you want your image to spin at.

code  self.moveTo(0,0) self.resizeTo(960.960) code code format="css" .e3{ position:absolute; top: 510px; left: 5px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; }
 * In your HTML:**
 * In your CSS styles:**

.e3:hover{ -webkit-transform: rotate(1080deg); -moz-transform: rotate(1080deg); -o-transform: rotate(1080deg); -ms-transform: rotate(1080deg); transform: rotate(1080deg); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; transition: all 1s ease; } code

Rotating Text
This code can be used to rotate text boxes from vertical to horizontal or vice-versa. Name the "classname" in the CSS file to whatever the Textbox is named in your HTML file. Have fun and play around with the numbers. A very BIG thank you to Keya Vadgama for sending me this!

.classname{ -webkit-transition:All .2s ease; -moz-transition:All .2s ease; -o-transition:All .2s ease; -webkit-transform: rotate(-90deg) scale(1) skew(0deg) translate(0px); -moz-transform: rotate(-90deg) scale(1) skew(0deg) translate(0px); -o-transform: rotate(-90deg) scale(1) skew(0deg) translate(0px); }
 * In your CSS styles:**

.classname:hover{ -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }

Image Rollovers
As some of you may have seen on Facebook, here is a PDF document with a detailed lesson on creating rollovers using photoshop, HTML and CSS.



Patterned Background
This is a tutorial on how to create a pattern background using CSS. Click here

Mini Scrollbar Window
This code will allow you to create a small window within the same window in which you can place text or images. It acts as a small browser window - this is good if you want to display a lot of text or more than one image in one window without having to scroll through the whole window.

You will have to enter this code under code format="html4strict" 
 * In your HTML code: **

      code You will have to adjust the left and top position of your box depending on where you want it positioned in your window. Also, the height and width will vary depending on how big you make your images. I do suggest keeping the images small than the scroll box window that you create and allowing space between images so each image does not connect with each other as the user scrolls down. This code will allow the scroll bar on the y-axis appear and hide the bottom scroll bar on the x-axis. Therefore, I do recommend making the width of the scroll bar equal or greater than the width of your images. If you want the x-axis scroll bar to show, then change "hidden" to "scroll". When coding the CSS for your text or images, be aware that you are positioning them within the scroll box and not the main window. Therefore, your first image will most likely be positioned at the top with 0px and the following images will be placed below depending on the height of your first image. code format="css" .scrollbox { position: absolute; left: 193px; top: 199px; height: 410px; width: 389px; overflow-y: scroll; overflow-x: hidden; }
 * In your CSS code: **

position: absolute; top: 0px; margin: auto; }
 * 1) img_1{

position: absolute; top: 395px; margin: auto; } code
 * 1) img_2{

Hover over one element, affect many
This is an interesting effect if you want someone to roll over one element and have some other element appear, change colour, etc. But remember, once you group these elements together in CSS, they are pulled into the parent z-index layer. That took me a little while to figure out.

code format="lang-html prettyprint"  // refers to style.css
 * HTML:**

 Lorem Ipsum... code

code format="lang-html prettyprint" .section {background: #ccc;} /* Sets properties for container */ .layer {background:#ddd;} /* Sets .layer properties */
 * CSS styles:**

.section:hover img {border:2px solid #333;} /* If a user hovers over anything in "section", img will... */ .scetion:hover .layer {border:2px solid #f90;} /* If a user hovers over anything in "section", .layer will... */ code

How to create an email link
This a great thing to add to your footer and/or contact page. When someone clicks on the link, their email will pop up and your email address will appear. It's easy:

Text you want to appear like "Contact me"

example: media type="custom" key="13564288"

How to expand an image moving from right to left
This took me hours to figure out! It is easy to create a hover effect where an image looks like it is expanding and collapsing, but the default setting moves from left to right. So, how do expand and collapse an image so it looks like it's sliding from right to left? It is not intuitive although the solution is fairly easy once you know. What you need to do is crop your image, then uncrop it when a user hovers over it. To get a sliding effect, just add a transition. You can see how I did it on my website [|here]

So... sliding from left to right:

code <!DOCTYPE html> Title  .htmlbutton { position: absolute; opacity: 1; top: 100px; left: 0px; width: 10px; height: 760px; background: url(http://digital-locker.design.yorku.ca/1006mw12/lab1/dnighbor/images/backgroundh.jpg); z-index: 2; /* links to image */ -webkit-transition: 0.75s; /* smooth transition */ -webkit-transition-timing-function:ease-in-out; -moz-transition: 0.75s; -moz-transition-timing-function:ease-in-out; transition: 0.75s; transition-timing-function:ease-in-out; }

.htmlbutton:hover { width: 680px; /* resizing of the image. The transition means to it takes 0.75s to transition from it original state to the new size */ height: 760px; }

</a> //link to file code In action here

Now, sliding from right to left. It's the same thing except it can only work it you crop the image. See "clip:rect" line:

code <!DOCTYPE html> Title <style type="text/css"> .processingbutton2 { position: absolute; opacity: 1; top: 0px; left: 0px; width: 669px; height: 720px; clip:rect(0px,669px,900px,659px); /* IMPORTANT! This is how the image is cropped */ overflow: hidden; background: url(http://digital-locker.design.yorku.ca/1006mw12/lab1/dnighbor/images/backgroundp.jpg); -webkit-transition: 0.75s; -webkit-transition-timing-function:ease-in-out; -moz-transition: 0.75s; -moz-transition-timing-function:ease-in-out; transition: 0.75s; transition-timing-function:ease-in-out; }

.processingbutton2:hover { clip:rect(0px,669px,900px,0px); /* This is the new crop size which reveals to full image */ }

</a>

code In action here

Link Opening a New Window
This code allows for a link to open up in a new window instead of opening up in the current browser window. This is beneficial as it will lead the user to another window allowing them to not have to constantly click "back" to go back to where they were originally when they clicked the link.

code  insert link title here </a> code
 * In your HTML code:**

**EMBEDDING EXTERNAL FONTS**
This code allows you to embed external fonts that are not defaulted onto computers. This is very useful when you want interesting, decorative fonts that won't appear normally. To do so, follow the instructions:

1. Copy and paste your font file to your website folder. You can make it a separate folder if you wish. 2. Input the following CSS code to your CSS file. code @font-face { font-family: 'Name the Font (you can name it whatever)'; src: url("Link for your font (your website folder(s)") format("TTF or OTF") } code code @font-face { font-family: 'Caviar Dreams';  src: url("typefaces/CaviarDreams.otf") format("opentype"),  url("typefaces/CaviarDreams.ttf") format("truetype") } code 3. Input your font-family name for the sections you want the font to be used.
 * Here is an example:**

code font-family: "Caviar Dreams", sans-serif; font-size: 12px; line-height: 11.5pt; color: #999999; } code I hope this has been helpful! (:
 * Here is an example:**
 * 1) regulartext {

**FAVICONS**
What is a favicon? A favicon is a **graphic image** (icon) associated with a particular Web page and/or Web site. They are used as a visual reminder of the Web site identity in the address bar or in tabs.

So you see the icons beside the url in your browser? You can make one for your website too! You can have a different icon for each of your pages, or you can have the same one throughout, and it's pretty simple.

1. Make an image, but take care not to make it too detailed, as the size will end up around 16 x 16 pixels. 2. Go to the site @http://favicon.htmlkit.com/favicon/. 3. Download the zip file, which contains an .ico file, a .gif file and text instructions. 4. You can move the files to wherever is convenient for you, I moved them into my images folder. At this point, you can use either the animated one or the still icon. 5. Put the following codes into the head of each document (so you can have a different one for each page, or keep the same icon)

code <link rel="shortcut icon" href="NAME_OF_YOUR_IMAGES_FOLDER/ICON_NAME.ico"/> code code <link rel="shortcut icon" href="NAME_OF_YOUR_IMAGES_FOLDER/ICON_NAME.ico"/> <link rel="icon" type="image/gif" href="NAME_OF_YOUR_IMAGES_FOLDER/ICON_NAME.gif"/> code
 * WITHOUT ANIMATION **
 * WITH ANIMATION **

The icon works in Firefox, and Opera, I haven't looked at it in other browsers, but on Safari you would have to fiddle with some files to get it showing I believe. Have fun!

CREATE A SCROLLABLE DIV CONTAINER
.contentbox { position: absolute; top: 0px; left: 0px; width: 500px; height: 500px; z-index: 5; }
 * overflow: scroll; **

By simply adding the overflow command and setting it to scroll, any additional text or content that goes beyond the boundaries of your box fits inside a scrollbar window. This is great if you want to use a layout that doesn't take up the entire page.

= How to Create An Image Slider with Pure CSS3 = The HTML markup for image slider is so simple like this: code format="html4strict" <img id="image1" src="1.jpg" /> <img id="image2" src="2.jpg" /> <img id="image3" src="3.jpg" /> <img id="image4" src="4.jpg" /> <img id="image5" src="5.jpg" /> 1</a> 2</a> 3</a> 4</a> 5</a> code So, the complete CSS for the image slider is: code width: 400px; height: 250px; overflow: hidden; position: relative;
 * 1) images {

margin: 20px auto; }   width: 400px; height: 250px;
 * 1) images img {

position: absolute; top: 0; left: -400px; z-index: 1; opacity: 0;

transition: all linear 500ms; -o-transition: all linear 500ms; -moz-transition: all linear 500ms; -webkit-transition: all linear 500ms; }   left: 0; z-index: 9; opacity: 1; }   left: 0; }   text-decoration: none; background: #E3F1FA; border: 1px solid #C6E4F2; padding: 4px 6px; color: #222; }   background: #C6E4F2; } code For more details go to: http://www.deluxeblogtips.com/2010/05/image-slider-pure-css3.html
 * 1) images img:target {
 * 1) images img:first-child {
 * 1) slider a {
 * 1) slider a:hover {

= How to Rollover (thumbnail) Popup = In your CSS Style Sheet:

<span style="font-family: 'Courier New',Courier,monospace;"><style type="text/css">

<span style="font-family: 'Courier New',Courier,monospace;">.thumbnail{ <span style="font-family: 'Courier New',Courier,monospace;">position: relative; <span style="font-family: 'Courier New',Courier,monospace;">z-index: 0; <span style="font-family: 'Courier New',Courier,monospace;">}

<span style="font-family: 'Courier New',Courier,monospace;">.thumbnail:hover{ <span style="font-family: 'Courier New',Courier,monospace;">background-color: transparent; <span style="font-family: 'Courier New',Courier,monospace;">z-index: 50; <span style="font-family: 'Courier New',Courier,monospace;">}

<span style="font-family: 'Courier New',Courier,monospace;">.thumbnail span{ /*CSS for enlarged image*/ <span style="font-family: 'Courier New',Courier,monospace;">position: absolute; <span style="font-family: 'Courier New',Courier,monospace;">background-color: lightyellow; <span style="font-family: 'Courier New',Courier,monospace;">padding: 5px; <span style="font-family: 'Courier New',Courier,monospace;">left: -1000px; <span style="font-family: 'Courier New',Courier,monospace;">border: 1px dashed gray; <span style="font-family: 'Courier New',Courier,monospace;">visibility: hidden; <span style="font-family: 'Courier New',Courier,monospace;">color: black; <span style="font-family: 'Courier New',Courier,monospace;">text-decoration: none; <span style="font-family: 'Courier New',Courier,monospace;">}

<span style="font-family: 'Courier New',Courier,monospace;">.thumbnail span img{ /*CSS for enlarged image*/ <span style="font-family: 'Courier New',Courier,monospace;">border-width: 0; <span style="font-family: 'Courier New',Courier,monospace;">padding: 2px; <span style="font-family: 'Courier New',Courier,monospace;">}

<span style="font-family: 'Courier New',Courier,monospace;">.thumbnail:hover span{ /*CSS for enlarged image on hover*/ <span style="font-family: 'Courier New',Courier,monospace;">visibility: visible; <span style="font-family: 'Courier New',Courier,monospace;">top: 0; <span style="font-family: 'Courier New',Courier,monospace;">left: 60px; /*position where enlarged image should offset horizontally */

<span style="font-family: 'Courier New',Courier,monospace;">}

<span style="font-family: 'Courier New',Courier,monospace;">

<span style="font-family: 'Courier New',Courier,monospace;">**In your HTML file**

<span style="font-family: 'Courier New',Courier,monospace;"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><img src="media/tree.jpg" /> Simply beautiful.</a>

<span style="font-family: 'Courier New',Courier,monospace;"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><img src="media/ocean.jpg" /> So real, it's unreal. Or is it?</a>

<span style="font-family: 'Courier New',Courier,monospace;">

<span style="font-family: 'Courier New',Courier,monospace;">

<span style="font-family: 'Courier New',Courier,monospace;">Dynamic Drive<img src="media/dynamicdrive.gif" /> Dynamic Drive</a>

<span style="font-family: 'Courier New',Courier,monospace;">Zoka Coffee<img src="media/zoka.gif" /> Zoka Coffee</a>

<span style="font-family: 'Courier New',Courier,monospace;">Try it out! <span style="font-family: 'Courier New',Courier,monospace;">example and source [|here]

= How to Embed Music onto Website =

code format="html4strict" <embed src="filesource/music.mp3" autostart="true" loop="infinite" hidden="true"

code

<span class="wiki_link_ext">[|link] that explains all the steps [|link] that provides other options (music player)

= How To Embed Your .pde File On Your Website =

Processing.js is a javascript file that can be imported/linked to like any other file. It allows you to display your processing sketch (.pde file) directly on your webpage. First grab the processing.js file (use Save Page As...) and put it into your website's folder.

Once it is in, go to your HTML code and load it the using: //<span style="font-family: Arial,Helvetica,sans-serif;"> <script src= "processing-1.3.6.min.js" > //

Once that is included, you can use the canvas tag (new to HTML5) to help draw it out. So in your : //<canvas data-processing-sources="YOURPROCESSING.pde"> //

On top of that, if you want to fit your canvas in a certain specific place on the page, you can use a class in CSS to do so. //<canvas id="player" data-processing-sources="YOURPROCESSING.pde"> //

Under the assumption "player" is the name of the class you created in your CSS file.

= How to Prevent a Background Image from Jumping =

Sometimes when working on HTML and CSS, you may run into the problem of a background image suddenly jumping up or down as you navigate through the pages. This is caused because the pages change in length because of the different amount of text/ images on each page.

There is a **simple solution** for this problem: //Align your background image to the top of the page//! Its a good idea to always have this in mind because the different font sizes in your browser may also be the problem, and this simple solution will prevent this from happening.

= Experiment with Visited Links =

Normally, unvisited links appear blue and visited link purple. However, with a little tweaking on CSS, this can be fixed to whatever colour you want it to be!

code a { /* unvisited link styles here */ color:blue; }

a:visited { /* visited link styles here */ color:purple; text-decoration:line-through; } code You can change the colour to whichever you want, as well as the text-decoration you want. For example, here, the unvisited link would be the normal style (blue), and the visited link would be purple with a streak through it.

Coloured Scrollbar code <style type="text/css"> body { scrollbar-arrow-color: ffffff; scrollbar-base-color:ffffff; scrollbar-dark-shadow-color: ffffff; scrollbar-track-color: ffffff; scrollbar-face-color: ffffff; scrollbar-shadow-color: ffffff; scrollbar-highlight-color: ffffff; scrollbar-3d-light-color: ffffff; } code || Just change the colours to whatever you like!