Keeping inline text in place - html

I have been making a button which (hopefully) looks fairly realistic. One part of this is having the text move down 1px inside the button when it is pressed. I've done this by adding an additional pixel to the top and removing one from the bottom.
Unfortunately, I've designed my button to work inline (inline-block) and when the button is "pushed" it means any text on the line also gets pushed down. Now I think I know why (presumably due to the baseline of the text) but I wonder if anyone knows how I can get the same "pushed" effect whilst keeping surrounding text in place. I would like to avoid floats if possible.
Anyway on with the code:
http://gard.me/xsfqH
HTML:
<a class="button noIcon smaller" href="#">Buy Now</a> hello world
CSS:
a.button {
margin: 20px;
display: inline-block;
padding: 12px 12px 12px 12px;
background: none;
background-repeat: no-repeat;
background-position: 9px 5px;
background-position: 9px 5px, 0 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-width: 1px;
border-style: solid;
font-family: Verdana, Arial, Sans-Serif;
text-decoration: none;
}
a.button:active {
padding-top: 13px; padding-bottom: 11px;
-webkit-box-shadow: inset 0px 1px 6px -1px #000000;
-moz-box-shadow: inset 0px 1px 6px -1px #000000;
box-shadow: inset 0px 1px 6px -1px #000000;
}
a.button.noIcon {
color: #FFECEA;
background-position: 0 0;
background-color: #E46553;
background-image: -o-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: -moz-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: -webkit-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: -ms-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #D15039), color-stop(1, #F27466));
border-color: #A03E33;
}

since it's inline-block you can use vertical-align.
so all you have to do is
a.button:active {
padding-top: 13px;padding-top:11px;
-webkit-box-shadow: inset 0px 1px 6px -1px #000000;
-moz-box-shadow: inset 0px 1px 6px -1px #000000;
box-shadow: inset 0px 1px 6px -1px #000000;
vertical-align:1px;
}
and problem solved

Related

Is it possible to perfectly replicate this in css3?

The div: sidebar-top at http://alex.piechowski.org/school/...
CSS:
.sidebar-top {
float: left;
height: 32px;
width: 292px;
background: url(../images/sidebar_top.png) no-repeat;
padding: 4px 15px;
}
Note, it's an image. Is it possible without that image?
You can achieve a fairly similar effect with these rules:
border-top-right-radius: 12px;
border-top-left-radius: 12px;
border: 1px solid #ccc;
width: 290px;
background: -webkit-linear-gradient(top, white 0%,#ddd 100%);
background: linear-gradient(to bottom, white 0%,#ddd 100%);
I think this DEMO is what you need
.sidebar-top {
background: #ccc;
border: 1px solid rgba(0,0,0,0.5);
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
box-shadow: inset 0 -20px 40px #aaa, inset 0 20px 40px #fff, 0 2px 6px rgba(0,0,0,0.5);
-o-box-shadow: inset 0 -20px 40px #aaa, inset 0 20px 40px #fff, 0 2px 6px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 -20px 40px #aaa, inset 0 20px 40px #fff, 0 2px 6px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 -20px 40px #aaa, inset 0 20px 40px #fff, 0 2px 6px rgba(0,0,0,0.5);
padding: 0px 20px 15px 10px;
width: 500px;
}
h2 {
text-align: center;
font-family: "Helvetica Neue", sans-serif;
color: #444;
text-shadow: 0 1px 1px #fff;
font-size: 14px;
margin: -0 -20px 10px -10px;
padding: 5px 15px;
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
background: rgba(0,0,0,0.2);
border-bottom: 2px groove rgba(255,255,255,0.75);
box-shadow: inset 0 1px 1px rgba(255,255,255,0.5);
-o-box-shadow: inset 0 1px 1px rgba(255,255,255,0.5);
-webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.5);
-moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.5);
}
Absolutely.
you'll need to set a background-color then you can do a border to get the 1px border and border-radius that just encompasses the top corners, sort of like this:
background-color: grey;
border: 1px solid black;
border-radius: 5px 5px 0 0;
To get the gradient, you can set up a box-shadow using the inset to get the desired gradient, or as another answer suggests, use a linear-gradient.
.sidebar-top {
float: left;
height: 38px;
width: 292px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border:1px solid #D3D3D3;
background-color:#FBFBFB;
background-image: -ms-linear-gradient(top, #FBFBFB 0%, #EAEFEF 100%);
background-image: -moz-linear-gradient(top, #FBFBFB 0%, #EAEFEF 100%);
background-image: -o-linear-gradient(top, #FBFBFB 0%, #EAEFEF 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FBFBFB), color-stop(1, #EAEFEF));
background-image: -webkit-linear-gradient(top, #FBFBFB 0%, #EAEFEF 100%);
background-image: linear-gradient(to bottom, #FBFBFB 0%, #EAEFEF 100%);
}
.sidebar-top h2 {
color: #666666;
font: bold 16px Arial,Helvetica,sans-serif;
letter-spacing: -1px;
margin: 10px;
padding:0px;
text-transform: capitalize;
}
Yes it is, you can use the below mentioned css
from here you can generate css based gradient effects
http://www.colorzilla.com/gradient-editor/
.sidebar-top {
background: rgb(254,255,255); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM1JSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZWVlZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(254,255,255,1) 0%, rgba(247,247,247,1) 35%, rgba(238,238,238,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,255,255,1)), color-stop(35%,rgba(247,247,247,1)), color-stop(100%,rgba(238,238,238,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(254,255,255,1) 0%,rgba(247,247,247,1) 35%,rgba(238,238,238,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(254,255,255,1) 0%,rgba(247,247,247,1) 35%,rgba(238,238,238,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(254,255,255,1) 0%,rgba(247,247,247,1) 35%,rgba(238,238,238,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(254,255,255,1) 0%,rgba(247,247,247,1) 35%,rgba(238,238,238,1) 100%); /* W3C */
border: 1px solid #d3d3d3;
border-radius: 10px 10px 0 0;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-8 */
float: left;
height: 32px;
padding: 4px 15px;
width: 292px;
}

box-shadow is not a gradient, how can I get a gradient shadow on my button?

I have just discovered that CSS box-shadow is not a gradient.
I want to have under my link element, which is shown as a button, is a gradient which goes from one RGB color to another RGB color, and this looks like a drop shadow. The top RGB color is #333 and the button RGB color to be #fff and it should have a height of 4 pixels. (just for example, I have not measured this from the button image).
So I have a
Button.
I want the shadow directly under it.
The button with a gradient shadow under it I am trying to reproduce is this one:
Is there any equivalent way to do this with box-shadow or is there any other way to do it?
Perhaps something like the following (although you're going to have to play a bit with the colours etc you prefer):
Button​​​​​​​​​​​
.btn {
border: solid 1px rgb(139,137,125);
border-color: rgb(182,179,161) rgb(167,164,146) rgb(139,137,125) rgb(167,164,146);
background: #C9C6B4; /* old browsers */
background: -moz-linear-gradient(top, #D8D5C1 3%, #C9C6B4 4%, #A7A492 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #D8D5C1), color-stop(4%, #C9C6B4), color-stop(100%, #A7A492)); /* webkit */ /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D8D5C1', endColorstr='#A7A492',GradientType=0 );*/
-moz-text-shadow: rgba(0,0,0,0.2) 0px -1px 0px;
-webkit-text-shadow: rgba(0,0,0,0.2) 0px -1px 0px;
text-shadow: rgba(0,0,0,0.2) 0px -1px 0px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 3px;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 3px;
box-shadow: rgba(0,0,0,0.3) 0px 2px 3px;
cursor: pointer;
font: bold 12px/1em Arial, Helvetica, sans-serif;
color: rgb(255,255,255)!important;
text-align: center;
white-space: nowrap;
float: right;
margin: 0 0 8px 5px;
padding: 0.5em 1em;
}
.btn:hover {
border-color: rgb(211,106,13) rgb(185,72,0) rgb(166,53,0) rgb(185,72,0);
-moz-box-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
-webkit-box-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
-moz-text-shadow: rgba(255,255,255,0.9) 0px 0px 10px;
-webkit-text-shadow: rgba(255,255,255,0.9) 0px 0px 10px;
text-shadow: rgba(255,255,255,0.9) 0px 0px 10px;
box-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
background: #DD6C00; /* old browsers */
background: -moz-linear-gradient(top, #F69C11 3%, #DD6C00 4%, #BB4A00 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #F69C11), color-stop(4%, #DD6C00), color-stop(100%, #BB4A00));
}
Nick

CSS Button Won't Render In Email Template

I have an email template here that uses CSS for a button. In most mail clients, the button appears just fine (a green gradient). In Gmail, however, the button does not appear.
See screenshot (rendered in Gmail):
Here is the button code:
.button {
background-image: -webkit-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%);
background-image: -moz-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%);
background-image: -ms-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%);
background-image: -o-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%);
background-image: linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%);
-webkit-box-shadow: 0px 0px 0px 1px rgba(250,250,250,1)inset;
-moz-box-shadow: 0px 0px 0px 1px rgba(250,250,250,1)inset;
box-shadow: 0px 0px 0px 1px rgba(250,250,250,1)inset;
border: solid 1px rgba(112,112,112,1);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 180px;
height: 44px;
padding: 0px 24px 0px 24px;
display: block;
font-size: 18px;
font-family: Arial, Sans-serif;
line-height: 40px;
text-align: center;
color: rgba(247,247,247,1) !important;
font-weight: bold;
margin: 0 auto;
}
a.button {
text-decoration: none !important;
}
.button:hover {
background-image: -webkit-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%);
background-image: -moz-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%);
background-image: -ms-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%);
background-image: -o-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%);
background-image: linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%);
-webkit-box-shadow: 0px 0px 0px 1px rgba(239,249,254,1)inset;
-moz-box-shadow: 0px 0px 0px 1px rgba(239,249,254,1)inset;
box-shadow: 0px 0px 0px 1px rgba(239,249,254,1)inset;
border: solid 1px rgba(179,179,179,1);
}
.button:active {
-webkit-box-shadow: 0px 0px 0px 1px rgba(154,186,203,1)inset;
-moz-box-shadow: 0px 0px 0px 1px rgba(154,186,203,1)inset;
box-shadow: 0px 0px 0px 1px rgba(154,186,203,1)inset;
Any idea what's wrong or how to fix it?
Most email clients render HTML as if it were 2001 standards.
You can't used :hover or any other interactive pseudo selector
You should make the button an image so that it renders the same across all email clients.
You need to remember that people may be getting your email in desktop & web clients. Outlook probably has the biggest problem with rendering html / css.
If you are using Mailchimp, I believe they have a testing tool that you can use to replicate how your code will render in different clients.
Good luck.

Make a fixed bar above the footer

I'd like to make a fixed bar above the footer that says something like: "This site is in beta. Please send feedback to info#blah.com."
I'm new to CSS and struggling with this.
Here's my footer CSS:
#footer {
min-height: 60px;
padding-left: 20px;
padding-right: 20px;
background-color: #000000;
background-image: -moz-linear-gradient(top, #4d4d4d, #333333);
background-image: -ms-linear-gradient(top, #4d4d4d, #333333);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#333333));
background-image: -webkit-linear-gradient(top, #4d4d4d, #333333);
background-image: -o-linear-gradient(top, #4d4d4d, #333333);
background-image: linear-gradient(top, #4d4d4d, #333333);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d4d4d', endColorstr='#333333', GradientType=0);
background-color: #424242;
background-image: -moz-linear-gradient(top, #4d4d4d, #333333);
background-image: -ms-linear-gradient(top, #4d4d4d, #333333);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#333333));
background-image: -webkit-linear-gradient(top, #4d4d4d, #333333);
background-image: -o-linear-gradient(top, #4d4d4d, #333333);
background-image: linear-gradient(top, #4d4d4d, #333333);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d4d4d', endColorstr='#333333', GradientType=0);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
height: 40px;
}
#footer a {
color: rgb(153, 153, 153);
text-decoration: none;
}
#footer span {
font-size: 10pt;
margin-left: .5em;
color: rgb(153, 153, 153);
text-decoration: none;
text-shadow: 0px 0px 0px
}
#footer-inner {
padding: 20px 0;
}
Basically I want just a small little bar above it that is fixed to the footer and that doesn't screw up the formatting of my footer.
How would I do this?
As you didn't say something about your HTML mark up, I've created something from scratch.
You can set the position of #footer to relative and then create an element, that is positioned absolutely with a negative top-value. So it will always stick on top of the footer and won't affect the footer itself and neither the content above:
HTML
<footer id="footer">
<aside>This site is beta</aside>
Footer
</footer>​
CSS
#footer {
position: relative;
}
#footer > aside {
position: absolute;
left: 0;
top: -50px;
width: 120px;
height: 40px;
}
Here is a demo on jsfiddle.

What's the best technique to code this image

I've got this image:
I want to code this image (just the bar, not the background - background can change) using html and css3. It has to be scalable in height and width. What's the best technique to do that? Thanks.
OK you can try this (tested in Firefox 11 only)...
HTML
<div class="bubble">
<div class="content">
Some content can go inside this bubble...
</div>
<div class="arrow"><div class="arrow-shadow"></div></div>
</div>
CSS
.bubble
{
background:#D0D0D0;
background-image: -ms-linear-gradient(top, #BBB 0%, #EEE 100%);
background-image: -moz-linear-gradient(top, #BBB 0%, #EEE 100%);
background-image: -o-linear-gradient(top, #BBB 0%, #EEE 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #BBB), color-stop(1, #EEE));
background-image: -webkit-linear-gradient(top, #BBB 0%, #EEE 100%);
background-image: linear-gradient(top, #BBB 0%, #EEE 100%);
border-radius:10px;
border-top:2px solid #EEE;
border-bottom:2px solid #AAA;
position:relative;
width:380px;
height:100px;
}
.bubble .content
{
padding:10px;
}
/* Arrow */
.bubble .arrow {
position:absolute;
top:50%;
left:100%;
margin-top:-12px;
}
.bubble .arrow:after,
.arrow .arrow-shadow
{
border:10px solid Transparent;
border-color:rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0);
content:' ';
height:0;
position:absolute;
width:0;
}
.bubble .arrow:after
{
border-left-color:#D3D3D3;
}
.arrow .arrow-shadow
{
height:3px;
border-left-color:#AAA;
}
It's a bit of a hack in my opinion, but it seems to get fairly close to what you want. The only things that may be an issue are:
Backwards compatibility. Older versions of IE might choke so it'd be worth testing it and hacking IE compatibility as required.
If the box becomes too big, the arrow might look a different colour to the box. I can't figure out a way around this, so you might have better results putting the arrow in a static location.
You can find a JSFiddle here: http://jsfiddle.net/eWj6q/13/
I may not recommend it the best technique but somehow it will work better:
Using linear gradients: A linear gradient is one that gradually transitions between colours over the distance between two points in a straight line. At its simplest, a linear gradient will change proportionally between two colours along the full length of the line.
div {
background: -moz-linear-gradient(#FFF, #000);
background: -ms-linear-gradient(#FFF, #000);
background: -o-linear-gradient(#FFF, #000);
background: -webkit-linear-gradient(#FFF, #000);
}
This is closest I could get using div's.
Probably could get the arrow better by using canvas, but it would require javascript.
Javascript would also sovle the background color problem for the arrowish-like box. :)
Demo: http://jsfiddle.net/Xvm2C/
​
Screenshot: http://i.stack.imgur.com/iwlMj.png
HTML part:
<div class="nice">
<div class="arrow-container">
</div>
Hello world!
</div>
CSS part:
body {padding:50px; background-color: #ccc;}
.nice {
background-color: white;
position: relative;
min-height:65px;
padding:10px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: -moz-linear-gradient(top, #cccccc 0%, #ffffff 100%); /* firefox */
box-shadow: 0 0px 0px #fff, 0 0px 1px #666, inset -1px -1px 0px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
-moz-box-shadow: 0 0 0 #FFFFFF, 0 0 1px #666666, -1px -1px 0 rgba(0, 0, 0, 0.5) inset, 0 1px 1px rgba(255, 255, 255, 0.8) inset;
-webkit-box-shadow: 0 0px 0px #fff, 0 0px 1px #666, inset -1px -1px 0px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
text-shadow: 0 1px 2px #fff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#ffffff));
font-size:20px
}
.arrow-container {
background-color: white;
height: 26px;
position: absolute;
right: 0;
top: 50%;
margin-top:-13px;
margin-right:-19px;
width: 20px;
background: -moz-linear-gradient(top, #dcdcdc 0%, #ededed 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dcdcdc), color-stop(100%,#ededed));
box-shadow: 0 0px 0px #fff, 1px 0px 1px #666, inset 0px -1px 0px rgba(0,0,0,0.5), inset -1px 1px 1px rgba(255,255,255,0.8);
-moz-box-shadow: 0 0 0 #FFFFFF, 1px 0 1px #666666, 0px -1px 0 rgba(0, 0, 0, 0.5) inset, -1px 1px 1px rgba(255, 255, 255, 0.8) inset;
-webkit-box-shadow: 0 0px 0px #fff, 1px 0px 1px #666, inset 0px -1px 0px rgba(0,0,0,0.5), inset -1px 1px 1px rgba(255,255,255,0.8);
-webkit-border-top-right-radius: 7px;
-moz-border-top-right-radius: 7px;
border-top-right-radius: 7px;
-webkit-border-bottom-right-radius: 25px;
-moz-border-bottom-right-radius: 25px;
border-bottom-right-radius: 25px;
}
​