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.

  7. http://BestGpsreviews2013.com, May 30, 2014

    I’m extremely pleased to discover this page. I want to to thank you for ones
    time just for this wonderful read!! I definitely liked every little bit of it and i also have you saved as
    a favorite to look at new information in your site.

  8. top plasma 2014, August 13, 2014

    Asking questions are genuinely pleasant thing if
    you are not understanding anything entirely, however this post
    offers good understanding even.

  9. best Vacuum Cleaners, August 13, 2014

    Hey there, You have done an excellent job. I’ll certainly digg it and
    personally suggest to my friends. I’m sure they’ll be benefited from this
    web site.

  10. Best camcorder 2014, August 19, 2014

    Hello just wanted to give you a brief heads up and
    let you know a few of the pictures aren’t loading correctly.
    I’m not sure why but I think its a linking issue. I’ve tried it in two different web browsers and both show the same outcome.

  11. beststrollersreviews2014.com, August 20, 2014

    Just desire to say your article is as astounding.
    The clearness in your publish is just great and i can assume you’re knowledgeable on this subject.

    Fine with your permission allow me to clutch your RSS feed to stay updated with impending post.
    Thanks one million and please carry on the
    gratifying work.

  12. bestvacuumcleanersreviews-2013.com, August 31, 2014

    My partner and I absolutely love your blog and find many of your post’s to be just what
    I’m looking for. Does one offer guest writers to write content for you?
    I wouldn’t mind creating a post or elaborating on a number of the subjects you write in relation to here.
    Again, awesome site!

  13. Cual Es El Mejor Robot Aspirador, December 18, 2014

    Hi i am kavin, its my first occasion to
    commenting anyplace, when i read this article i thought i could also create comment due to this brilliant article.

  14. Nannie, December 28, 2014

    Thanks for sharing your thoughts about best headset. Regards

  15. What is the best vacuum, January 5, 2015

    I got this web page from my pal who shared with me concerning this site and at the moment this time
    I am browsing this site and reading very informative posts at this
    place.

  16. caokun.net, January 6, 2015

    Howdy very cool site!! Man .. Beautiful .. Amazing ..
    I’ll bookmark your site and take the feeds additionally?
    I am happy to seek out numerous helpful information right here
    within the publish, we need develop more techniques in this regard,
    thanks for sharing. . . . . .

  17. best smart watch brand, January 12, 2015

    Quality content is the important to be a focus for the
    users to go to see the web site, that’s what this web site is providing.

  18. DSLR Camera review in 2015, January 17, 2015

    Great article.

  19. Meilleur Aspirateur, January 24, 2015

    Everything is very open with a really clear description of the challenges.

    It was truly informative. Your site is useful. Thanks for sharing!

  20. mstarvis.com, January 31, 2015

    Hi there, I want to subscribe for this blog to obtain hottest updates, so where can i do it please help out.

  21. router test ihm 2015, February 6, 2015

    You actually make it appear so easy together with your presentation however I in finding this topic to be really something which
    I feel I’d never understand. It sort of feels too complicated
    and extremely wide for me. I’m taking a look ahead to your next post,
    I’ll try to get the grasp of it!

  22. elektrische zahnbürsten test, February 8, 2015

    Greetings I am so excited I found your web site, I really found you by accident, while I was
    searching on Google for something else, Anyhow I am
    here now and would just like to say thanks for a marvelous post and a all round exciting blog (I also love the theme/design), I don’t have time to read through it all
    at the minute but I have bookmarked it and also added
    your RSS feeds, so when I have time I will be back to read more, Please do keep
    up the great work.

  23. Matratzen test 2015, February 11, 2015

    Thank you a bunch for sharing this with all people you really
    understand what you’re talking approximately! Bookmarked. Please additionally talk over with my site =).
    We will have a hyperlink change contract between us

  24. Meilleur lisseur, February 18, 2015

    Excellent, what a website it is! This web site presents helpful
    facts to us, keep it up.

  25. kindersitz test 2015, February 21, 2015

    What a data of un-ambiguity and preserveness of precious familiarity about unexpected emotions.

  26. papillongifts.net, February 25, 2015

    Quality articles is the key to invite the visitors to go to see the site, that’s what this website is providing.

  27. netspaceinternet.com, March 12, 2015

    Because the admin of this site is working, no hesitation very soon it will be renowned, due to its feature contents.

  28. top 5 inkjet printers of 2015, March 16, 2015

    Quality articles is the key to be a focus for the visitors to visit the
    website, that’s what this website is providing.

  29. Beatris, March 19, 2015

    Hi there to all, the contents existing at this web site are genuinely awesome for people knowledge, well, keep up the
    good work fellows.

  30. adminsystem.net, April 20, 2015

    Aw, this was an exceptionally nice post.
    Finding the time and actual effort to create a top notch article… but what can I say… I hesitate a lot and never seem to get anything
    done.

  31. Quel est le meilleur GPS, May 1, 2015

    Hi there, You’ve done an incredible job. I will
    definitely digg it and personally recommend to
    my friends. I am sure they will be benefited from this website.

  32. شركات تنظيف منازل, June 18, 2015

    Hello there! I could have sworn I’ve been to this site before but after reading through some of the post I realized
    it’s new to me. Anyways, I’m definitely delighted I found it and I’ll be book-marking and checking back frequently!

  33. cara mengobati keputihan dengan daun sirih, June 22, 2015

    Many specialists will order an MRI or CT scan of
    the TMJ area. In some instances, a bone scan is useful.

Leave A Comment:

Name:

Email:

Website: