- This topic is empty.
-
AuthorPosts
-
May 14, 2013 at 8:47 pm #44782
creativembers
MemberSo I signed up for Codepen today to start trying out a few things and I was working on a goofy button with lots of css3 which looks cool in Codepen (FF/Chrome) but when I grab the source html and css (I didn’t use any scripts,) it breaks in both FF and Chrome. In Firefox border-radius on the span is getting dropped and in both browsers the background image isn’t showing.
There is a strong possibility my CSS is not perfect but my issue is the difference between the Codepen preview and the real page. Embedding looks fine?
Here is my sample page with the local files trying to render the button on top and the embedded Codepen sample on bottom.
May 14, 2013 at 8:56 pm #135101Senff
ParticipantOn your test page, both buttons look the same to me (Chrome on Mac).
May 14, 2013 at 9:12 pm #135102MemberEdit: I deleted everything re-uploaded refreshed all cleared all caches and suddenly it works. Right, I feel dumb now. Going for more coffee, thank you and sorry!
May 14, 2013 at 9:31 pm #135104ElijahFowler
ParticipantGotta love those moments. ;)
I was looking at it before you found the issue, I wanted to let you know that for me the linear gradients were not showing up (I have the latest FF and Chrome) because you only had the outdated, prefixed, versions of the gradients. I cleaned up your CSS and added all the linear gradients you could use (personally I only use the newer -webkit- and unprefixed linear gradients) with [this](http://www.visualcsstools.com/ “http://www.visualcsstools.com/”) neat online tool that I’ve found has the most functionality (I’ve worked with a lot of them, this one is the best so far). Here’s the updated CSS is you want to play with it, note that I also included inline SVG for IE9 and a data URI for IE8 (inside a media-query css hack…):
@import url(//fonts.googleapis.com/css?family=Oleo+Script+Swash+Caps);
div {
margin-top: 60px;
text-align: center;
}
a:link,
a:visited {
text-decoration: none;
color: #FFF;
border: none;
}
a img {
border: none;
}
.button {
display: inline-block;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
-webkit-box-shadow: 0 8px 0 #821433, 0 15px 20px rgba(0, 0, 0, .5);
-moz-box-shadow: 0 8px 0 #821433, 0 15px 20px rgba(0, 0, 0, .5);
box-shadow: 0 8px 0 #821433, 0 15px 20px rgba(0, 0, 0, .5);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.button span {
display: inline-block;
padding: 16px 38px;
font: 32px/1 'Oleo Script Swash Caps', sans;
text-shadow: 0 -1px 1px rgba(19, 65, 88, .8);
/* Inline SVG for IE9 */
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjRjA1NTcwIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjQkMxRTQ5Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=),
url(//www.creativembers.com/testimages/roughcloth3.png) repeat scroll 0 0 #F05570;
/* Chrome, Safari 4+ */
background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #F05570), color-stop(100%, #BC1E49)),
url(//www.creativembers.com/testimages/roughcloth3.png) repeat scroll 0 0 #F05570;
/* Chrome 10+, Safari 5.1+ */
background: -webkit-linear-gradient(top, #F05570 0%, #BC1E49 100%),
url(//www.creativembers.com/testimages/roughcloth3.png) repeat scroll 0 0 #F05570;
/* FF 3.6+ */
background: -moz-linear-gradient(top, #F05570 0%, #BC1E49 100%),
url(//www.creativembers.com/testimages/roughcloth3.png) repeat scroll 0 0 #F05570;
/* Chrome 26+, FF 16+, Opera, IE10 */
background: linear-gradient(to bottom, #F05570 0%, #BC1E49 100%),
url(//www.creativembers.com/testimages/roughcloth3.png) repeat scroll 0 0 #F05570;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .10);
-moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .10);
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .10);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
@media screen {
.button span {
/* Data URI for IE8 */
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA+CAYAAAA8nKuUAAABo0lEQVRYR8WY+UoCYRTFv/skRoQVIUVICxEtRGhmM5oVZbTQvlhPaFgihRRRSAstVBKFFD3CdM9A9Ab3jMj35887nnPm3JGf3GEgTlygH8tTAA4C50ScMz2/sweBOVSHFIAd4ZKvTIEE9gv619oKK+Q1vD2Oqhvevv4Ae1nLZ3qXMzHAestV3/o1POUjtQNlmULBC8GGg/7P+J7c5iQXwBQf1xObHFXXE1scH7+NbyA9zGUtrwATZC0vY+scHwOMCiLaBkzP59E1jo8BNs9LPI+fRlY5qn4cBtj+koehFc7EABMKiJP7wWXNant5hWBK57obWOIk1y3AhLCWm/5F5KXxxqZ7KcCEh5OTWl+eo+pab56TXNc9C5yJAab4+Co+z/ExwKbN46/pXHbPaQMxrj3KE4ApPr7omuV0LoDt+4euEOedMzwwRdXV2DRnW6zGcpzkOuvIcnwMMKGAODltz3CyGmBKclXafM7zuNLqc976lKNTHB+Xox7Hxyctac62eAwwQdZSap7k+BhgyrvMo6YUp4EATNkWi5EkR9XFyASlV/8CUoPNUWgoFUAAAAAASUVORK5CYII=),
url(//www.creativembers.com/testimages/roughcloth3.png) repeat scroll 0 0 #F05570;
}
}
.button:active {
-webkit-transition: -webkit-transform 0s ease-in-out;
-moz-transition: -moz-transform 0s ease-in-out;
transition: transform 0s ease-in-out;
-webkit-box-shadow: 0 8px 0 #823a17, 0 12px 10px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 8px 0 #823a17, 0 12px 10px rgba(0, 0, 0, .4);
box-shadow: 0 8px 0 #823a17, 0 12px 10px rgba(0, 0, 0, .4);
}
.button:active span {
-webkit-transition: -webkit-transform 0s ease-in-out;
-moz-transition: -moz-transform 0s ease-in-out;
transition: transform 0s ease-in-out;
-webkit-transform: translate(0, 4px);
-moz-transform: translate(0, 4px);
transform: translate(0, 4px);
}Have a good one,
-Elijah
May 14, 2013 at 9:59 pm #135108MemberThank you so much! I was just going through some lessons that were turned out to be a little outdated so this is super helpful.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.