Home » Posts filed under Atom text editor for windows

Atom.io editor now runs on Windows

9:32 PM No Comments

Get the shiny new Atom text editor built by the guys at Github . A fully featured editor built from the ground up using web technologies , much like Brackets , but much more powerful than it. And I hate to say it but it's even much better and friendlier than the Sublime Text IDE .

Here are a list of features offered by Atom

  • File system browser
  • Fuzzy finder for quickly opening files
  • Fast project-wide search and replace
  • Multiple cursors and selections
  • Multiple panes
  • Snippets
  • Code folding
  • A clean preferences UI
  • Import TextMate grammars and themes
A bit from their site
Node.js support makes it trivial to access the file system, spawn subprocesses, and even start servers directly from within your editor. Need a library? Choose from over 50 thousand in Node's package repository. Need to call into C or C++? That's possible, too.

Officaially it's available only for Mac OS , thnaks to Someguy123 it is now also available for Windows . And works perfectly on Windows 7 and 8.


Multiplying the text-shadow property

10:42 AM No Comments

Text-shadow css3 awesome effect , 3d text shadow css3 , Atom css3



Demo
Source Files

Love it ? Grab the code below . We loved the shiny new Atom editor by Github , so here's a rebound built with pure CSS , with over twenty text-shadow elements , it came to look like this.

Stariting with the html  it's pretty basic, an <h1> tag inside a <div> id .

HTML
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="atom-main.css"/>
</head>
    <body>
        <div id="Main">
            <h1>Atom</h1>    
        </div>
        </body>
</html>

Big . Big . Big , Now it looks cool
See the multiple shadows . A couple of text-shaodows could gives a subtle look to he typgraphy . It would look much better if there were a grunge type of background .

Using the text-shadow property:
The formal syntax for the text-shadow is

text-shadow: [x-offset][y-offset][z-offset] color;
The x-offset is your x coordinate , y-offset for y-coordinate and the z-offset is for blur ( This is the moment when you say WTF?htmlcss ) .
Now let's begin coding the stylesheet . We are going to add opacity to the text so as to mix the text a bit with the background . For this, we'll use the opacity property .
 opacity: [value] ;
The value ranges forom 0 to 1 , where 0 is for more transparency and to 1 is for more opaque .

We are setting it to 0.6 .
Next comes a huge list of text-shadow properties .

 text-shadow:

        /* 3D text shadow */

        0.5px 0.5px 0.5px #747474,
         1px 1px 0.5px #747474,
         1.5px 1.5px 0.5px #747474,
         2px 2px 0.5px #747474,
         2.5px 2.5px 0.5px #747474,
         3px 3px 0.5px #747474,
         3.5px 3.5px 0.5px #747474,
         4px 4px 0.5px #747474,
         4.5px 4.5px 0.5px #747474,
         5px 5px 0.5px #747474,
         5.5px 5.5px 0.5px #747474,

        /* Light shadow */

        -0.5px -0.5px 0.5px #aaa,
         -1px -1px 0.5px #aaa,
         -1.5px -1.5px 0.5px #aaa,
         -2px -2px 0.5px #aaa,
         -2.5px -2.5px 0.5px #aaa,
         -3px -3px 0.5px #aaa,

        /* highlights*/

        3px 6px 0.2px #8c9140,
        3.5px 6.5px 0.2px #868d39,
        2px 8px 0.5px #acb442,
        2px 8.5px 0px #acb442,
        5px -3px 0.3px #8f9636

        ;

}

That's just it . Now mess around with it .

CSS

html{
    background-color:#9ba236;
}
body{
}
#Main{
    margin:0 auto;
}
h1{
    opacity:0.6;
    font-size: 90px;
    font-family:Montserrat;
    color:white;
    text-shadow:
         0.5px 0.5px 0.5px #747474,
         1px 1px 0.5px #747474,
         1.5px 1.5px 0.5px #747474,
         2px 2px 0.5px #747474,
         2.5px 2.5px 0.5px #747474,
         3px 3px 0.5px #747474,
         3.5px 3.5px 0.5px #747474,
         4px 4px 0.5px #747474,
         4.5px 4.5px 0.5px #747474,
         5px 5px 0.5px #747474,
         5.5px 5.5px 0.5px #747474,
        -0.5px -0.5px 0.5px #aaa,
         -1px -1px 0.5px #aaa,
         -1.5px -1.5px 0.5px #aaa,
         -2px -2px 0.5px #aaa,
         -2.5px -2.5px 0.5px #aaa,
         -3px -3px 0.5px #aaa,
        3px 6px 0.2px #8c9140,
        3.5px 6.5px 0.2px #868d39,
        2px 8px 0.5px #acb442,
        2px 8.5px 0px #acb442,
        5px -3px 0.3px #8f9636
        ;
}