Inner glow in CSS
This is an excellent trick that i across recently. This CSS trick will allow you to add an inner glow to any container eg. DIV, IMG.
All you need is just 2 HTML elements and 3 lines of CSS code.
HTML code:
<div id="box1" class="innerGlow"> <div id="e1" class="innerElement"></div> </div>
CSS code:
.innerElement{
position: relative;
z-index: -1;
}
.innerGlow{
box-shadow: inset 0px 0px 120px rgba(0, 0, 0, 0.9);
}
I quickly did a small demo based on this. This is how it looks
This is a good trick to have it in your bag. Try various options and see how it works.
Getting started with LESS – Manage CSS / Stylesheet
We all know the power of CSS and how it drastically reduces the development time. For a moment, imagine there is no concept of CSS and you are asked to change the layout of a site(with large number of pages). Thats crazy. You will spend hours and hours to fix this. If you are a CSS designer, you will know what exactly i am talking about.
Back to normal life. Even though CSS is a gift for web designers, sometimes it gets really difficult to maintain it. It all depends on the individual to write a disciplined code. But it would be great if there is some structure in defining CSS. Well, there is a solution for this.
In this article i am going to talk about Learner CSS(LESS) and give a small demo on the same.
Features of LESS:
Define Variables:
Just like any programming language, LESS enables you to define variables. Define variable in one place and re-use them throughout the document. So changing the value will automatically reflect in all other places you have used the variable.
@default_font_size: 12px;
body{
font-size: @default_font_size;
}
p{
font-size: @default_font_size;
}
In the above example the variable @default_font_size contains value “12px”. The font-size style in body and p tag is using this variable. So just changing the value at one place will affect both body and p tag.
Mixins:
Mixins are similar to functions in a programming language. It can take parameters and the styles inside the function can use the value.
.fontSize(@size:0){
font-size: @size;
}
body{
.fontSize(14px);
}
In the above example, .fontSize is the function name and @size is the parameter. The parameter has the default value of 0. Checkout how body tag is using this mixin.
Nested rules:
I love this feature. This feature allows you to create a well defined structure to the document. Whatever structure you have in your HTML can be followed here.
#menubar{
float: left;
ul{
margin-left:50px;
}
li{
float:left;
.fontSize(4);
}
}
In the above example, #menubar is the parent of all styles. Suppose if you want to style a ul tag inside #menubar, normall you will style for #menubar ul. But with LESS you have give a structure to these styles. So this way it becomes very easy to maintain the code.
Operations:
You know what, you can do some basic mathematics in the document. This will be handy.
@default_content_padding: 10px;
a{
color: @menu_item_normal_up_text_color;
padding: (@default_content_padding / 2) @default_content_padding;
display: block;
}
One thing to note in the above example is, the division operation will maintain the value unit(px). So irrespective of the type of value(px, em, %, etc) the operations can be performed. This is just awesome.
How to set up LESS:
The LESS files are stored in the file format .less. So to convert this file to .css file you need to compile it. Before that you need to install the LESS GEM. Checkout http://lesscss.org/ for more information.
For those who do not use Ruby, you can also compile LESS online. Checkout http://www.tripeedo.com/less
Meanwhile, you can checkout the demo of LESS done by me.
Create a table using CSS – No <table> tag
This post was migrated from my old blog. You can see the original article here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="table.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>
<body>
<div class="table">
<ul>
<li class="title">Player Name</li>
<li class="even">Sachin</li>
<li class="odd">Gilchrist</li>
<li class="even">Dhoni</li>
<li class="odd">Ponting</li>
</ul>
<ul>
<li class="title">Country</li>
<li class="even">India</li>
<li class="odd">Australia</li>
<li class="even">India</li>
<li class="odd">Australia</li>
</ul>
<ul>
<li class="title">Ranking</li>
<li class="even">1</li>
<li class="odd">2</li>
<li class="even">6</li>
<li class="odd">10</li>
</ul>
</div>
</html>
</body>
</html>
/* CSS Document */
.table {
background:#333;
}
.table ul {
float:left;
margin:0;
padding:0;
border:1px solid #C9C9C9;
}
.table ul li {
list-style:none;
padding:5px 10px;
}
.table ul li.title {
font-weight:bold;
background:#333;
color:#fff;
}
.table ul li.even {
background:#fff
}
.table ul li.odd {
background:#FFFFE6
}