Snipplr - michellebracken

(CSS) How to Change image on rollover(MouseOver) in CSS

Fri, 16 Mar 2012 06:37:59 GMT

HTML first and then css

(HTML) How to add your own social icons as scrolling buttons to your WordPress Site:

Wed, 14 Mar 2012 16:03:10 GMT

How to add these as scrolling buttons to your WordPress Site: Upload each individual image to your ftp or to a free image hosting server and copy the url of each image location. Add the following code to the footer.php of your WordPress Site by clicking on the Editor button under Appearance on your Dashboard and then clicking on the Footer.php in the right hand column. I would put it toward the bottom, and make sure that you don’t accidentally add it inside of another div. Switch out the “Your Image Urls” with the urls that you just saved, and of course make sure to switch out the link urls to your actual contact links. Also, make sure that each titles matches each image. (This is very important, so that when someone scrolls over your facebook button, the words Facebook appear – or whatever text you put there.) The code I’ve given above has the display dimensions that you see in the image above. You can change how they appear, however, by editing the pixel numbers and choosing whether you want them to appear on the left or right hand of the screen, and whether you want them to appear on the top or bottom of the screen. NEVER, EVER copy and paste directly from here or anywhere on the web. Put the code into a text editor first, and ensure that all of the quotation marks are facing the proper direction and that there are no extra spaces.

(CSS) Sticky Footer

Wed, 14 Sep 2011 01:47:43 GMT

(CSS) Creating a Fixed Header

Thu, 18 Aug 2011 03:22:14 GMT

Instead of letting your entire page scroll you might want to hold the header with your logo and navigation fixed in place and only let the content below scroll. You want to make sure to keep the header and content divs separate and then use position: fixed on the header. Other ideas you can try are creating a scrollable table with a fixed header within your page or keeping both header and footer fixed while allowing your content to scroll between them.

(CSS) CSS Tooltips

Thu, 18 Aug 2011 03:20:46 GMT

You can create a lightweight CSS cross browser tooltip easily with a few lines of code. You can add more styles to suit your design. The key is the span is set to display: none until you hover over the link. When you hover over the link the display is changed to show inline and given a position of absolute. position: relative is necessary on the link in order to ensure the tooltip is positioned in relation to the link and not another containing element.

(CSS) Creating Circles With Border-Radius

Thu, 18 Aug 2011 03:18:42 GMT

The CSS2 border-radius property can be used to create circles in all browsers that support the property. The trick is to set the height and width of the element so they’re the same and set the border-radius of the element to be half that value. border-radius is the CSS standard property -moz-border-radius is for Mozilla based browsers like Firefox -webkit-border-radius is for webkit based browsers like Safari and Chrome Unfortunately none of the above will work in any current version of Internet Explorer.

(CSS) Letterpress Type Through CSS

Thu, 18 Aug 2011 03:17:38 GMT

The basic idea is to make use of the CSS3 property for text-shadow to create the letterpress effect. The trick is to use a shadow color that’s lighter than the text color and offset it a little and add a bit of blur. The values above for the text-shadow property are:

(CSS) Create a CSS Frame for Images

Thu, 18 Aug 2011 03:16:09 GMT

Many images look nice a frame. You typically frame pictures before hanging them on a wall so why not add a frame to images on your website. The trick is to wrap your images in a div and add a simple class. You can use a variety of border-style values to create different looks to the frame (groove, ridge, inset, outset, double, dotted, dashed, solid). The padding and background-color on the frame div will create the look of a mat around your image. Adding border, padding, and margin to the image itself can create the effect of having a second mat around your image for an extra effect. Once set up all you’ll need to do to add your frame to any image is wrap it with a div and assign the class. You can even create several different styles of frames and then pick and choose which to use for each image.

(CSS) Simple Debugging in CSS

Thu, 18 Aug 2011 03:13:38 GMT

Sometimes your CSS doesn’t seem to be working like you expect and you want to isolate one element in your html to see what space it occupied. An easy way to do this is to give the element a border temporarily One downside of this is the extra px in the border could temporarily throw your layout out of whack, since it increases the width of your element. You may find at times it drops a floated element further down the page for example. Still it can be a quick and easy way to see what’s going on and you can overcome the width limitation, by temporarily decreasing the width you’ve given to the element to compensate for the extra width the border adds.

(CSS) Understanding !important

Thu, 18 Aug 2011 03:12:05 GMT

!important is a way to override CSS specificity. In general it’s not the best solution since the more you use it, the more you end up needing to use it again. It can make your CSS unmaintainable in a hurry. It can be useful due to a quirk in IE. When you have something like the following browsers should show the h1 with a color red. IE, however will show the style that comes last instead of following the rules of precedence. So the code would show your h1 as red in all browsers except IE where the color would be blue.

(CSS) Style the Element that has Focus in a Form

Thu, 18 Aug 2011 03:10:41 GMT

A nice usability tip is to let people filling out a form know which input currently has focus. You can do this easily using the :focus pseudo-selector This way your users will know exactly which field is ready for input

(CSS) Replace Text with an Image

Thu, 18 Aug 2011 03:09:23 GMT

Better typography through more font choices is here, but there are still limitations to using it in practice. Sometimes the easiest solution is to use an image. However you also want the original text to be there for search engines and screen readers. A simple way to have both text and image is to use the text-indent property. The height and width should match those of your image

(CSS) Class vs. Id

Thu, 18 Aug 2011 03:08:19 GMT

(CSS) Prevent a Line Break

Thu, 18 Aug 2011 03:06:46 GMT

Sometimes the text in a link or heading will break where you don’t want it to. A simple way to prevent this is:

(CSS) CSS Triangles and Other Shapes

Thu, 18 Aug 2011 03:06:00 GMT

CSS borders come together at an angle at any corner. This isn’t obvious when setting a border that’s the same color on all sides or if your border-width is only a few px. Making the width much larger and setting different border-colors on different sides lets you see this clearly. Taking advantage of these angles we can use the border-property to create some interesting shapes. Creating a triangle is a matter of setting the border-color on 3 of the 4 sides to transparent. You also want to set the width and height of the element to be 0 in order for all 4 corners to meet at a point. You can set the border opposite the triangle to 0 as well, but the adjacent borders need to maintain a width or the entire element with borders will collapse to a single point. With a little experimentation you can create moe interesting shapes, especially if you combine several elements.

(CSS) Basic 3-column CSS layout (fixed width, centered, header and footer, sidebars on right and left of the content)

Thu, 18 Aug 2011 03:04:35 GMT

Expanding on the above 2-column layout is this common 3-column layout. Again the widths are arbitrary, but necessary. You can float the secondary div to the right if you prefer.

(CSS) Basic 2-column CSS layout (fixed width, centered, header and footer, sidebar on right)

Thu, 18 Aug 2011 03:02:46 GMT

This is a pretty common website layout and it’s rather easy to code. The specific widths are arbitrary, but it is necessary to include a width. The keys are centering the wrapper as described above in this post, floating both columns, and clearing the footer div. You could also float the sidebar div to the right. Either will work, though I find it easier to float both in the same direction.

(CSS) nth-child

Thu, 18 Aug 2011 03:01:11 GMT

The nth-childCSS pseudo-selectors allow you to target the 3rd or 7th or nth element in a list. Another use would be to style odd and even rows in a table differently. The alternative is to add a class specifically to the list-item you want to style differently, but that’s not very flexible. The nth-child syntax looks like this: This would select the 3rd item in the list and give it a blue background Similarly that code would style every 3rd list item with a blue background Unfortunately no current version of IE supports it. However there is a way to simulate the 1st bit of code above for IE7 and IE8. The last code will also target the 3rd element in the list in a way that IE7 and 8 understand. Not quite as useful as being able to use (3n+3) to target every 3rd list-item, but better than nothing. Hopefully IE9 will support nth-child. Another and perhaps more practical solution currently is to use jQuery, which supports all CSS3 selectors.

(CSS) Target IE7 (and below) and IE6 (specifically) without Conditional Comments

Thu, 18 Aug 2011 02:58:38 GMT

We all know how difficult IE can sometimes be when it comes to CSS. However instead of cursing IE under your breath or out loud you can easily write IE specific code that other browsers will ignore. My own preference is for conditional comments, but here’s a quick trick you can use in your main CSS file. With the exception of IE, all browsers will ignore the asterisk in front of the property. Everything other than IE6 will ignore the underscore. The order of the properties is very important due to CSS precedence rules.

(CSS) Cross-Browser Transparency

Thu, 18 Aug 2011 02:57:31 GMT

Not all browsers currently support the CSS3 opacity property. However we can still make transparency work across browsers. From the bottom up: opacity is the CSS standard and will work in current Webkit and Mozilla browsers as well as Opera -moz-opacity is for older versions of Mozilla Browsers -khtml-opacity is for older versions of Safari and any browser using the khtml rendering engine filter:alpha(opacity=50) is for Internet Explorer