| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

Julianne Kelleher

Page history last edited by jkelleher 8 years, 10 months ago

Wiki Entry #6 Shapes in CSS http://www.1stwebdesigner.com/create-different-shapes-css/

Often times with websites simple shapes need to be made in photoshop or found online and edited, with CSS, that step can now be taken out. This is done by re-sizing the boarder radius, changing the orientation, and translating in about the origin. The easiest way to do this is to find the CSS code online, so you will be able to copy that then make edits to the shape. 

The first step is creating a div, for the purpose of this, I'm going to explain how to make a heart so I will name my div "heart"

The next step is copying in the CSS:

#heart {    position: relative;}

 

#heart:before,#heart:after {    content: "";    width: 70px;    height: 115px;    position: absolute;    background: red;    left: 70px;    top: 0;

    -webkit-border-radius: 50px 50px 0 0;

    -moz-border-radius: 50px 50px 0 0;

    border-radius: 50px 50px 0 0;

    -webkit-transform: rotate(-45deg);    -moz-transform: rotate(-45deg);    -ms-transform: rotate(-45deg);    -o-transform: rotate(-45deg);    transform: rotate(-45deg);

    -webkit-transform-origin: 0 100%;

    -moz-transform-origin: 0 100%;

    -ms-transform-origin: 0 100%;

    -o-transform-origin: 0 100%;

    transform-origin: 0 100%;

}

 

#heart:after {    left: 0;    -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);    -ms-transform: rotate(45deg);    -o-transform: rotate(45deg);    transform: rotate(45deg);

    -webkit-transform-origin: 100% 100%;

    -moz-transform-origin: 100% 100%;

    -ms-transform-origin: 100% 100%;

    -o-transform-origin: 100% 100%;

    transform-origin: 100% 100%;

}

The really interesting part of that is that if you need to change something about it, if it's the color or the size, that can be done directly in your code as opposed to having to change it in photoshop then having to export it back to dreamweaver. You can also examine the code to provide even more customizability. 

The finished product should look like this:

 

Wiki Entry #5 Fav Iconhttps://www.youtube.com/watch?v=Qxs-L93qeGA
There are two main parts to creating a fav icon, or the image seen next to the title in a tab. The first part is creating an image of the right size. Ideally the icon should be about 30px x 30px. When designing one would use the companies logo, but for the purposes of my explanation I opted to use the UN's logo.
The first step is to find the image you want to use as a logo - it helps if this image is a square. From there, open it in Photoshop or another photo-editing tool. When open, make the detention change so that it is 30x30 and then save it, either as a .gif or a .jpeg. I saved it as a .gif because .gif's load faster and there should not be very many colors in the logo.
Once the right dimensions are selected, it is time to move to HTML. In the head section, paste in: <link rel="shortcut icon" href="/images/logo.gif"/> and the image should appear next to your title in the tab.
This is a simple yet extremely useful tip. It helps in establishing logo recognition of larger companies in addition to adding professionalism to the site. In doing this not only is the fav icon established on the tab itself, but it will also show up for bookmarks.
Wiki Entry #4 Scrollable Divs
Scrollable divs allow more text to be displayed in the same amount of space.
The code for scrollable divs should be inserted with the rest of the CSS.
div {
over-flow: scroll;
}
When making overflow text, make sure that if you want it to scroll that the text itself is larger than the height of the div.
(excuse the design) This is what it should look like
This will take the text from the divs <p> tag and make it scroll.
Wiki Entry #3 Embedding a Twitter Feed on Your Websitehttp://www.anphira.com/web-design/adding-twitter-feed-website/
This post is going to be a little bit shorter, but something important to know, how to embed a twitter feed into your HTML.
First, log on to twitter and go to settings - located in the top right corner
Then select widgets, it should be the last option in the settings list
Once you go into widgets, select "create new" in the upper right hand corner
Finally you have to configure the widget, to do that there are quite a few options to chose form such as:
User Timeline would display only your tweets
Favorites woulddisplayany of the tweets you have recently favorited
Lists would display tweets from a certain list you have chosen (from your settings --> list),
Custom would allow other options.
Other optionsregardingthe appearance include:
Hight - if you don't specify it in the options it would just be confined to the div it is placed in
Theme - can chose between light and dark
Link color - for example, if you have a green theme, the links can be green
Once you are satisfied with the settings, click "create widget"
After the widget is created, there will be pre-selected code. Copy it to your clipboard
Once it is copied, paste it into your code where you want it to go.
The anchor code is customizable, so if you want to change something that you don't like but don't want to totally go through and re-do the widget creating, you can change it in the code.
Wiki Entry #2 Transparent Text Areahttp://www.photoshopessentials.com/photo-effects/transparent-text-area/
This is what I am trying to recreate in photoshop, which turned out to be much easier than I though.
First, select an image to use the transparency on, I selected the Boston skyline, but it can really be done on any skyline.
Then go into photoshop and open this image in a new document.
From there, create a new layer. Once the new layer is added, go to edit>fill then select white.
After you do this, the image will look like this:
So in order to see the background image the opacity needs to change. For the purposes of this, change the opacity to 70%:
From here, add the text. This text can essentially be anything, but I chose to use the city name. At this point in time the font size and placement is not very important.
Next, re-size the text with free transform (commant+t or find it in the edit menu). The image should be large enough to stretch across the image, but not so large it is distorted or monopolizing the page. At this point also think about the placement of the text.
After this, combine the text layer with layer 1 (or the white layer) do this by going to the layers menu and selecting group layers.
Once the two layers are grouped, select the text layer. When you select the text layer, click on the small menu icon above it and select blending options.
Once in blending options, look at the advanced settings and find the "knock out" menu (located just below the "Channels". From there select shallow. After shallow is selected, bring the fill opacity down to 0
The image will look like this:
Next, go to layer one and use the free transform option (can be found either in the edit menu or by using command+t). Use this tool to resize the semi transparent so that it surrounds the word, but doesn't cover up the whole image.
Then you have a transparent text area!
Wiki Entry #1 Rollover links
Rollover links can change pretty simply from one color to another, but it takes a little bit more to make a rollover link change as far as images go.
In order for a rollover link to change images, you need to first start with a primary image and have a secondary image. To do this, photoshop is helpful.
In order to make sure that the two images work together and transition well, in photoshop you want to work with them on two layers. First, create the shape you want on the first layer, then duplicate it to your second layer, then edit it in the way you want your rolled over image to change.
After that, use the "save for web" function of photoshop.
From here go into dreamweaver and place the images in the webpage, from there add the java script for roll over.
In order to tell your site that you want to use JavaScript, you should make sure that the link section of your code looks like this:
<a href="/index.html"
onmouseover="buttondown('homebutton')"
onmouseout="buttonup('homebutton')">
<img src="homebutton.gif" name="homebutton" border="0" />
</a>
Then, it's time to add the actual script to your head section, which will allow for the roll over to occur as you would like it to.
<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
homebuttonup = new Image();
homebuttonup.src = "homebutton.gif" ;
homebuttondown = new Image() ;
homebuttondown.src = "homebuttondown.gif" ;
}
function buttondown( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "down.src" );
}
}
function buttonup ( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "up.src" );
}
}
// -->
</script>
buttonup and buttondown are the differential between the two images, buttonup being the primary image and buttondown being the secondary image.
If you wanted to create more than one link like this, you would add it's information under where, fore example, the home button's information is.
Sources: https://helpx.adobe.com/photoshop/using/web-graphics.html
http://www.thesitewizard.com/archive/rollovers.shtml

Comments (5)

Lori said

at 12:10 pm on Feb 24, 2015

Entry #1, 4/4. Model post, all required elements are provided. I suggest for a future post enter how you can create the same function using code rather than an image.

Lori said

at 8:18 am on Mar 17, 2015

Entry #2: 4/4. I love it! Great post, this is a very useful and attractive skill in Photoshop. Your directions are very clear and all required elements are provided in your post.

Lori said

at 8:29 am on Mar 31, 2015

Entry #3: 4/4. This is definitely a useful post for our very active Twitter world. I would recommend providing more detailed instructions of where to paste the code (in the body section vs. the head section)

Lori said

at 8:53 am on Apr 9, 2015

Entry #4: 3/4. This is a useful post which I have used often on my sites. I would be good to report on a little more advance feature. Also, remember to include a resource link.

Lori said

at 8:04 am on May 20, 2015

Entry #5: 4/4
Entry #6: 4/4

I really like the use of CSS3 and I will accept the fav icon code but try to post on more advance level coding.

You don't have permission to comment on this page.