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 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 since 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.

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.

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.

CSS3 @font-face property

CSS3 introduces a new method for formatting the font on the web page using the font files stored on the local server instead of using the font installed on the user’s computer. By using @font-face property for CSS3, web developers could use their own fonts to format the web page in order to make the same page layout across browsers without worrying the cross-browser page layout. Of course, Internet Explorer doesn’t support CSS3 yet. Below is the syntax for the @font-face property:

@font-face {
font-family: 'NotethisRegular';
src: url('fonts/Note_this.eot');
src: local('Note this Regular'),
local('Notethis'),
url('fonts/Note_this.woff') format('woff'),
url('fonts/Note_this.ttf') format('truetype'),
url('fonts/Note_this.svg#Notethis') format('svg');
}
body {
font-family: NotethisRegular, Verdana, Arial, sans-serif;
}

As you can see from above code, the @font-face property acts like a function. It defines font-family and file location. To use it, simply add the font-family name into the font-family list in the element that needs to be formatted. This is great for logo design which uses some creative fonts.

CSS 3 Rounded Corner Effect and its Problem

CSS 3 is the next version of CSS. It introduces many cool effects for web developer to use. I learned about CSS 3 long time ago, but had never tried it. As I read more and more about CSS 3 and HTML 5 tutorials around the web, I decide to try to learn CSS 3 first. The problem with CSS 3 and HTML 5 is that Internet Explorer doesn’t support these specifications. My personal solution to this problem is to display a warning message through PHP to encourage IE users to completely give up Internet Explorer and switch to other browsers.

When I first learned about CSS 3, I felt that the language is harder to learn than CSS 2. In fact, it is easier to understand once I tried it through hands-on. As far as I know, CSS 3 relies on two different engine: Mozilla and Webkit. That means that to make it cross-browser compatible (except IE), I need to add two CSS properties with same values but slightly different property names. One for the Mozilla engine, another for the Webkit engine. For example, the following produces a black rectangle that has three rounded corners with drop shadow:

width:550px;
height:500px;
background-color:#8a2bcd;
-moz-border-radius-topleft:200px;
-webkit-border-top-left-radius:200px;
-moz-border-radius-bottomleft:200px;
-webkit-border-bottom-left-radius:200px;
-moz-border-radius-topright:200px;
-webkit-border-top-right-radius:200px;
-moz-box-shadow:10px 13px 20px #000;
-webkit-box-shadow:10px 13px 20px #000;

Below is the result:

The problem with this effect is that it only displays the rounded corners as a background image. When I add content inside this div tag, the content overlays above the rounded corners instead of appear inside of the corners, as the following screenshot illustrates:

I haven’t found the solution to this problem yet, but I think I will find the solution eventually as I go through CSS 3 tutorials one by one. To learn more about the properties mentioned above and other CSS 3 properties, just google “CSS 3 tutorials“.