-->
Showing posts with label Graphics. Show all posts
Showing posts with label Graphics. Show all posts

Sunday, May 1, 2016

Manyvids Link Icon


HTML Code:
<a href="Your_Manyvids_url_goes_here" target="_self"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuzaLhdfSHUnLOiHe8g50yW8RJgpWDW9yV88q7vmnvauMXS_w5jE-ltU6Xg29w3RT4EFqTVMozT9izc0bPRgLsCcM_48r0aJBpAdgrS2kSWiOIoGkVJwr-AI1NdMk1ARAZiO7W49OsENE/s1600/manyvids.png" border="0" /></a>

Wednesday, April 29, 2015

Fade and Slide in Effect for Avatars

This effect was inspired from Wild4KittenTK 

Want your avatar to slide in upon your profile page loading like this...?




well here's how you do it...

Monday, April 20, 2015

Custom Border Colors for MFC Galleries

For anyone who wants borders that change color on hover like this...

http://www.amazon.com/
Here's a few different colors to choose from, just copy n' paste the code for the one that you want in your custom css, that's it!
 

Pink
.photo_gallery_image {
  width:70px;
  height:70px;
  border:6px solid #000;
  border-radius:8px;
  borderradius:8px;
  -moz-border-radius:8px;
  -moz-border-radius:8px;
  margin:0 10px 4px -6px;
  -webkit-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
}

.photo_gallery_image:hover {
  border:6px solid #FF0066;
  -webkit-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
}


Red
.photo_gallery_image {
  width:70px;
  height:70px;
  border:6px solid #000;
  border-radius:8px;
  borderradius:8px;
  -moz-border-radius:8px;
  -moz-border-radius:8px;
  margin:0 10px 4px -6px;
  -webkit-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
}

.photo_gallery_image:hover {
  border:6px solid #FF0000;
  -webkit-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
}


Light Blue
.photo_gallery_image {
  width:70px;
  height:70px;
  border:6px solid #000;
  border-radius:8px;
  borderradius:8px;
  -moz-border-radius:8px;
  -moz-border-radius:8px;
  margin:0 10px 4px -6px;
  -webkit-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
}

.photo_gallery_image:hover {
  border:6px solid #00FFFF;
  -webkit-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
}


Dark Blue
.photo_gallery_image {
  width:70px;
  height:70px;
  border:6px solid #000;
  border-radius:8px;
  borderradius:8px;
  -moz-border-radius:8px;
  -moz-border-radius:8px;
  margin:0 10px 4px -6px;
  -webkit-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
}

.photo_gallery_image:hover {
  border:6px solid #0000FF;
  -webkit-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
}


Green
.photo_gallery_image {
  width:70px;
  height:70px;
  border:6px solid #000;
  border-radius:8px;
  borderradius:8px;
  -moz-border-radius:8px;
  -moz-border-radius:8px;
  margin:0 10px 4px -6px;
  -webkit-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
}

.photo_gallery_image:hover {
  border:6px solid #00FF00
;
  -webkit-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
}


Yellow
.photo_gallery_image {
  width:70px;
  height:70px;
  border:6px solid #000;
  border-radius:8px;
  borderradius:8px;
  -moz-border-radius:8px;
  -moz-border-radius:8px;
  margin:0 10px 4px -6px;
  -webkit-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
}

.photo_gallery_image:hover {
  border:6px solid #FFFF00;
  -webkit-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
}


Wednesday, February 4, 2015

NEW Amazon & Twitter Graphics to Choose From

Lots of girls seem to love the Amazon & Twitter graphics that highlight when you hover the cursor over them. 



http://www.amazon.com/ https://twitter.com/




So I thought I'd make them in a few different colors to choose from.

Edit the bold red text before pasting this HTML code in the about me section on the edit profile page.

<div class="link-amazon">
<a href="Your wishlist url" target="_blank">Amazon Wishlist</a>
</div>
<div class="link-twitter">
<a href="http://twitter.com/Your_Twitter_user_name" target="_blank">Twitter</a>
</div>






CSS Code:



CSS Code:



CSS Code:



CSS Code:









CSS Code:



CSS Code:



CSS Code:



CSS Code:


Sunday, October 12, 2014

Editing Halloween Profile (part 2)

Floating Ghosts:


For those of you who don't want to use the entire FREE Halloween profile layout I made, but would still like to use the floating ghosts, just ad the code below to your custom css section. (Click on any of the URLs to see what image they represent. Feel free to delete one or two of them from the code if the original is a bit too flashy for you.)

 .profile_section_content {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjurlfBkEkEzP82eJdWp5viZA30xwgcaw3Y5V-anzwY-lLFmQRuGsm-xW54dSBr41_L1lazEO9hpQU7cBLT39WtCU7MN2KgjNCCYylDb_K4p8MJxl3dgClYq5fz1hZbdsrtmMOiy6MUXvI/s1600/ghost1.png),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFaHSXg7cXTnauEWJgcu_v65aAA8yWVyuNj4PwMu9osGWGZD4jhuo9d6CpPpCr5DFNhSpt6uVMausLtDdTq4P_FDgAJ6WtrokUBKXGJt0vi2Be5-kfKNwDK1oWw7ZcDfbGNeRwpz7WFxE/s1600/ghost2.png),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiacwef3GHbEKjkFSVeV61Q3cNUAjKKHU3mPVUgkdrS4VWlCrTZ6KdF7p61Mp2PIAy4qeTSmVCkO4Oni_WGItPql9rPVO01prrrxTxSWco3atbLXqqydsinaxIuAC840Y4CmeVjip300A4/s1600/ghost3.png);
  -webkit-animation:ghosts 20s linear infinite;
  -moz-animation:ghosts 20s linear infinite;
  -ms-animation:ghosts 20s linear infinite;
  animation:ghosts 20s linear infinite;
 }


@keyframes ghosts {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
  }
}

@-moz-keyframes ghosts {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
  }
}

@-webkit-keyframes ghosts {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
 
  50% {
    background-color:rgba(0,0,0,0.7);
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
    background-color:rgba(0,0,0,0.8);
  }
}

@-ms-keyframes ghosts {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
  }
}


Editing Halloween Profile (part 1)

Editing the Skype Raffle Ad:





















All you have to do to add details to the image provided in the FREE Halloween profile is go to this link, then click on the "From URL" tab, paste https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGDhevFe9OvFXCITrtYsHWny3in4JoWdufypBMDxAz0bj31tO-ek3JTWpy9l6fFGiGiog948vFSFzSDNOOnWyheAlJbtM46ZnGUD-NCOxuR2Ky54gPt1V0Y0iwRMGQOfFSqEdhdiWDp80/s1600/skyperaffel.png and hit "Upload".



From there you can add whatever text you like, save it to your computer, upload it to whatever image hosting site you use, and replace the old image url with your new one in the html code.



Click here if you would rather use a completely blank image to work with.

And for those of you who don't want to use the whole Halloween profile, but would still like to use the Skype raffle ad, here's the codes:

CSS:

div.skype-ad,div.hof-ad {
  width:400px;
  margin:50px 0;
  position:absolute;
  top:5px;
  left:350px;
  z-index:10;
}

div.skype-ad img,div.hof-ad img {
  width:50%;
  max-width:2000px;
}

div.skype-ad img:hover,div.hof-ad img:hover {
  width:110%;
}

img {
  -webkit-transition:all 1s ease;
  -moz-transition:all 1s ease;
  -o-transition:all 1s ease;
  transition:all 1s ease;
  -moz-transform:rotate(-0deg);
  -webkit-transform:rotate(-0deg);
}

.container img:hover {
  -moz-transform:rotate(2deg);
  -webkit-transform:rotate(2deg);
}

.container a.desc-img img {
  -moz-transform:rotate(-1deg);
  -webkit-transform:rotate(-1deg);
}



HTML (About Me section):

<div class="skype-ad nohide"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifDl630jgLm05KuH-zgqtxGw3R-6bAvE9qXjcGDcyMTPRPOYKUrqMt6hqxjXjBd5QQYHOvjzmgcZQTXJ8coAyDmEFJj7ZF5GdzyEZq4h7qvCb6O-ElTLRCrPaJiz5TlNqEN9LwXftyavg/s1600/skype+raffel.png" alt=""></div>

Thursday, June 5, 2014

Make Icons Glow Neon Pink on C4S



Another image/link effect I put together to add to your clips4sale store.


Amazon, Twitter, and Tumblr clickable icons that highlight neon pink when you scroll over them with your mouse,


http://www.amazon.com/ https://twitter.com/ http://tumblr.com/



Paste the HTML code where ever on your page that you want it to show up. (Change the highlighted links to your specific URL)


HTML Code:

<div style="text-align: center;">

<a href="http://www.amazon.com/" target="_blank"><img alt="http://www.amazon.com/" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBoYYKxqSA8V3sWuCrDVYfG3IVhmukPyZhWW-eIAr1HehnkNslYLVWu0fahvPIwwZlWaVZ_rrXdRg4DELKX6NW8Ia_iRqUst26sQLSMLV0qx9ycooSVWJjsP4fzFe4NApM9SGoKR96EhE/s1600/amazon-logo-8.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBoYYKxqSA8V3sWuCrDVYfG3IVhmukPyZhWW-eIAr1HehnkNslYLVWu0fahvPIwwZlWaVZ_rrXdRg4DELKX6NW8Ia_iRqUst26sQLSMLV0qx9ycooSVWJjsP4fzFe4NApM9SGoKR96EhE/s1600/amazon-logo-8.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpcS_cLH7Nk4xcSQFOw_Ef1fRTBBzttToZhrRy6PNYZdUoKJJtfuQclx2hkuob55o7s1EtLTA2n003-zi0Eag3XEWwE23fht6T2N7mGeWDGyDs0eLNXCc6QaJmHH8FR-xCoWdmBugWd3s/s1600/amazonpink.png'" /></a>

<a href="https://twitter.com/" target="_blank"><img alt="https://twitter.com/" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI0GI_77HnkMLhSv-Wu5uuOoiFSNk0USUH8D48ArHMatvdEpBffewLqgSSuQuRVglVgGkbe5mvJiUewZ4KuiwB8rIoBHbg1K9kFcxS6beWh1YyFtAi3Gx0mvDDrvht1_2KIqt2nRKVkpQ/s1600/twitter+(1).png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI0GI_77HnkMLhSv-Wu5uuOoiFSNk0USUH8D48ArHMatvdEpBffewLqgSSuQuRVglVgGkbe5mvJiUewZ4KuiwB8rIoBHbg1K9kFcxS6beWh1YyFtAi3Gx0mvDDrvht1_2KIqt2nRKVkpQ/s1600/twitter+(1).png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaXiLJlVy4SyaYrk_8dExeC081AW2X7IGFMU1qaSsil9Kc6W7UnQbhwQ_7GjzM4Gw44EsOnKFwePwR5yYyGxAWTue413PUECGEyLZh2I74f-CzQ7s5po-0MumN0IcT_05JFnwWllnA0WU/s1600/68058JC81HF8L.png'" /></a>

<a href="http://tumblr.com/" target="_blank"><img alt="http://tumblr.com/" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFgEgyzR5Vdjr3-8Epky0o_0in5CR4artqo3-pLWCDRaJsZ5Awi-IEu81XA7q_IWBDxgdsdOktd6UpOOblPldXie6E7KoP2_uIe8WDZN8y7Ox_JQm-bJLeXJzSsz-Ep5Vwa40GI1zvLk0/s1600/tumblr.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFgEgyzR5Vdjr3-8Epky0o_0in5CR4artqo3-pLWCDRaJsZ5Awi-IEu81XA7q_IWBDxgdsdOktd6UpOOblPldXie6E7KoP2_uIe8WDZN8y7Ox_JQm-bJLeXJzSsz-Ep5Vwa40GI1zvLk0/s1600/tumblr.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7gHsL5RjTtxSJtsFqolx4DDNXOYHhc_zyP0NNPX7yQ1zP0uqHbC2YQ-PgWZeScpTY6L9sODdlB2P-0ofBzxjYyFy1REBx3vXzlaO12FbwaxC7_atiT8T0VwHCA88aGHTHuKZmMsUYcG8/s1600/tumblrpink.png'" /></a> </div>

Monday, March 24, 2014

Make a Sparkling Movie Poster Marque for Your Video Ads



To make a graphic like this for your video ads, first make sure the image you have made is 366 x 508px or smaller.

You can create really cool text for your images on the sites listed in the right side bar.



Save this image to your computer by right clicking on it, and choosing "Save image as":



Then upload the image you want in the frame to Online Image Editor


Select the "wizards" tab and click on ""Overlay image" and upload the marque frame.


Then select the "Basics" tab and crop your picture.


Go back to "Overlay image" to add your custom text or any thing else you may want to add, or you can just use the "Add Text" tool.



Save your picture to your computer, then go to Glitterboo to add sparkle effects.







Remember to select "Resize" before downloading.






Photo Effects & Editing for Dummies Websites

Here's some really cool websites that you can upload your photos to, and their site will do all of the work for you, for FREE!!!

LoonaPix


Photo effect - Kiss  Photo effect - Wanted 2  Photo effect - Canvas

     

FunPhotoBox



Gif Animation Photofunia Movie  Gif Animation Photofunia  Photo Pic Joke



Funny.Pho



Old Photo Book  Playboy  3D Filmstrip