I know how to make coda bottle style in yola

  • 3
  • Idea
  • Updated 8 years ago
I know how to make coda bottle style in yola

just copy & paste the code

<!--

<!DOCTYPE HTML>
<html>
<head>
<title>Coda Effect</title>
<style type="text/css">
body{
background:#D6D3C9;
color:#383835;
font-family:Arial, Arial, Helvetica, sans-serif;
}

#bubblemenu li {
display: inline;
margin-left: 15px;
cursor:pointer;
}

#bubblemenu li > div {
width: 150px;
min-height: 100px;
position: absolute;
display: inline;
margin-left: -120px;
padding: 5px;
visibility:hidden;
opacity: 0;
margin-top: -125px;
background: #ffffff;
font-size:1em;

/* Setting the border-radius property for all Browsers */
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari and Chrome */
border-radius: 5px; /* Browsers that Support it like Opera */

/* Setting the box-shadow property for all Browsers */
-moz-box-shadow: 0 0 8px gray; /* Firefox */
-webkit-box-shadow: 0 0 8px gray; /* Safari and Chrome */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=3); /* IE */
box-shadow: 0 0 8px gray; /* Browsers that Support it like Opera */

/* Setting the transition property for all Browsers */
-moz-transition: all 0.5s ease-in-out; /* Firefox */
-webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.5s ease-in-out; /* Opera */
transition: all 0.5s ease-in-out; /* Browsers that Support it */

}

#bubblemenu li:hover > div {

visibility:visible;
opacity: 1;
margin-top: -150px;

/* Setting the transition property for all Browsers */
-moz-transition: all 0.5s ease-in-out; /* Firefox */
-webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.5s ease-in-out; /* Opera */
transition: all 0.5s ease-in-out; /* Browsers that Support it */
}
</style>
</head>
<body>
<h1>Coda Effect With CSS3</h1>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<ul id="bubblemenu">
<li>
Penn Jillett
<div>
My favorite thing about the Internet is that you get to go into the private world of real creeps without having to smell them.
</div>
</li>
<li>
Thomas Watson
<div>
I think there is a world market for maybe five computers.
</div>
</li>
<li>
Bill Gates
<div>
640K ought to be enough for anybody.
</div>
</li>
<li>
Sam Ewing
<div>
Computers are like bikinis. They save people a lot of guesswork.
</div>
</li>
</ul>
</body>
</html>

-->

REMEMBER DON"T COPY <!--AND-->
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
  • happy

Posted 8 years ago

  • 3
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
nice!
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
thanks
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Hey Adil,

Awesome work! Very creative.

Thanks for posting. I have it bookmarked.

John M
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
thanks
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Adil, do you have a test page so we can see what it looks like?

Thanks,
Nathan
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
not created yet
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
That is so cool Adil!!! It looks so nice!!! Great job! :)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi everyone! I created an example page for this here: CSS3 Coda Effect Example
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
Yeah this is what i mean
Photo of papa

papa

  • 327 Posts
  • 20 Reply Likes
here's another variation that you can the last example you can hyperlink to a different site with also

http://anchorsite.yolasite.com/inform...#

papa
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi papa! I didn't even see this reply! Sorry! :) This is awesome! Thanks for sharing!
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello Adil,

Looks really cool, thanks for sharing!

@Nathan: Thanks for providing the example :)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Your welcome! :)