When you hover the span in firefox it moves down a few pixels but it works fine in chrome. Can't figure why it does this.
.close {
width: auto;
right: 4%;
margin-top: 3em;
position: fixed;
z-index: 99;
font-family: 'SuisseBPIntl-Regular';
text-decoration: none;
color: #fff;
font-size: 15px;
border: solid 1px transparent;
}
http://jsfiddle.net/6gohf6nt/
Related
I'm using a pseudo element in a button to achieve an angled border. But in some browsers and some zoom levels, if you look closely you'll see a faint outline around the pseudo element towards the right of the button on the left edge of the pseudo element.
Here is the fiddle: https://jsfiddle.net/jw1kfmsh/
.button {
position: relative;
padding: 0 20px;
height: 53px;
background-color: red;
border: 4px solid black;
border-right-width: 0;
color: white;
font-weight: 900;
font-size: 14px;
transition: all .425s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
z-index: 1;
filter: blur(0);
}
.button::after {
position: absolute;
content: '';
right: -19px;
top: -4px;
height: 53px;
width: 38px;
background-color: red;
border: 4px solid black;
z-index: -1;
border-left: 0;
transform: skew(-31deg);
transition: all .425s ease;
backface-visibility: hidden;
}
Button Text
I would consider a different idea where you will not have the issue. Make the shape as only one element and rely on overflow to hide the non needed part.
.button {
position: relative;
display:inline-block;
padding: 0 40px 0 20px;
line-height: 53px;
border-left: 4px solid black;
color: white;
font-weight: 900;
font-size: 14px;
text-decoration: none;
overflow:hidden;
z-index: 0;
}
.button::after {
position: absolute;
content: '';
right:0;
top: 0;
left:-5px;
bottom:0;
background: red;
border: 4px solid black;
z-index: -1;
transform: skew(-31deg);
transform-origin:top;
}
Button Text
input#submit {
position: relative;
background: transparent;
bordeR: none;
font-family: raleway;
text-transform: uppercase;
border: 1px solid #1ba39c;
margin-left: auto;
font-size: 13px;
display: block;
color: #1ba39c;
letter-spacing: 1px;
top: -5px;
left: -1px;
padding: 7px;
padding-top: 8px;
}
As you can see on chrome mobile the text inside of input with the value post comment gets moved upwards whereas on chrome desktop it perfectly centered. What must be the issue?
I'm not 100% clear what you're asking, but see if the following CSS change achieves what you are looking for:
textarea#comment {
background: transparent;
height: 28px;
}
I think this is # line 1663 of http://tenfizz.com/wp-content/themes/tenfizz/style.css
Good luck!
I want to add a white gap between menu elements but Im encountering a weird problem. See this jfiddle: http://jsfiddle.net/ERYat/1/
Here is the CSS code:
/* a styling */
ul#menu-menu-services a {
display: block;
font-size: 20px;
color: #000;
text-decoration: none;
padding: 5px;
border-bottom: 2px solid #fff;
border-left-style: solid;
border-left-width: 3px;
border-left-color: #000;
}
/* li fix */
ul#menu-menu-services li {
margin: 0;
padding: 0;
border: none;
}
/* Sub Menu */
ul#menu-menu-services li ul.sub-menu {
display: block;
margin-left: 0px;
}
ul#menu-menu-services li ul.sub-menu li a {
padding-left: 15px;
font-size: 14px;
}
I can't figure out why is the border diagonal on the left. Anyone knows?
Borders come together like this:
||
||______
|/______
You should use margin-bottom instead of border-bottom fiddle:
ul#menu-menu-services a {
display: block;
font-family: 'Droid Sans', arial, serif;
font-size: 20px;
color: #000;
text-decoration: none;
padding: 5px;
margin-bottom: 2px;
border-left-style: solid;
border-left-width: 3px;
border-left-color: #000;
}
And if you need a white line, consider using :after:
ul#menu-menu-services a { position: relative; }
ul#menu-menu-services a:after {
content: '';
width: 100%;
position: absolute;
height: 2px;
background: #fff;
left: 0;
bottom: -2px;
}
It's because it's drawing the corner of the two borders. Try changing your bottom border to something other than white and you'll see more clearly what it's doing.
To get rid of this effect, you need to get rid of the bottom border.
If you need the gap that the bottom border is currently giving you, you could use padding-bottom or margin-bottom instead.
I have some navigation links that I'm using css transitions on.
Here's the CSS...
ul.yui-nav { list-style-type: none; }
ul.yui-nav li {
display: inline-block;
text-align: center;
height: 110px;
width: 110px;
border: none;
background: none;
}
ul.yui-nav li:hover {
background: none;
border: 1px solid #ccc;
border-radius: 50%;
height: 110px;
width: 110px;
transition: all 275ms;
-moz-transition: all 275ms; /* Firefox 4 */
-webkit-transition: all 275ms; /* Safari and Chrome */
-o-transition: all 275ms; /* Opera */
}
ul.yui-nav li a {
font-style: normal;
border-radius: 50%;
height: 100px;
width: 100px;
background: #ccc;
float: left;
color: #fff;
text-decoration: none;
font-size: 50px;
font-family: 'Oswald', sans-serif;
margin: 0 11px;
font-weight: 700;
margin: 5px 5px;
}
ul.yui-nav li a span { font-size: 16px; font-weight: 400; }
And here is the HTML...
<ul class="yui-nav">
<li>Preface</li>
<li>1<br/><span>Step</span></li>
<li>2<br/><span>Step</span></li>
<li>3<br/><span>Step</span></li>
<li>4<br/><span>Step</span></li>
<li>5<br/><span>Step</span></li>
<li>Submit</li>
</ul>
And here's a JS Fiddle with this all working (Don't mind the text not looking right)...
JS Fiddle
The problem I'm having is that when you hover over the circles, during the transition the border goes from a black square to the grey circle border. I just want a grey border to come out from the circle, and I don't understand why it's not happening correctly.
I'm not sure if i underestand your question. The problem is the black color from start the animation? You can fix it in the next lines:
...
ul.yui-nav li {
...
border-color:#ccc;
}
...
Is this correct?
Add border-radius: 50%; to your ul.yui-nav li selector. This tells it it's round even though it has no border.
Demo:
ul.yui-nav li {
border-radius: 50%;
display: inline-block;
text-align: center;
height: 110px;
width: 110px;
border: none;
background: none;
}
Looking to create this:
What would be the best way to achieve it?
IT MUST:
I'd definitely like to keep the text as text (so not using an image). Also, I'd like this to be re-usable so that I can put different text in it.
Ideally, the arrow part should be as high as the text.
NICE TO HAVE:
I'd like to be able to drop this on any background (so it isn't always on white)
Would be great if it was ie8+
Thanks!!
Have you tried something using html/css??
#vert_menu{ overflow: hidden; width: 100%; }
#vert_menu li{ float: left; }
#vert_menu a{
padding: 8px 20px 8px 40px;
float: left; text-align:center;
text-decoration: none; font: normal 16px Myriad Pro, Helvetica, Arial, sans-serif; text-shadow:0px 1px 0px #000;
color: #e6e2cf;
position: relative; text-shadow:1px 0 0 #000;
background: #525252; min-width:181px; width:auto
}
#vert_menu a::after,
#vert_menu a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -19px;
border-top: 19px solid transparent;
border-bottom: 19px solid transparent;
border-left: 1em solid;
right: -1em;
}
#vert_menu a::after{ z-index: 2; border-left-color: #525252; }
<ul id="vert_menu">
<li>test</li>
</ul>
You may this in your HTML;
<div>
<button>Button</button>
</div>
And this in your CSS
a {
background: #950006;
border: none;
display: inline-block;
height: 28px;
line-height: 28px;
position: relative;
text-decoration: none;
width: 100px
}
a:before{
background: #950006;
border: none;
content: '';
display: block;
height: 20px;
left: 90px;
position: absolute;
top: 4px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 21px;
}
a button {
color: #fff;
background: none;
border: none;
font-weight: bold;
position: relative;
width: 120px;
height: 28px;
}
and will output a button like this:-
Here is a working Live Demo. The complete button is CLICKABLE. You may test the button by changing the background of the parent div.
Hope this helps.