Skip to main content

CSS3 My Favorite Tricks

CSS3 is cool. It's animation and 3D stuff are amazing. But things like rounded corner and gradients are the most useful. I am listing down few tricks that I use often for my own quick reference.

Gradient


No more slicing.. and repeating images to make shaded backgrounds.

  background-image: -webkit-gradient(linear, left top, left bottom, from(#6f6f6f), to(#000000)); /* mozilla - FF3.6+ */
    background-image: -moz-linear-gradient(top, #6f6f6f 0%, #000000 100%); /* IE 5.5 - 7 */
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#6f6f6f',EndColorStr='#000000'); /* IE8 */
    -ms-filter: progid: DXImageTransform . Microsoft . gradient(gradientType = 0, startColor = '#CCCCCC', endColoStr = '#000000'); /*Transparent back */


Shadows. Rounded Corner, and Transparent Layers.


I like to give a div a transparent background and put some kind of a background image under it. Drop the shadow from that box make it look much nice..


  /*Transparent back */
    opacity:0.4;

    /*Rounded corners */
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: solid 1px #888888;

    /*The shadow */
    -moz-box-shadow: 3px 3px 2px #ddd;
    -webkit-box-shadow: 3px 3px 2px #ddd;
    box-shadow: 3px 3px 2px #ddd;


Styling a table with CSS3


Interesting thing to note here is the table.tableStyle tr:nth-child(even) selector. This is to color two rows with different colors, which we had to write javascript earlier. 

table, td, div, span, a {
    font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
    font-size: 12px;
}

table.tableStyle {
    border-left: solid 1px #468aa6;
    border-top: solid 1px #468aa6;
    border-collapse: collapse;
}

table.tableStyle th {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#56aed2), to(#417f98));
    background-image: -moz-linear-gradient(top, #56aed2 0%, #417f98 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColor = 0, endColorStr = #417f98); 
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColor = 0, endColoStr = #417f98);
    color: #fff;
    font-size: 11px;
    text-align: left;
    padding: 3px;

    border-right: solid 1px #468aa6;
    border-bottom: solid 1px #468aa6;
}

table.tableStyle td {
    border-right: solid 1px #468aa6;
    border-bottom: solid 1px #468aa6;
    margin: 0px;
    padding: 3px;
}
table.tableStyle tr:nth-child(even) {background: #ccdde1}
table.tableStyle tr:nth-child(odd) {background: #FFF}

Comments

Post a Comment

Popular posts from this blog

Using javascript to Include a html file inside another html file

When there is no server side functionality needed we create the whole site in plain html. Usually these sites have left/right side menu, top header, footer etc.. If the site grows in to 20, 30 pages, it will be a headache to do a simple change like changing footer text. We will have to change each page. If we were using a server side technology like PHP, JSP, etc.., we will have the chance to keep the common areas in the site in different pages and include these parts in each page using a “include” statements. We can do the same thing with the plain old html and javascript. But how? First you need to create the site main layout using divs and give them unique ids. <html> <title>HTML Includes</title> <script language="javascript" src="js/main.js"></script> <script src="js/prototype.js" type="text/javascript"></script> <script language="javascript" xml:space="preserve"> // <...
6 comments
Read more

New Lost Season Rocks !!!!!

New Lost season started on ABC network last Tuesday. In last two seasons they introduced time travel. Now it seems they are talking about parallel universe theory. They say this is going to be there last season of the long running amazing TV show. "The aftermath from the detonation of the hydrogen bomb is revealed."
1 comment
Read more

APIM 3.0 - populate multiple apis - bash script

Created a bash script to create, tag and publish multiple APIs. This is useful to populate data for the landing page. #!/bin/bash # get the URL consumer key clientId=$(curl -k -X POST -H "Authorization: Basic YWRtaW46YWRtaW4=" -H "Content-Type: application/json" -d @payload.json https://localhost:9443/client-registration/v0.14/register | jq -r '.clientId') clientSecret=$(curl -k -X POST -H "Authorization: Basic YWRtaW46YWRtaW4=" -H "Content-Type: application/json" -d @payload.json https://localhost:9443/client-registration/v0.14/register | jq -r '.clientSecret') echo $clientId echo $clientSecret encoded=$(echo -ne $clientId:$clientSecret | base64) echo $encoded # get access token accessToken=$(curl -k -d "grant_type=password&username=admin&password=admin&scope=apim:api_view,apim:api_create" -H "Authorization: Basic $encoded" https://localhost:9443/oauth2/token | jq -r '.access_token'...
Post a Comment
Read more