TurtleBlog » CSS

Crop Image with CSS

Edd Turtle — Mon, 09 Nov 2009 21:49:32 +0000

A simple question, have you ever wanted to crop an image using CSS? Well here’s the answer, clip: rect(). It’s quite easy to do with jQuery and PHP but this is a great and easy option for all those little gallery thumbnails.

Demo:

HTML:

CSS:

.example {

    position: absolute;

    clip: rect(30px 350px 270px 50px);

}

Note that the coordinates for cropping all start from (0,0) and that the syntax is rect(topline rightline bottomline leftline).

Great CSS Inspiration

Edd Turtle — Fri, 10 Apr 2009 14:50:52 +0000

Over the last couple of months I have been bookmarked any great looking website I came across for inspiration at a later date. Here are some of the sites which I really like, I also like the fact that their style varies enormously.

1. www.brianwebdesign.com

2. www.koves.com

3. www.globe-studios.com

4. deborahcavenaugh.com

5. www.codegreene.com

6. www.webdesignerwall.com

7. www.andographic.co.uk

8. www.davidesavelli.it

9. www.omnitech-inc.com

Dislike link Outline?

Edd Turtle — Wed, 08 Apr 2009 14:59:24 +0000

If you’ve ever made a slick new menu for a website but you hate the fact that each time when you click on a link a dotted line appears around it then here’s your answer.

Before

After

CSS Code:

a {outline:none;}

Note that this is all good and well but there is a downside, trying to navigate your new menu with the keyboard is now near impossible.

CSS Trips (Tricks & Tips)

Edd Turtle — Wed, 08 Apr 2009 11:12:41 +0000

Here are some ultra cool CSS techniques to get you through some of the hard times of coding. Each one is handy in its own special way and has its own advantages. Photo by Nils Geylen

1. !important

This CSS element allows certain items to take precedence over others, ignoring their position in the document. Normally CSS takes the last given entry as correct but this can overwrite it. This unfortunately doesn’t work in IE but is still very handy.

Example Code:

margin-right: 20px !important;

2. Effects

Want to make a very cool looking button or box with minimal effort? Well CSS can do just that. The two elements that come to mind are the opacity tag and CSS3 border-radius tag, they currently don’t work in all browsers but hopefully will soon.

Border-Radius

Opacity

Border-Radius Code:

-moz-border-radius: 10px; -webkit-border-radius: 10px;

Opacity Code:

opacity:0.6;

3. Center Alignment

This is a super easy way to center align a block element like a div tag. It basically means no margin top and bottom and automatic margining right and left, which causes it to be in the center.

Code:

margin:0 auto;

4. Short Hand

This is must have, and very simple to implement. Instead of writing font-size, font-family, font weight and font-style you can write it into one simple line.

Code:

font: italic bold 28px/32px Verdana,Geneva,sans-serif;

5. Vertically Align Text

This little tip can come in very handy when designing simple pages with little content. It also saves using loads of
tags which is very tempting I know.

Center Aligned

Code:

height: 100px;line-height:100px;

6. Using Two Classes

Your CSS will become very messy if you duplicate things for a minor change. This once again is very useful and helps when you have two classes with a single

tag. All that is needed is a space between the classes.

Code: