Here's my code:
<h3>Desserts <span>+</span></h3>
And here's my style that accompanies said code:
#our_menu h3 span {
color: #eee;
display: block;
float: right;
font-size: 11.5pt;
margin-top: -25pt;
margin-right: 10pt;
text-shadow: 0px 1px 0px #240d00; }
#our_menu h3:first-child a {
border-top: 1px solid #692601;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.1, rgb(201,86,19)),
color-stop(1, rgb(159,58,0))
); }
This is being used on a mobile site that I'm building and for some reason the span is being killed by the webkit gradient. Has anyone experienced anything like this before? If I remove the gradient then the span reappears :(
Thanks!
Figured it out. The span is not part of the link and the gradient style is being applied to the link which renders over top of the span. I made the span relative with a z-index and it works fine. Good grief.
Related
I'm using the following code to give the double underline on my site (https://howtogetrippedathome.com/) below my widget titles a gradient color:
.widget-title:after {
border-bottom: 6px double;
-webkit-border-image: -webkit-linear-gradient(left, #ff2828, #F27B26);
}
However, when I apply this code the underline dissapears. I have looked in other topics and this should work, but I don't know what I'm doing wrong.
Simply use multiple gradient like this
h1{
display:inline-block;
padding-bottom:5px;
background:
linear-gradient(to left, red, blue),
linear-gradient(to left, red, blue);
background-size:100% 2px;
background-position:bottom 0 left 0,bottom 5px left 0;
background-repeat:no-repeat;
}
<h1>some text</h1>
Instead of using the pseudo element(:after),
Try this directly:
.widget-title {
border-bottom: 6px double;
-webkit-border-image: -webkit-linear-gradient(left, #ff2828, #F27B26);
}
In css3 please use pseudo-element with ::after instead of :after.
And please ensure you at least an empty content for the pseudo element style like (content: "") and specify display property.
.widget-title {
width: 100px;
height: 100px;
}
.widget-title::after {
content: "";
display: block;
background: #ffba10;
border-bottom: 6px double;
}
Above code works as expected. Please refer this link for more info.
I'm trying to create a button with CSS that will sit on a semi-transparent background that has a beveled or cut edge to it. Here is the Photoshop mockup:
I'm able to do this successfully with a solid color background because I can use an pseudo element with that same background and "cover" the edge of the button, but it doesn't work with a semi-transparent background.
Here's what I've got so far, on a solid background: http://codepen.io/anon/pen/GJFpc
I'm beginning to believe this isn't possible with just CSS, but still hoping S.O. can save me once again!
I love a good css challenge so I tried a few things and this is what I could come up with:
http://jsfiddle.net/QE67v/3/
The css (unprefixed) looks like this:
a.cta {
position: relative;
float: left;
padding: 8px 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
font-weight: normal;
background-image: linear-gradient(top, #ffffff 0%, #e4e4e4 100%);
box-shadow: inset 0 -2px 1px 2px #fff;
line-height: 16px;
height: 16px;
z-index: 2;
}
a.cta:after {
content: '';
display: block;
position: absolute;
width: 32px;
height: 32px;
right: -16px;
top: 0;
background-image: linear-gradient(top, #ffffff 0%, #e4e4e4 100%);
box-shadow: inset -3px -2px 1px 2px #fff;
transform: skewX(-45deg);
z-index: -1;
}
There are two main differences with your code:
I use a inset box-shadow to achieve the white 'bevel'. You could
probably do this with gradients as well, but I just find the shadows
more intuitive.
In stead of making the button wider and covering the bottom left
corner with a pseudo element in the color of the background, I kept
the button in its normal width and added a pseudo element to which a
applied the skewX transformation. This allows for any background, as
you can see by the gradient I set as a background in my fiddle.
I believe this is what you where after. Feel free to ask if you need any further help/explanation.
I've searched and found many questions and answers here but I just can't get this thing to work.
You can view my HTML and CSS here: http://jsfiddle.net/PqjqF/2/
HTML
<div id="SearchBox">
<div id="SearchFieldContainer">
<input class="SearchField" type="text" name="search" placeholder="Search..."/>
</div>
<div id="SearchButtonContainer">
Search
</div>
</div>
CSS
#SearchBox {
width: *;
background-color: #fff;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #d2d2d2;
height: 40px;
padding: 14px 8px 8px 8px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(92%,#f3f3f3));
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 92%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 92%); /* W3C */
}
#SearchFieldContainer {
float: left;
width: 100%;
}
#SearchButtonContainer{
float:left;
}
.SearchField {
border: 1px solid #bdbdbd;
background: #f5f5f5;
-webkit-border-radius: 60px;
border-radius: 60px;
color: #0a0705;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 1px 1px;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 1px 1px;
padding:8px;
margin-bottom:20px;
width:100%;
}
.SearchField:focus {
background: #fff;
color: #000000;
}
.SearchButton {
-webkit-box-shadow: 0px 2px 2px 0px #8a8a8a;
box-shadow: 0px 2px 2px 0px #8a8a8a;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2f3c47), color-stop(1, #0f1011) );
background-color:#2f3c47;
-webkit-border-radius:42px;
border-radius:42px;
border:1px solid #0d060d;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:18px;
font-weight:bold;
padding:5px 18px;
text-decoration:none;
}
What I want to have is that the input field will take all the space it has and the search button to be next to it, on the same line.
I tried so many things like hidden overflow and other but it refuses to work :-/
Any help here?
Thanks,
- Shai
Change your HTML a bit to let div#SearchButtonContainer appears before div#SearchFieldContainer.
Add margin-right to div#SearchFieldContainer make enough room for the button. Remove its float: left; style, then it will spread 100% width by default (with some margin at right);
Add float: right; to div#SearchButtonContainer.
View the modified example at jsFiddle
Hm, just try:
#SearchFieldContainer {
float: left;
width: 50%;
}
#SearchButtonContainer{
float:left;
width: 50%;
}
So both divs take each 50% of the width = 100% width. Some more work is need for perfect fit, but basically it should work. Remember to "clear" (If you don't know, look for clear:both).
You're issue is that certain things aren't adding up to 100%. For example the text field itself is set to 100% width but has padding which makes it larger than 100%. If you wrap the text-field in a border you can see it extends past it's containing div. There are a few ways to fix this... Either remove the paddings, calculate the paddings into your total 100% widths, or use the CSS: box-sizing: border-box; Which tells the browser to calculate the width including padding and borders.
The same is true for both of your containers.
I will use the box-sizing method I mentioned above first...
See the following fiddle: http://jsfiddle.net/PqjqF/4/
Here I have added box-sizing: border-box; to both of your containers, the text field and button. I left the borders in place so you can see the edges of your containers. (this is a great technique for debugging your layouts to see where your boxes are)
I have changed width of the containers to 80% and 20% respectively and set the width of the text-field to be 100%. You could also apply a 100% width to the button to make it fill it's container.
See the Can I Use It? for box-sizing for browser compatibility.
Now a solution without box-sizing: border-box;...
See the following fiddle: http://jsfiddle.net/PqjqF/5/
Here, I have calculated the padding's as a percentage, in this case 1% into the width of the element itself. So, 1% to padding left and right (top and bottom doesnt matter), and 98% width = 100%.
i am using enyo buttons in iphone....the problem is , when i click on button for a navigation , black color appears over the button....i dont know whether it is shadow or border-color or background-color.... i want to remove this...plz help me....
my code goes here
.onyx-Button2 {
outline: 0;
color: #FFFFFF;
font-size: 16px;
text-align: center;
white-space: nowrap;
margin: 0;
padding: 1px 1px;
overflow: hidden;
border-radius: 3px;
/* for IE8 */
border: 1px solid #777;
border: 1px solid rgba(15, 15, 15, 0.2);
/*
The border and the gradient interact in a strange way that
causes the bottom-border (top if the gradient is aligned top)
to be lighter than other borders.
We can fix it by using the darker bottom border below, but
then there are a few rogue pixels that end up very dark.
*/
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2);
background: #E1E1E1 url(../../images/gradient.png) repeat-x bottom;
background-size: contain;
text-overflow: ellipsis;
}
It is possibly down to defaults set within the browser on iOS - I would set all the appropriate properties to cover all bases.
So add
background-color:#ffffff; // Change this to your color you want
I suspect it is just the way iOS defaults some CSS, it may also have something to do with the manner in which it deals with image's as backgrounds. Unfortunately while iOS goes with most standards, it has odd ways of implementing certain CSS.
I want to have a standard method of formatting "Show More" links in my HTML pages.
In HTML I use:
<span class="showMore">Show more details</span>
Then in the css, I have:
.showMore {
color: #0E4B82;
padding-left: 18px;
background: url("images/icons/add.png") no-repeat 0px 0px;
}
.showMore:hover {
color: #F5891D;
cursor: pointer;
}
where add.png is a 16x16 famfamfam silk icon. I use JavaScript to expand some content section using an onclick event.
This works nicely in Firefox 3.0.5 but in IE 7 the last few pixels of the icon are chopped off. I'm looking for a workaround. Using height doesn't work on inline elements like <span/>. Adding a transparent border fixes the issue in IE7:
.showMore {
border: 1px solid transparent;
color: #0E4B82;
padding-left: 18px;
background: url("images/icons/add.png") no-repeat 0px 0px;
}
But IE6 doesn't handle the transparency. Making the text bigger fixes the problem but I don't want big text. line-height doesn't work. Anyone know anything that may help?
I've solved the problem. I've no idea why but using no-repeat center left instead of no-repeat top left ensures IE doesn't chop off the bottom 2px of the icon. Why using center instead of top should result in the image being higher is strange but that's IE for you??
.showMore {
color: #0E4B82;
padding-left: 18px;
background: url("images/icons/add.png") no-repeat center left;
}
.showMore:hover {
color: #F5891D;
cursor: pointer;
}
Does
display: block;
height: 16px;
Help fix the height of the span?