The Icon Deposit Blog

New "Create a New Post" User Interface

new-cnpuser-interface.PNG

Today I created a new user interface design for the "Create A New Post" category. This page is available when you go to your profile and click "Create a New Post". I created custom shapes from scratch to make all of the icons. This one took about 4 or 5 hours to design, getting down to the very last pixel (well tried to get as close as I can). I added some really nice CSS3 effects, and used the Wikidot JQuery collapsible text block to open up the categories. I really made the text block more advanced than the normal Wikidot collapsible text block. This one has a more modern look and feel to it.

I would like to hear some feedback, anything I should change or switch up. Critiques are welcome as well.

To check out the new design and see the full effects Click Here to see it in action!

New User Profiles Are Out!

Just thought I would keep it simple and clean this time, so I finally finished the beginning of the Icon Deposit User Profiles, finished it in 14 hours! There are new features still being added but for being in a beta stage right now, it's not to shabby.

Everyone has been upgraded to the new user profile design, to begin editing your new profile, join us by using the home page, then start to edit.

Here is a first look:

g.PNG

Feel free to request new features as well as comment on this post for critiquing the new profile design.

How To Properly Smooth Font Using CSS3

I've came across some people usually wondering how some websites have such crisp and clear font. There are two reasons for this:

1. They are most likely using the -webkit-font-smoothing hack. This type of hack is mostly used for mobile browsers, as well as the Apple Safari and Google Chrome Browsers.

2. To really smooth the font and not have anything too blurry websites usually use the text-shadow effect. This is also used so the font will look smooth on all browsers (Opera, Firefox, Safari, Chrome and others alike) except internet explorer.

When you apply the font smoothing hack to your stylesheet and you want it applied to your whole site, make sure we write the following code.

Lets start off by adding the font smoothing hack to your stylesheet:
html, html a {
    -webkit-font-smoothing: antialiased !important;
}

Here is the definition of anti-aliased: http://en.wikipedia.org/wiki/Spatial_anti-aliasing

Now for the text shadow effect to really smooth out the font:
html, html a {
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
Here is the code all put together:
html, html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

To really see what I am talking about, here are a couple of demo's that shows it's smoothing.

If you have a good eye for this kind of design, you will notice the difference:

Here is how it looks when the font is not smoothed:

Hello World!

Here is how it looks when the font is smoothed:

Hello World!

Quick Update

Just a Quick update, over the next couple of weeks we will be changing up the rest of the site to fit the new theme design. Here is a list of the changes we plan on making.

- Fixing the User Profiles to fit the new site theme, with much better features this time, a lot more simple and easy to use.

- We plan on adding an designer/developer feature (will explain more when this is finished).

That's all :D

Pure CSS3 Forrst Icon

Just was messing around and made this Forrst Icon using CSS3. This is all CSS3 coding (no images used), It works with Google Chrome and Mozilla, I never checked it out on Safari but I'm sure it's fine on that too. Our profile on Forrst is http://forrst.com/people/IconDeposit for more of my posts.

Zoom in and out, it's all CSS3 code!

The Wikidot syntax (for wikidot users):

[[div class="forrst-wrap"]]
[[div class="forrst-tree"]]
[[div class="forrst-trunk"]]
[[div class="forrst-branch1"]]
[[div class="forrst-branch2"]]
[[div class="forrst-branch3"]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]

The HTML coding:

<div class="forrst-wrap">
<div class="forrst-tree">
<div class="forrst-trunk">
<div class="forrst-branch1">
<div class="forrst-branch2">
<div class="forrst-branch3">
</div>
</div>
</div>
</div>
</div>
</div>

The CSS:

.forrst-wrap { /* Background of Icon */
    width: 300px ; 
    height: 300px ; 
    border: none ;
    background: #335D30;
    background: -moz-linear-gradient(top,#4A7746 25%,#335D30 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(25%,#4A7746),color-stop(100%,#335D30));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A7746',endColorstr='#335D30',GradientType=0);
    padding: 8px 15px 8px 12px;
    margin: 30px auto 0  ; 
    padding: 30px ; 
    -webkit-border-radius: 200px ;
    -moz-border-radius: 200px ; 
    border-radius: 61px; 
    position : relative; 
    -webkit-box-shadow: 0 0 7px #1A3911 ; 
    -moz-box-shadow: 0 0 7px #1A3911 ;
    box-shadow: 0px 0px 5px rgba(255,255,255,.5), inset 1px 1px 5px rgba(255,255,255,0.5) ;
    top:-20px;
}
 
.forrst-tree { /* Forrst Tree */
    margin: 0 auto ; 
    border-left: 120px solid transparent; 
    border-right: 120px solid transparent; 
    border-bottom: 270px solid #4a9e64 ; 
    width: 2px ; 
    position: relative;
}
.forrst-trunk { /* The Tree Trunk */
    width: 20px ; 
    height: 125px ; 
    background: #336f30;
    position: absolute ; 
    top: 170px ; 
    left: -10px ; }
 
.forrst-branch1, .forrst-branch2, .forrst-branch3 { /* The Branches */ position: absolute; width: 13px; height: 45px; background: #336f30; }
.forrst-branch1 { /* Left Branch */ left: -13px; top: 20px; margin-righ: 50px; -moz-transform: rotate(-55deg) !important; -webkit-transform: rotate(-55deg) !important;}
.forrst-branch2 { /* Top Right Branch */ left: 25px; top: 20px; -moz-transform: rotate(-55deg) !important; -webkit-transform: rotate(-55deg) !important;}
.forrst-branch3 { /* Bottom Left Branch */ left: -30px; top: -10px; right: -60px; -moz-transform: rotate(-0deg) !important; -webkit-transform: rotate(-0deg) !important; height: 60px !important;}

How to Run Your First PHP Application On Your Computer

In this tutorial we will explain in detail, what PHP is and how to run a simple application on your own computer, this is to help your development of websites go much faster.

First, let’s begin to understand what PHP is and what’s required to make it run correctly.

PHP is a scripting language that runs on the “server-side”, which means that browsers aren’t able to process it, and it can be run from the command line or inside a webserver, e.g. Apache (more on that later). PHP is currently the most common scripting language used in today’s world, and it doesn’t just allow you to dynamically write HTML, it interacts with other databases and make’s use of other plugins and extensions. This is to provide your user with the best possible experience while surfing on the web or your website. The era of static websites has now come to an end with the introduction of PHP and other scripting languages.

Webpages are basically HTML files that include several hyperlinks to other files which can either be CSS, Javascript, images, media or other HTML files. When the HTML reaches the browser, no PHP scripting should be there. First, because PHP is not HTML and the browser doesn’t understand it. Second, because PHP is intended to run only on the server to provide HTML code for visualization.

To write PHP you can use the same HTML editor you’re already using, since PHP is just “text” mangled between HTML. Notice that PHP can do a lot more stuff than writing HTML, but it has to be contained in the files which are processed by the server. For now, just assume that we are using PHP to write HTML.

Every piece of PHP code inside any document follows certain rules. It must follow this specific pattern:

<?php
//PHP code here...
?>

Notice the <?php before writing the PHP code and the ?> after writing the PHP code. This tells the server that the piece of code enclosed is PHP and it has to be processed by the PHP extension.

But, what if the webserver doesn’t understand it? Simple, it sends the code to the client in the same way as HTML.

Example: Try opening a file in your web browser that includes the following contents (save it to a file, name it hello.php, and open it in the web browser of your choice):

<html>
<head>
<title>My first PHP Page</title>
</head>
<body>
<h2> <?php echo 'Hello World!'; ?> </h2>
</body>
</html>

You will notice that everything is shown, including the PHP code, which shouldn’t be there.

So, to start effectively running PHP code, we will need a webserver.

For Windows users, I advise you to install the WAMP Server it is really easy to install and setup with it’s extensive functionality and it’s easy to configure with the same versions your web host will provide you with.

If you’re a MAC OS X user, MAMP seems to be the perfect solution. As any MAC OS X application, its installation is simple, and it also provides a nice app to manage your configuration and a widget to start and stop the servers.

For details on installation and configuration, please refer to their “products page”. Nevertheless, you can also ask questions here about it and I will try to answer.

Sidenote on Webhosting companies: Any webhosting with PHP and MySQL support will do, the vast majority of them support it so pick the one you prefer. For the sake of simplicity, I’d go with one providing cPanel, which is a control panel for site managing, which allows easy backup and restore functionality. In case you need to change hosting company, you just need to backup from the old one and ask for restoration on the new one.

Each of the above mentioned products, contain a directory named htdocs or www, this is where you should place your files. It is advisable that you create a folder inside that one, say hello (…/htdocs/hello/) where you’ll put the hello.php file created above. Place the file inside and now direct your browser to //http://localhost/hello/hello.php// and you’ll be able to see something similar to:

Hello World!

Note that, Hello World! comes from PHP, through the use of the “echo” command which prints the “Hello World!” text in that place of the HTML file. Looking at the resulting HTML you should be able to see:

<html>
<head>
<title>My first PHP Page</title>
</head>
<body>
<h2> Hello World! </h2>
</body>
</html>

Now you’re ready to start learning PHP, there are a few nice tutorials on the web, this one from W3Schools that in my opinion provides a great kickstart and insight. Follow that tutorial if you want to learn more on PHP, in the next tutorials, we’ll cover PHP in more depth assuming that you’ve followed and understood that tutorial.

I hope you enjoyed this tutorial, feel free to comment, ask for help, provide tips on how to improve it, and also any new ideas for future tutorials.

If you are going to be using this tutorial, please link this back to our e-commerce website freebie post… http://nydesignweb.com/archives/166

Written and Thought of by Nuno Senica - Co-owner of my site Design Web

Copyright © 2011-2015 Icon Deposit - All rights Reserved