Posts

Showing posts from September, 2012

Make arrows and triangles with CSS only - no images

Image
Make arrows and triangles with CSS only - no images So today I wanted to make an arrow like the one below but I wanted to do this with CSS and not using a background image. As you'll know you can now make rounded corners using CSS3, but what about triangles and arrows like the one above? The answer is to use a trick with element borders.  Essentially when you make a big border on a tiny box they intersect in a triangle like this image. Then all you do is make three sides transparent so you see a triangle. This triangle is then added using the  :after pseudo-element to stick it onto a div box with the text inside. Here is the CSS code for a div tag with an id="arrow" just like my blue one above. #arrow {background-color: #3366cc; height: 30px; position: relative; width: 130px;color:#FFF;} #arrow:after {content: ' '; height: 0; position: absolute; width: 0; border: 15px solid transparent; border-left-color: #3366cc;left: 100%;top: 0px;}

CMYK vs. RGB: knowing which color space to use

Image
CMYK vs. RGB: knowing which color space to use The two basic color spaces, or Modes , that you'll most often encounter with your digital images are  RGB  and  CMYK . Each has a specific use, outlined below. RGB  (Red-Green-Blue) is the color of the  light  emitted from your computer monitor , and from TV's. Use  RGB  if you are taking photos specifically  to be viewed  onscreen , such as the internet, or for a CD or emails.  RGB  usually also works well for printing from your home or office printer. CMYK  (Cyan, Magenta, Yellow, Black) is the color of  inks  used in the offset printing process.  Use  CMYK  if you are sending your photo  to be printed , such as preparing a postcard to be professionally printed for a gallery invite. NOTE: CMYK is an option offered only in full versions of Photoshop; it is not available in Photoshop elements or most other photo editing programs (if you kn...