Tutorials

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

Custom CSS Button Sprite

promo2.jpeg

Here is a huge freebie that will be extremely useful for web developers and graphic designers. This is a custom designed CSS3 styled button sprite. For the definition of an "image sprite" please refer to Wikipedia's definition of Sprite (computer graphics).

This download is a .zip file that includes a Read Me file, a promotion image, promotion thumbnail, very large .png image that contains an already made "Download Now!" text inside the button area. Also comes with a .PSD file for people that own Photoshop, and a .XCF file for people that have Gimp. The Photoshop and Gimp files can be used to re-color, and edit completely. This is licensed under the Creative Commons Attribution 3.0 License so you are free to edit this as long as this work is linked back and given all credit to Icondeposit.com and the graphic designer Matt Gentile. It must be linked back to this page.

This work also comes with an already designed CSS stylesheet for the buttons, you will just need to customize it how your site is configured. If you do not know how to use these buttons on your site then please feel free to contact us.

If you would like to use the big download button on your site then here is the CSS code for it:

/* CSS code designed by Matt Gentile - Creator of Icondeposit.com */
.download_button {
    width: 492px;
    height: 120px;
    background: transparent url(images/downloadnowspriteback492.png) 0 0px no-repeat; /* When not hovered over */
}
.download_button:hover {
    width: 492px;
    height: 120px;
    background: transparent url(images/downloadnowspriteback492.png) 0 -121px no-repeat; /* When hovered over */
}
.download_button:active {
    width: 492px;
    height: 120px;
    background: transparent url(images/downloadnowspriteback492.png) 0 -243px no-repeat; /* When you press down on the icon or the icon is activated (clicked on) */
}

Download This CSS Button!

Top 20 Free Amazing JQuery Plugins

This list of jquery plugins is in no specific order, it's just our pick of the Top 20 free amazing JQuery plugins from across the internet. It features everything from login and contact forms, to image and content sliders. Enjoy!

1. Animated Content Menu With JQuery

amconten%20menu.png

View Code/ Download

2. Creating a Facebook-like Registration Form with JQuery

fblikerg%20form.png

View Code/Download

3. How to Make Your Own Twitter Timeline

twittertimeline.png

View Code/Download

4. Beautiful Slide Out Navigation

slideout%20nav.png

View Code/Download

5. Shutter Effect with Canvas and jQuery

shutter%20effect.png

View Code/Download

6. Flicker Powered Slide Show

fpslide%20show.png

View Code/Download

7. How to make a Rotating Billboard System using JQuery and CSS

rbbsystem.png

View Code/Download

8. Fullscreen Gallery with Thumbnail Flip

gallery.png

View Code/Download

9. Website Tour with jQuery

webtour.png

View Code/Download

10. Ajax based Shopping Cart JQuery Plugin

shoppingc.png

View Code/Download

11. Speeding Up Google Analytics times with a JQuery Plugin

analytics.png

View Code/Download

12. Animated Page Scroll With JQuery

jqscroll.png

View Code/Download

13. Quick Feedback form with PHP and JQuery

Quick%20Feedback.png

View Code/Download

14. JQuery Cross Browser Right Click Vertical Menu

right%20click.png

View Code/Download

15. Sprite Up the Web

sprite%20up%20the%20web.png

View Code/Download

16. Simple Lava Lamp Menu Tutorial with jQuery

lavalamp%20menu%281%29.png

View Code/Download

17. Create a Realistic Hover Effect With jQuery

hoverreflect.png

View Code/Download

18. Fancy Thumbnail Hover Effect w/ jQuery

designb.png

View Code/Download

19. Facebook Style Footer Admin Panel Part 2

fbsap.png

View Code/Download

20. Create an amazing music player using mouse gestures & hotkeys in jQuery

mplayer.png

View Code/Download

New Wikidot Rating Module CSS Coding

Wondering how we changed our Wikidot rating module to this one below?…

rating: +2+x

To start off lets head over to your site manager to get this specific rating module to work properly. Click the "Page Ratings" link on the "Manage Site" side bar like so…

ratinginfo1.png

Next, scroll down to the default rating style selection table. Lets just start out with the _default category rating selections, but make sure all the categories that you have rating modules on is the same as the _default category for this to work right…

ratinginfo2.png

Make sure the "Type" is selected to "+ only"! As soon as we customize it for the "rate-down" class we will post another tutorial but for now please select "+ only" for this to work right…

ratinginfo3.png

Lastly here is the wonderful CSS override so we can get the style of it like this one. You may style your own but this is how we made our CSS code for it. Use this code as a template, also link back to this blog post if you are going to use it.

Here is the code…

/*
- Rating CSS override -- This is to be linked back to this post if used elsewhere 
- Coding by Matt Gentile - Creator of Icondeposit.com
- Thumbs up icon by visual-blast.com
*/
 
.page-rate-widget-box .rateup a {
    position: relative;
    background: transparent url(https://www.icondeposit.com/local--files/dev:wikidot-rating-module-design-pack/thumbs_up_22x22.png) 0 0 no-repeat !important ;
    width: 22px !important;
    height: 22px !important;
    color: transparent !important;
    border: none !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow:  none;
    top: -5px !important;
    text-shadow: none !important;
    left: -65px;
}
.page-rate-widget-box .rate-points { 
    position: relative;
    height: auto;
    padding: 5px 10px;
    font: bold 12px Arial, sans-serif;
    border-radius: none !important;
    border: none !important;
    color: #666 !important;
    margin: 0 5px;
    -webkit-box-shadow: none !important;
    background: none !important;
    text-shadow: none !important;
}
.page-rate-widget-box .rateup a:hover {
    background: transparent url(https://www.icondeposit.com/local--files/dev:wikidot-rating-module-design-pack/thumbs_up_22x22.png) 0 0 no-repeat !important;
    color: transparent !important;
    border: none !important;
    box-shadow:  none;
    cursor: pointer;
    content: none !important;
    border-radius: none !important;
}
.page-rate-widget-box .rateup a:active {
    position: relative;
    top: -4px !important;
    margin-left: 6px !important;
    background: transparent url(https://www.icondeposit.com/local--files/dev:wikidot-rating-module-design-pack/thumbs_up_22x22.png) 0 0 no-repeat !important;
    color: none !important;
    border: none !important;
    box-shadow:  none;
}
.page-rate-widget-box {
    position: relative;
    color: none !important;
    padding: 0px 10px;
    font-size: 1.1em;
    border-radius: none !important;
    border: none !important;
    background-color: transparent !important;
    text-shadow: none !important;
    width: 70px !important;
    overflow: hidden !important;
    text-align: right !important;
    border-bottom: 1px solid #cecece !important;
    text-align: center !important;
}
.page-rate-widget-box a {
    padding: 3px 10px;
    background-color: transparent !important;
    text-shadow: none !important;
    color: none;
}
#prw54353.number {
    color: #2191d1 !important;
    display: inline !important;
    font-size: 225%;
}
.page-rate-widget-box .rate-points {
    color: transparent !important;
    display: inline;
    overflow: hidden !important;
    text-align: right;
    left: -53px;
}

Pure CSS3 Flexbox Tutorial

To start off, we will be showing a tutorial/demonstration an easier and much different version of the CSS3 Flexbox by isotoma.com. This one also looks fantastic! But to be very clear, this will only work correctly if you have the latest google chrome browser or the latest version of the Apple Safari Browser, so make sure you are up to date with today's latest internet browsers before we continue this demonstration/tutorial. Browsers such as Internet Explorer, Mozilla Firefox, and sometimes Opera will mostly cause problems or wont display some important content while you are viewing the new website's of today, even on our website it is imperative that you are viewing this site in Google Chrome.

Ok, so now that we have that out of the way, we can start this tutorial. To use this type of flexbox, we would appreciate a link back to this page! This works on any website! We will begin with the HTML and or Wikidot syntax markup used below.

The HTML:

<div class="flexbox">
<div>
<p>Pure</p>
</div>
<div>
<p>CSS3</p>
</div>
<div>
<p>Flexbox</p>
</div>
<div>
<p>Try</p>
</div>
<div>
<p>It</p>
</div>
<div>
<p>Out!</p>
</div>
</div>

The class of this div is called "flexbox". The unique thing about this one is that it only needs one class! Make sure you copy and paste this entire code if you are using html. Later in this post we will show you how to style each div with the CSS3 styling.

Here's the Wikidot Syntax:

[[div class="flexbox"]]
[[div]]
Pure
[[/div]]
[[div]]
CSS3
[[/div]]
[[div]]
Flexbox
[[/div]]
[[div]]
Try
[[/div]]
[[div]]
It
[[/div]]
[[div]]
Out!
[[/div]]
[[/div]]

This is another unique code especially for Wikidot, you only style the extra div's with no classes using CSS coding.

This is the CSS3 coding that we used for this flexbox…

Copy and paste this code in the bottom of your CSS code:

/* Start The Icon Deposit Flexbox */
.flexbox {
/* This acts as the "box-container" you may style this as well */
    color: #585858 !important;
    width: auto;
    height: auto;
    font-size: 20px;
    border: none;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    display: -moz-box;
    -moz-box-orient: horizontal;
    display: box;
    box-orient: horizontal;
    margin: 0 auto;
    position: relative;
    padding: 3px 0 10px 10px;
    -webkit-box-flex: 200; /* Keep this */
    -moz-box-flex: 200; /* Keep this */
    box-flex: 200; /* Keep this */
    margin-left: 0;
    margin-right: 15px;
    text-shadow: 1px 1px 1px rgba(240,240,240,0.7);
 
/* flexbox setup */
    display: box;
    box-orient: horizontal;
    box-align: stretch;
}
 
/* This is the box styling before it is hovered over (normal state) */
.flexbox > div {
    -webkit-box-flex: 200; /* Keep this */
    -moz-box-flex: 200; /* Keep this */
    box-flex: 200; /* Keep this */
    box-align: stretch;
    -moz-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    -webkit-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
    -webkit-border-radius: 2px !important;
    -moz-border-radius: 2px !important
    border-radius: 2px !important;
    margin-left: 0px;
    padding: 10px 70px 10px 5px;
    margin-right: -5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.28);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.28);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.28);
    width: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
}
 
/* Box coloring (Each box starts left to right - colors for each box should go here */
/* You may also add or remove boxes for your own effects and styling */
.flexbox > div:nth-child(1){ background : #21c1d1; } /* <----1st box color */
.flexbox > div:nth-child(2){ background : #71db00; } /* <----2nd box color */
.flexbox > div:nth-child(3){ background : #fbdb15; } /* <----3rd box color */
.flexbox > div:nth-child(4){ background : #21c1d1; } /* <----4th box color */
.flexbox > div:nth-child(5){ background : #71db00; } /* <----5th box color */
.flexbox > div:nth-child(6){ background : #fbdb15; } /* <----6th box color */
 
/* This styles all of the boxes when you hover over them */
.flexbox > div:hover {
      width: 250px;
    box-shadow: 0 0 10px rgba(0,0,0,0.28);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.28);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.28);
}

In this CSS code the ".flexbox > div:nth-child(…){ background:" classes will be the color stlye for each box. Other than that, you may use our full CSS code above for a template to branch off of. The rest of this CSS3 code is laid out in simple format with information for each class within the code. So now your all set! Style Away…

Click Here to View Our Flexbox HTML Demo!

or

View the Live Wikidot Syntax Demo below:

Pure

CSS3

Flexbox

Try

It

Out!

If you are viewing these demo's in Internet Explorer, Mozilla Firefox, or Opera, you will see that this clearly does not work correctly! That's why we said earlier in this post to switch to Google Chrome or Apple Safari to view the Pure CSS3 Flexbox.
2015-09-10_1852.png

About Us:

Here at the Icon Deposit, we give you the opportunity to post your icons, designs, code, and screenshots to promote your work and gain new clients. We feature Hundreds of Free PSD's, Icons, Icon Sets, UI/UX design, Illustrator/Vector graphics, CSS, CSS3, JQuery, Photoshop tutorials and tons more.

Popular Tutorials:

Copyright © 2011-2015 Icon Deposit - All rights Reserved