Five HOT CSS3 SKILLS OF 2012

With the wide variety of CSS3 techniques available today, it’s easier than ever to create remarkable websites and provide a more engaging user experience. Thoughtful CSS is CSS that respects our designs, that is handcrafted with precision. In this article, we’ll walk through five CSS3 CSS3 methods, media query tips, and CSS gems to learn in a few minutes.

What’s inside:

  1. Add Texture to your Web Fonts using the magic pill.
  2. * { box-sizing: border-box } FTW
  3. Make your Content Editable.
  4. The :before And :after Pseudo-Elements.
  5. MediaQueries: Common Device Width

1. Add Texture to your Web Fonts using a magic pill.

Web designers, want the same level of control over type that print designers have, including texture. Trent Walton implemented a subtle grey flecked texture effect over a white text. The texture will simply show up in supported browsers only.

Here’s the CSS code:

 .mask-box h3, .mask-box p{ 
               -webkit-mask-image: url(/path/to/mask.png); 
               -o-mask-image: url(/path/to/mask.png); 
               -moz-mask-image: url(/path/to/mask.png); 
               mask-image: url(/path/to/mask.png); 
               text-shadow: 0px 0px 30px rgba(30, 28, 28, 0.6);
                           } 

mask.png is the image with the texture effect you need to apply to your font.

2. * { box-sizing: border-box }

Paul Irish came up with a simple trick to solve the CSS problem we suffer from. It’s the relationship between width and padding. When you add padding to your box, you had to subtract the added pixels from your original width so the box doesn’t expand.

The “box model” in CSS works like this:

width + padding + border = actual visible/rendered width of box
height + padding + border = actual visible/rendered height of box

The answer to our problem is the box model. We will force our box <div> to have padding and border subtracted from it’s 100% width instead of expanding it.

.container { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
             -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
             box-sizing: border-box; /* Opera/IE 8+ */ 
}

The box-sizing CSS3 property can do just this. We can now declare our all the elements to be of 100% width, including pixel-based padding and margin, and accomplish our layout perfectly. Here is the trick to apply it to all the elements of your layout:

* {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing: border-box;)

3. Make your content Editable (ContentEditable Attribute)

The HTML5 ContentEditable attribute. You can add this attribute to any HTML element and it automatically makes that element editable.This paragraph is editable in any modern browser that supports HTML5.

You can simple make any element editable by adding this attribute as below:

    <p contenteditable="true">
</p>  

4. The :before And :after Pseudo-Elements.

Many interesting design possibilities can be done using the Pseudo-Elements :before and :after without affecting the semantics of your markup. Here is a roundup of some of the cool things done with Pseudo-Elements. To take advantage of this growing trend, take a look at these simple examples.

We want to use the :before Pseud-element to place an icon in front of the .telnumber tag.

.telnumber:before {
	content:"&#9742;";
	font-size: 17px;
}

Let’s say you want to add a create a tape like gradient on top of an image. Here you will make use of the the :after pseudo element in the example below:

.tape .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 60px;
	height: 25px;
	top: -10px;
	left: 50%;
	margin-left: -30px;
	border: solid 1px rgba(137,130,48,.2);

	background: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6)));
	background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2);
}

Code credit goes to: Webdesignerwall tutorial.

5. MediaQueries: Common Device Width

Media Queries are a great tool to enhance the experience of browsing a web site on multiple devices. To accomplish this with media queries, we can use the device measurements to guide us. The iPhone display measures 480px x 320px, while the iPad offers a much larger canvas of 1024px X 768px.

/* iPad [portrait + landscape] */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads [landscape] ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads [portrait] ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
	/* Styles */
}

/* [Min-Width] The following CSS will apply if the viewing area is greater than 900px.*/
@media only screen and (min-width : 900px) {
/* Styles */
}

/* [Max-Width] The following CSS will apply if the viewing area is smaller than 1280px.*/
 
@media only screen and (man-width : 1280px) {
/* Styles */
}
Issue - Feb-06-2012

Comments

  1. Arun Dadhwal, February 8, 2012

    very nice tips collection. You scored me! :)

  2. Brian Whiting, February 10, 2012

    A great tutorial for some new css3 skills that I didn’t really notice till now. Especially the new one for the width on other devices so it can help make the site not look oddly shaped and what not.

  3. Phil Mckenny, February 10, 2012

    liked the ContentEditable Attribute , could come in handy for ‘live invitations for print outs. Nice article.

  4. Tanya, February 13, 2012

    I didn’t know about all this!
    Thanks very much!

  5. mayurchaudhary, February 14, 2012

    Great list short and effective. Thanks. What i liked the most is “Thoughtful CSS is CSS that respects our designs, that is handcrafted with precision.” …:-)

  6. Jay Kaushal, February 17, 2012

    I came to this site very first time and had a chance to go through this really helpful article. It offered so many tips and specially provided quick access to latest in CSS3. I specially like Media queries for Common device width.

Leave A Comment:

Name:

Email:

Website: