-->
Showing posts with label CSS & HTML. Show all posts
Showing posts with label CSS & HTML. Show all posts

Thursday, May 14, 2015

CSS Maker

I just wanted to recommend an awesome tool to help you customize your css codes.
It's called CSS 3.0 Maker and it has tools to let you modify colors, borders and radius, text and box shadows, transitions, animations, and more.








I use it all of the time when editing profiles.




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 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>

Saturday, October 11, 2014

FREE Halloween Theme MFC Profile

So I made another MFC Profile layout. It's a Halloween theme. I'm going to post it on my blog for anyone who wants it to use. It's my FREE Halloween gift to all you wonderful women.

Anyways, I'm pretty much done with it, except I wanted to add some pictures of camgirls in Halloween costumes to give it the finishing touch. So I thought it would be fun to use pictures from some of you.

You can take a look at it hereif you want me to use your costume pic, I'll make sure to add your cam model name with it, so everyone knows who you are, and how to find you online.


If you would like to edit any of the images yourself, you can download them here.
Below are the css and html codes.

Sunday, April 6, 2014

FREE MFC Profile: Neon Pink

Just finished making this, and I'm too burned out to write the tutorial on how to edit it right now. But those of you who know a little about css and html can figure it out I'm sure. So I'm gonna go a head and post the codes for it now. And anyone who wants to, can play around with it until I write the tutorial.

Here's some screen shots of it:










Thursday, March 13, 2014

Cool New Navigation Bar

Here's a screen cap of what it looks like:


Here's an example of the navigation images normal:


Here's what it looks like when you hover over them:

To get the code click here.

Monday, February 17, 2014

Neon Text Effect

If you have a profile with a dark background you may want to try out using this Neon effect for some of your text.



Add this code to advance the css section:

.neontext {
  font-size:17px;
  color:#fff;
  text-shadow:0 0 1px rgb(255,255,255),0 0 2px rgb(255,255,255),0 0 4px rgb(255,255,255),0 0 8px rgb(255,45,149),0 0 16px rgb(255,45,149),0 0 32px rgb(255,45,149),0 0 40px rgb(255,45,149),0 0 50px rgb(255,45,149);
  font-wight:bold;
}


Then add whatever text you want in the Edit Profile section in between these two brackets:

<span class="neontext"> Your text goes here </span>





Friday, January 31, 2014

Answers to FAQs Section

I just made a new FAQs section with cute little effects.
Here's some screen shots:



To see it in action click here.

You can make your own images and adjust the codes to fit your profile if you'd like.

Here's the HTML code:

<div id="casinorules"></div>

<div id="faqs"><div id="analq"></div><div id="phoneq"></div><div id="squirtq"></div></div></a></div>
<a><div id="faqs1"><div id="fistq"></div><div id="pokerq"></div><div id="favsq"></div></div></a></div>


Here's the CSS code:

#casinorules {
  display:block;
  position:relative;
  margin-left:-50px;
  height:84px;
  width:1110px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNV3nLhzH9HFaxquvsnEkoGqelWinOlnc5f09X1c5ss39HRCpABD5gpI60JrLAXOQaJZGRFRmdMBWDliPW5v2C-7zUa-HBMTAAOVW0QLApvPiVSpqqprG-m_uWu-c5dCihj0RFNLl_p7Xg/s1600/LPr3l0UBslft.png) no-repeat top;
  overflow:hidden;
}


#faqs {
  display:inline-block;
  width:950px;
  height:170px;
  overflow:hidden;
  margin-left:30px;
  border-bottom:0 solid #000;
  -webkit-box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
  -moz-box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
  box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
}

#analq {
  width:308px;
  height:176px;
  float:left;
  display:block;
  background:transparent url(http://i.minus.com/iLHCZGY6rQ1A0.jpg) center top no-repeat;
}

#analq:hover {
  background-image:url(http://i.minus.com/ibaMlqI3jx0Zq5.jpg);
}

#phoneq {
  width:308px;
  height:176px;
  float:left;
  display:block;
  background:transparent url(http://i.minus.com/ibNqPWWSzX2MF.jpg) center top no-repeat;
}

#phoneq:hover {
  background-image:url(http://i.minus.com/ib1p0meJIPqYaJ.jpg);
}

#squirtq {
  width:308px;
  height:176px;
  float:left;
  display:block;
  background:transparent url(http://i.minus.com/iXQUIx7pp0D6D.jpg) center top no-repeat;
}

#squirtq:hover {
  background-image:url(http://i.minus.com/ir3q4j0t4DBQB.jpg);
}

#faqs1 {
  display:inline-block;
  width:950px;
  height:170px;
  overflow:hidden;
  margin-left:30px;
  border-bottom:0 solid #000;
  -webkit-box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
  -moz-box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
  box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
}

#fistq {
  width:308px;
  height:176px;
  float:left;
  display:block;
  background:transparent url(http://i.minus.com/im7MhKv5J9lzQ.jpg) center top no-repeat;
}

#fistq:hover {
  background-image:url(http://i.minus.com/ibp193FjAEuxmV.jpg);
}

#pokerq {
  width:308px;
  height:176px;
  float:left;
  display:block;
  background:transparent url(http://i.minus.com/i18qIzAKBvRTy.jpg) center top no-repeat;
}

#pokerq:hover {
  background-image:url(http://i.minus.com/iJiuRriyRen2e.jpg);
}

#favsq {
  width:308px;
  height:176px;
  float:left;
  display:block;
  background:transparent url(http://i.minus.com/iSaSDIi82bQ8e.jpg) center top no-repeat;
}

#favsq:hover {
  background-image:url(http://i.minus.com/iCNVB8kO58GM6.jpg);
}

Friday, December 13, 2013

Amazon, Instagram, & Twitter Twirling Transition Effect

If you would just like to use the amazon, instagram, and twitter link effects that are in the last post, but not the whole profile layout; here's where you can find the code...

https://gist.github.com/anonymous/7956163


See it in action here:
http://codepen.io/pokerbabe69mfc/full/zbHxu



Wednesday, October 9, 2013