CSS

3D Coke Can Experiment without CSS3

Comments

Sunday, April 4th, 2010
Tags: 3d coke can, CSS effect, CSS experiment, css3, rolling coke can

</p> <p>Your browser does not support iframes.</p> <p>
Full Source: http://dallasjclark.com/experiments/css-3d-effect/index.php

The 3D Coke Can Effect above was created with just HTML, CSS, and 2 Images. The HTML is quite simple and the CSS is even simpler.

The two images used is the Coke can shape and the other image is the Coke can label.

So how does it work? In the image below, the blue lines outline the paragraph tags, each paragraph tag shows a different background position of the Coke can label.

All the paragraph tags have loaded the Coke can label, what may appear as one image is actually 55 copies of the same image. When you scroll horizontally, you are changing the location of the paragraph tag and the background position of the Coke can label. Thus, creating a 3D effect of a rolling Coke can.

To enhance the effect, the middle paragraph tags are wider than the outside, creating a sense of depth with the outer paragraph tags.

Finally! The CSS language has been improved.

Comments

Wednesday, February 10th, 2010
Tags: css improvement, css markup language, less css

LESS is a easy to use markup language to extend CSS with variables, mixins, operations, and nested rules. Best of all it's easy to convert to LESS, you simply rename your CSS extensions to .less and you are ready to go.

Of course your existing CSS won't utilise the power of LESS, but it's an easy way to migrate. You could spend a day converting your CSS code to the structure/formatting LESS enables or simply modify as you code.

Variables
Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.

 
 @brand_color: #4D926F;
 
 #header {
    color: @brand_color;
 }
 
 h2 {
    color: @brand_color;
 }

Mixins
Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It's just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example bellow.

 
 .rounded_corners (@radius: 5px) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
 }
 
 #header {
    .rounded_corners;
 }
 
 #footer {
    .rounded_corners(10px);
 }

Nested Rules
Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.

 
 #header {
    color: red;
 
    a {
       font-weight: bold;
       text-decoration: none;
    }
 }

Operations
Are some elements in your style sheet proportional to other elements? Operations let you add, subtract, divide and multiply property values and colors, giving you the power to do create complex relationships between properties.

 
 @the-border: 1px;
 @base-color: #111;
 #header {
    color: @base-color * 3;
    border-left: @the-border;
    border-right: @the-border * 2;
 }
 
 #footer { 
    color: (@base-color + #111) * 1.5;
 }

What's Your CSS Skill Level

Comments

Tuesday, April 1st, 2008
Tags: CSS, Internet, level, sites, skill, web

CSS Skill Level All

Want to know how you rate with your CSS Skills, follow the skill level checklist below to see how you rate.

CSS Skill Level 1
* Iâ€™ve heard of CSS, it is used in web design.
* I have downloaded and used a CSS template before.
* I have poked around in CSS files making small changes like changing colors and removing underlines from links.

CSS Skill Level 2
* I understand that the purpose of CSS is keeping design and content separate, to the highest extent that is possible.
* I have made extensive modifications to a CSS template.
* I have used a WYSIWYG editor to create CSS web page.
* I have a basic understanding of CSS layout techniques.

CSS Skill Level 3
* I have designed a reasonably complex website from scratch using only CSS for layout.
* I have a solid understanding of the structure of CSS, the CSS box model, and CSS positioning.
* I understand how to use float and deal with itâ€™s quirks.
* I have a basic understanding that different browsers render some CSS differently and that needs to be accounted for and tested.
* I have a growing collection of CSS resources to draw from.
* I do not use tables for layout whatsoever anymore. I understand that tables are for tabular data, not page layout.

CSS Skill Level 4
* I have designed and coded a large number of CSS web sites. I can convert a design from any format into a CSS layout: Photoshop, Illustrator, napkin drawings, etc.
* I am completely comfortable writing and editing CSS by hand.
* I have a strong understanding of the cascading part of CSS. Particularly how some some CSS properties do, some donâ€™t, and some depend on how the value is declared.
* I have a solid understanding of cross-browser CSS. I know how to use browser specific CSS statements and delclare browser specific stylesheets.
* I know and have tried some CSS hacks and understand the advantages and disadvantages of using them.
* I have a strong understanding of the different sizing values available in CSS (e.g. em, px, %, pt, â€œsmallâ€, etc.) and in what situations each make the most sense.
* I can quickly troubleshoot and solve CSS problems.
* I have a great collection of tools and resources at my disposal for inspiration, debugging, or reference.

CSS Skill Level 5
* I feel like I could tackle any design idea with CSS.
* I can do pixel-perfect cross-browser conversions of designs into CSS websites.
* I can visualize markup structure easily, just by looking at a design.
* I have utilized additional web technologies to expand the possibilities and break through the limitations of CSS.
* I have my own CSS framework I use, complete with my own customized CSS reset.
* I have a strong understanding of advanced CSS like pseudo classes, pseudo elements, and attribute selectors.
* I keep up to date on browser support and development progress.

CSS Skill Level 6
* I am involved with the future of CSS specifications or support.
* I am a CSS Celebrity.
* Iâ€™ve written books, given seminars, taught classes, knew CSS since she was a little girl, etc.
* I donâ€™t need to do testing, I just know.

Skill level ratings taken from CSS Tricks.

What’s Your CSS Skill Level

Comments

Tuesday, April 1st, 2008
Tags: CSS, Internet, level, sites, skill, web

CSS Skill Level All

Want to know how you rate with your CSS Skills, follow the skill level checklist below to see how you rate.

Skill level ratings taken from CSS Tricks.

Change the way your page prints with CSS

Comments

Wednesday, March 19th, 2008
Tags: change, CSS, different, html, print, script, source, style, tutorial

Sometimes your pages just aren't that pretty when you print them and these days users are printing a lot. Even with all the actions to try and limit printing, we're still increasing our printing by 300% each year.

With CSS we can remove anything we don't want printed, change particular parts to our liking or add more details in, anything you want to do.

You can create the CSS as a separate file (recommended) or add it into your headers. When you reference this CSS file simply add the attribute of media="print" like below:

<link rel="stylesheet" href="print.css" 
type="text/css" media="print" />

Inside the css file you can style anything you want or use the script below for simplicity:

body {visibility:hidden;}
.print {visibility:visible;}

With the script above you can apply the class of "print" to anything you want printed and the rest of the page will be removed.

NOTE: For a better environment please try and limit the amount you personally print, use 'Print Preview' to test the scripts above.

CSS

Archives

Categories