Tag Archive: CSS3

Write CSS3 with Understandable Variables with LessPHP – Part 3

LessPHP allows you to use variables in your CSS stylesheet for the repeatable blocks of code.

In part 2, I provided you with the content of var.less. This part I will give you an example on how to use this .less file to write your own stylesheet. The provided example is based on the final project of this post on the Nettuts+.

First off, here is the folder structure for this example:

Example folder structure

Folder structure for the example

From top to bottom, they are:

css - folder

less - folder

lessc.inc.php in less folder - LessPHP compiler

main.less in less folder - source file to compile to CSS stylesheet

@import 'var';

body, html {
	@dimension(100%;100%);
}

body {
	@center;
}

#box {
  @bg-color(#e3e3e3);
  @dimension(400px;200px);
  @transition(all;1s);
  border: 1px dashed #666;
  margin: auto;
  cursor: pointer;
  position: relative;
 	:after {
 		@dimension(70%;10px);
 		@box-shadow(0;9px;20px;rgba(0,0,0,.4));
	  content: '';
	  position: absolute;
	  bottom: 0;
	  left: 15%;
	  z-index: -1;
	}
	> div {
  	@bg-color(#e3e3e3);
    @dimension(100%;100%);
    @transition(all;1s;ease-in-out);
    position: absolute;
    top: 0;
    left: 0;
    font: 45px/200px bold helvetica, arial, sans-serif;
    text-align: center;
  	:first-child {
	    position: relative;
  	  z-index: 2;
    }
 }
 :hover {
 	@rotate(;rotateY(180deg));
 	> div:first-child {
  	opacity: 0;
 	}
	div:last-child {
  	@rotate(rotateY(180deg));
 	}
 }
}



var.less in less folder - contains the LessPHP variables which I already provided it to you in part 2

index.php in css folder – contains the compile script which provided in part 1

main.css in css folder – contains the compiled CSS styles

index.php in root folder – contains the inclusion of main.css in css folder

Note that some of the code are directly copied from the above source. Also, in order to completely experience this example, you need to use Chrome or webkit compatible browsers.

Feel free to ask any question you have regarding the above code in the comment below.

Write CSS3 with Understandable Variables with LessPHP – Part 2 (Updated)

LessPHP

Update: I updated the code to add more explanation on the Flexible Box Model related properties.

LessPHP provides CSS stylesheet to have variables for reducing repeatable code in order to improve productivity.

In the last part, I talked about how to installing the LessPHP and general folder structure of an one-page web app using LessPHP. This part I will provide you with var.less which includes some CSS3 properties discussed in this post on Nettuts+.

Note that all of the code used LessPHP and CSS3 syntax. If you don’t understand the LessPHP syntax yet, here is its full documentation.

@bg-color(@color:red) {
 background-color: @color;
}

@bg-size(@xWidth:100%;@yWidth:100%) {
 background-size: @xWidth @yWidth;
 -o-background-size: @xWidth @yWidth;
 -webkit-background-size: @xWidth @yWidth;
 -moz-background-size: @xWidth @yWidth;
}

@border-radius(@radius:4px) {
 border-radius: @radius;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
}

 // Accepts start, end, center, baseline, stretch. Default to stretch
@box-align(@align:center) {
 -moz-box-align: @align;
 -webkit-box-align: @align;
 box-align: @align;
}

 // Accepts horizontal, verticle, inherit. Default to horizontal
@box-orient(@orientation:horizontal) {
 -moz-box-orient: @orientation;
 -webkit-box-orient: @orientation;
 box-orient: @orientation;
}

 // Accepts start, end, center, justify. Default to start
@box-pack(@pack:center) {
 -moz-box-pack: @pack;
 -webkit-box-pack: @pack;
 box-pack: @pack;
}

@box-shadow(@x:1px;@y:1px;@blur:3px;@color:#292929) {
 -webkit-box-shadow: @x @y @blur @color;
 -moz-box-shadow: @x @y @blur @color;
 box-shadow: @x @y @blur @color;
}

@box-shadow-multi(@shadows:1px 1px 3px green, -1px -1px 3px blue) {
 -webkit-box-shadow: @shadows;
 -moz-box-shadow: @shadows;
 box-shadow: @shadows;
}

@center {
 display: -moz-box;
 display: -webkit-box;
 display: box;
 @box-orient;
 @box-pack;
 @box-align;
}

@columns {
 display: -moz-box;
 display: -webkit-box;
 display: box;
 @fill(@fill:1) {
 box-flex: @fill; // Accepts either 0 to be as is or an integer to fill the entire area of parent box
 -moz-box-flex: @fill;
 -webkit-box-flex: @fill;
 }
}

 // This is the test/default styles
@defaults {
 @dimension;
 @bg-color;
 @center;
}

@dimension(@width:100px; @height:100px) {
 width: @width;
 height: @height;
}

@resize(@direction:both) {
 resize: @direction; // Value can be both, horizontal, vertical, or none
 -moz-resize: @direction;
 -webkit-resize: @direction;
}

@rotate(@rotateX:rotateX(0deg);@rotateY:rotateY(0deg);@rotateZ:rotateZ(0deg)) {
 transform: @rotateX @rotateY @rotateZ;
 -webkit-transform: @rotateX @rotateY @rotateZ;
 -moz-transform: @rotateX @rotateY @rotateZ;
}

@text-outline(@outterColor:black;@innerColor:white) {
 text-shadow: 0 1px 0 @outterColor, 0 -1px 0 @outterColor, 1px 0 0 @outterColor, -1px 0 0 @outterColor;
 color: @innerColor
}

@text-overflow{
 .on(@type:ellipsis;@width:500px) {
 text-overflow: @type; // text-overflow accepts two values: ellipsis, and clip which didn't seem to work in Chrome
 -o-text-overflow: @type;
 width: @width;
 overflow:hidden;
 white-space:nowrap;
 }
 .off {
 white-space: normal;
 width:100%;
 }
}

@text-shadow(@x:1px;@y:1px;@blur:3px;@color:blue) {
 text-shadow: @x @y @blur @color;
}

@text-stroke(@length:3px;@outterColor:black;@innerColor:white) {
 -webkit-text-stroke: @length @outterColor;
 color: @innerColor;
}

@transition(@property:padding;@duration:0.4s;@easing:ease-in) {
 -webkit-transition: @property @duration @easing;
 -moz-transition: @property @duration @easing;
 -o-transition: @property @duration @easing;
 transition: @property @duration @easing;
}

Some of the above code is commented to give you more information about the acceptable values. One of the code blocks, @defaults, provides you the basic layout for an element. It allows you to add other CSS properties to enhance its layout. As the comment stated, it also provides you with a test layout to test an element.

You also can use the above code as a reference to CSS3 since some people think that CSS3 is harder and more complex than CSS2

You probably noticed that there aren’t multiple background images and @font-face, that’s because I can’t figure out how to integrate them with LessPHP yet.

Do you have any problem using the above stylesheet? Leave a comment below and I will respond to you quickly.

Write CSS3 with Understandable Variables with LessPHP – Part 1

LessPHP

LessPHP is the PHP version of LessCSS, a CSS stylesheet language which is relied on Node.js web server. All LessPHP need is the PHP server.

In this part I walked you through the installation of LessPHP compiler and general folder structure for a one-page web app using LessPHP. In the next part, I will give you some CSS3 properties with parameters which have easy to understand variables.

The installation of LessPHP is easier than you think. After you download its source from GitHub, the only step is to copy lessc.inc.php into your web app folder and included in the page. Here is the basic structure for the folder:

Folder structure for the one-page web app

Folder structure for the one-page web app

Below is the explanation for each file and folder from top to bottom:

web app is the root of the web app.

styles contains lessPHP files and compiled CSS stylesheets.

less contains lessPHP compiler and less source.

main.less relates to main.css which I discussed below. It contains the styles information that will output to main.css.

var.less contains the lessPHP variable definitions which is imported to main.less using @import.

index.php in the styles folder is used to compile the less source to CSS stylesheet. It contains the following code:

<?php
// Convert LESS to CSS styles
include_once 'less/lessc.inc.php';
try { lessc::ccompile('styles/less/main.less', 'styles/main.css'); }
catch (exception $ex) { exit($ex->getMessage()); }
?>

main.css is the compiled stylesheet.

index.php contains the code of your web app but first you need to include the index.php from the styles folder:


<?php
include_once 'styles/index.php'; // Include the LessPHP compiler in the beginning of this file
?>

The above is general folder structure of mine for one-page web app. If you need to create a multi-page web app, you can create a include folder and include the lessPHP compiler to header.php or somewhere similar.

When you edit the stylesheet, you need to only edit the .less files and it will re-generate main.css file once the page is loaded.

In the next part, I will provide you the content of var.less which mentioned above that includes some CSS3 properties for your reference or you can use it as a template.

If you have any question about this part, post them in the comment below.

Using gEdit to write CSS3

Introduction

Since I discovered gEdit has a few useful plugins and wrote about some of them, I have continued to use it as a main IDE. Come to think of it, I almost never used Netbeans which was my favorite editor until I discovered the power of gEdit. In this post I’m going to talk about use one of the gEdit plugins that come with gedit-plugins package – Snippets – to make writing CSS3 code easier.

The snippets plugin lets you define a keyboard string to be typed, then press the Tab key, and the code assigned to that keyboard string would replace this string. It’s great for repeatable code like HTML and CSS. It also has a kind of template markup which defines where the cursor would be focused on. Thankfully, it’s very easier to learn if you have little programming knowledge.

Steps

The following is the best example I can think of explaining the complete markup language and introduce CSS3 code at the same time (First, make sure the gedit-plugins package is installed, you can install it by execute “sudo aptitude install gedit-plugins” on Ubuntu):

  1. Open gEdit (If you don’t know where to open, it’s in the Applications -> Accessories menu)
  2. Make sure the Snippets plugin is enabled: Open Edit -> Preferences -> Plugins, scroll to the very bottom, and select Snippets.
  3. After it’s enabled, open Tools -> Manage Snippets and click to expand the CSS sub-menu. Or, you could create a CSS stylesheet, open Manage Snippets, and it will expand the CSS sub-menu automatically.
  4. Click Create New Snippet button at the top left of the Help button and type the descriptive name for the code snippet you are creating. For example, I named it transform since it will include CSS transform code.
  5. Click the right text box and type the following code (it will be explained later):
    transform: ${1:[scale,rotate,skew]}(${2:degrees}deg);
    -moz-transform: $1($2deg);
    -webkit-transform: $1($2deg);
    $0
    
  6. Click on the Tab Trigger field and type the keyboard string you want to assign to. For example, I assigned it to transform.
  7. Close the Snippets Manager window and you are ready to write CSS transform property.

Explanation

Below I will explain the code in the step 5 above. But first, for those of you new to CSS3, here is an example for the transform property:

transform: skew(-40deg);

Now for the explanation:

The dollar sign ($) followed by a number defines a field which it will be focused with the Tab key.

If you want to predefine a field, you need enclose the predefined value with brackets ({..}) along with the number followed by a colon. For example, ${1:predefined value}.

If you rather want to choose a word from a list of predefined words, you need to add these words after the colon, separate each word with commas, and enclose the list with square brackets. For example, ${1:[val1,val2,val3,val4]}. Once you focused the field with the list of words, it will provide a drop down menu with the list of words for you to choose from.

In the case of -moz and -webkit, you just need to add the corresponding fields  $1 and $2 to the appropriate locations in order for the repetitive code to work. The plugin will automatically fill out the rest as you type the value in the first occurrence of the field. For example, as you type the field ${1:predefined value}, it will fill out $1 in the rest of the document.

Finally, $0 represents the end of the Tab sequence, meaning that it will return to the original tab function.

Also note that in order to use the regular dollar sign ($) within the snippets, you need to escape it using backslash ().

For more information on how to write the template markup for the plugin, refer to the official documentation on gEdit website.

How do you creatively use the Snippets plugin to reduce code repetition? Please share them the comments section below.

Switch Between Stylesheets Dynamically with jQuery

Introduction

I recently learned that almost all of the modern browsers supports CSS3′s media queries. Since I want my webpage cross-browser compatible and display the same layout in different screen sizes, I wrote the following jQuery code inspired by the original Javascript code.

The Code

<link href="styles/main.css" id="styles" type="text/css" rel="stylesheet" />
$(document).ready(function() {
if (screen.width <= 1024) {
$("#styles").attr("href", "styles/netbook.css");
}
});

Explanation

As you can see, I only used the netbook screen size as an example since my netbook has maximum screen width of 1024. You can also easily switch to mobile stylesheet to display on the mobile device by changing the screen.width value in the if statement from 1024 to some smaller value.

Note that unlike the CSS3 media queries, screen.width is your actual screen width instead of browser width. Therefore, using this method will not change the stylesheet on the resized browser window.

If you find any better method to determine the screen size other than CSS3 media queries, please feel free to discuss in the comments below.

Import additional snippets to Bluefish

Update (12/5/2010): As Matt pointed out in the comments section below, you need to replace HTML code for the special characters with raw characters during the import process. For example, replace &lt; with the less than (<) character. Scroll down for more information on the replacement process. Thanks, Matt.

In the last post, I talked about the snippets plugin in Bluefish that allows me to import HTML 5 and CSS 3 tags as well as other languages for reference and reuse purposes. This time I’m going to show you how to import the snippets from the Bluefish wiki into the Bluefish snippets menu.

    1. First, go here to copy the xml code of your choice. Make sure not to copy the <pre> tag.
    2. Paste the copied code into a text editor and save as a xml file.
      Update (12/5/2010): Make sure to use the Find and Replace feature in your text editor to replace all the HTML code for special characters with the actual characters. Here are some common ones (HTML code is in the parentheses): < (&lt;), > (&gt;).
    3. Start Bluefish and switch to the third tab on the left side bar which looks like the following:

  1. Right-click inside the left-side bar and choose Import.
  2. Select the xml file you just saved and click Open.
  3. If the xml code was copied correctly, there should be a new branch appear inside the left sidebar.
  4. Right-click the newly created branch and choose Edit snippet to change the displayed name if you want.
  5. Now you can browse through the code snippets and hover the cursor over one element to learn more about the new tags of HTML 5.

jQuery CSS Browsers Compatibility

Different browsers require different CSS property syntax, especially in CSS 3. In CSS 2, the only property that I know of requires different syntax is opacity property. Firefox called opacity, and IE called filter. You need to set values for opacity and filter properties at the same time. Not only this is inefficient, but it also adds up the size of the CSS file.

Fortunately, jQuery has a css function to make the CSS cross-browser compatible. For example:

$("#thing").css({
   opacity: 0.5
});

It will auto changed to filter CSS property if the user is running IE.

However, since the new CSS 3 is in the draft mode right now, jQuery has not implemented CSS 3 standard yet. It means that border-radius and other properties that are different from each browser needs to write all of the possible style properties into the CSS file.

For more information about jQuery CSS and a jQuery plugin to support CSS 3 syntax, please read original article.

Anigma, an online game created Using CSS 3 and JavaScript

As a web developer, I think playing games is a waste of time. However, during the search for more CSS 3 tutorials, I found an interesting online game called Anigma. It is CSS 3 and HTML 5 based puzzle game. The game uses HTML 5 for the background audio, CSS 3 for the animations in each level, and JavaScript for loading the gameplay levels.

This game is created using the latest specification of HTML and CSS. It uses CSS 3 transition and animation effects for the page animation, HTML 5 for playing game audio. It also uses JavaScript to dynamically load the data for each gameplay level from .level files.

As stated on the game homepage, it’s an open source game. The source code for the game can be freely downloaded. Its source code is available at http://github.com/icefox/css3anigma.

Right now Anigma is only available for Chrome and Safari Webkit-based web browsers. However, I believe that it will become cross-browser compatible in the near future. HTML 5 and CSS 3 are already used by web designers and developers. More online games based on CSS 3 and HTML 5 are expected to come as the popularity of these two web standard languages increase. Furthermore, it will be the best alternative to Flash for some web developers who hate Flash.

CSS 3 Transition Effect

When I first learned about the transition effect of CSS 3, I was not very surprised because I was using Firefox 3.5 at that time. I viewed CSS 3 transition effect again in Chrome today and finally know the benefits of using transition effect.

Unlike other web developers, I hate Flash. One reason is because there is no good Flash IDE available for GNU/Linux, another is that Flash is a proprietary and monopoly format, just like Windows and PDF. After I saw the smooth animation using CSS 3 transition effect in Google Chrome, I decided to implement this effect as replacement for Flash. For those browsers that don’t support CSS 3 yet, such as IE, I might use jQuery to create same effect.

CSS 3 specification is still at early draft stage. Right now web developers have to define two versions of each CSS 3 property: one for Gecko, another for Webkit. However, the Webkit-based browsers have already have CSS 3 animation engine, such as Safari and Chrome. I believe that CSS 3 spec will standardize the syntax for these properties in the future.