The Icon Deposit Blog

Site Release

As of late last night we finally released the Icon Deposit. So far we have quite a few Icon sets and a couple tutorials, so be sure to check them out! In this blog post we will give out a Free background set exclusively for our site members, so if you are not a member already then we welcome you to join our site here!. Make sure you check out our new Welcome Page as well!

slantedlinespromo.jpeg

If you cannot see a Download link below this text then Join our Site to get the download link!

We are not fully complete with this site's features, so for now only the basic features were realeased. We will be adding features where you can sell your designs on our site and tons more so stay tuned in to our blog and Follow us on Twitter to find out the latest features and Designs.

We are always up to date with the latest website graphics, designs, and icons. Soon we will be posting and releasing tons of designs, part of them exclusively for Icondeposit.com members and tons of them for the public!

Don't be afraid to leave a comment on our blog posts and designs.

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.

Icon Deposit Wikidot Editor Buttons

This is the latest Wikidot Editor button set only available at Icondeposit.com! This brand new set of Wikidot Editor buttons is the total package for your Wikidot site or website. This set comes with a custom designed CSS code as well as a download set of the icons. If you do not wish to download them and wish to host them off of Icondeposit.com, then copy and paste the FULL code below directly at the bottom of your wikidot CSS stylesheet.

IDWDButtons.png
Copy and Paste the code below into the bottom of your CSS stylesheet to start using this button set…
/**************************************** Designed by MDesign
 -- Re-sale or re-distribution is prohibited.
 -- You may not re-distribute these Wikidot editor buttons for download
 -- Only Wikidot members or Icondeposit.com members can re-create or edit these buttons.
 -- These icons are to be linked back to this page if used elsewhere...
(http://www.icondeposit.com/blog:new-wikidot-editor-buttons)
 -- This wikidot icon set (images as well as CSS3 coding) is licensed under the Creative Commons Attribution Share-Alike 3.0 License -- to view the full license terms and conditions please go to this link... 
http://creativecommons.org/licenses/by-sa/3.0/ 
****************************************/
/* Begin Wikidot Editor Buttons Designed and Created by Matt Gentile (MDesign) 
- Icondeposit.com 2011 */
 
.wd-editor-toolbar-panel a {background-image: url(https://icondeposit.wdfiles.com/local--files/dev%3Anew-wikidot-editor-button-set/wdebttnss.png); border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border: 1px solid #cecece;-webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; transition: all 300ms linear;}.wd-editor-toolbar-panel a:hover {-webkit-transform: scale(1.0) rotate(0deg) !important; -moz-transform: scale(1.0) rotate(0deg) !important; background-image: url(https://icondeposit.wdfiles.com/local--files/dev%3Anew-wikidot-editor-button-set/wdebttnsshover.png); border: 1px solid #2191d1; -webkit-box-shadow: 0 0 4px #2191d1; -moz-box-shadow: 0 0 4px #2191d1; box-shadow: 0 0 4px #2191d1;}.wd-editor-toolbar-panel a:active {background-image: url(https://icondeposit.wdfiles.com/local--files/dev%3Anew-wikidot-editor-button-set/wdebttnssselect.png);}

For a Live preview, look at the comment box at the bottom of the page, then hover over and select the buttons to view it's full features.

"Simple & Social" Icon Set Release

1%20-%20promo.jpg

Download Our official Icon Set Here!



This icon set was created and designed by Matt Gentile (creator of Icondeposit.com) - Contact me here. This specific icon set "Simple and Social" is free for commerical use and licensed under a Creative Commons Attribution Share-Alike 3.0 License.

It would be appreciated if I can get a link back to this page as full credit for this icon set's design if you are using my design.

- This is only my promotional icon set. So it's Free!

- For more info about this icon set's CC License visit… http://creativecommons.org/licenses/by-sa/3.0/

Welcome To Our Blog

Welcome to the IconDeposit's Blog! I (Matt Gentile) am the creator of IconDeposit.com and will be blogging about Everything from designs, inspirations, and artwork to complete tutorials about CSS, CSS3, JQuery, HTML, Javascript, cool trick's with Wikidot's Syntax and much more!

We will be featuring this icon set created and designed by myself as one of our main icon sets, This specific Icon set will be available for free and commercial use some time at the end of the week…

1%20-%20promo.jpg

Lets also have another look at the new home page that features a pure CSS3 Animation, and I will be creating tutorials for this and more wonderful CSS3 Animations…Check it out!

Since this site is not ready yet, this blog post will end here with a fantastic example of some more CSS3 Animations, with a tutorial! It is a site that one of our developers(bcammo) created that features CSS3 tutorials and more! Animated page entry with CSS3

page 4 of 4« previous1234
Copyright © 2011-2015 Icon Deposit - All rights Reserved