I'm having some issues with border-bottom and border-image.As I understand it I can set an image for my border , in this case I want the image to be :
However I do not get the image and it just stays a normal 3px border with the color I've specified.And it seems that the image is not taken into consideration.
Can anyone point me to the right direction(Check bootply):
http://www.bootply.com/G5LTvI8YR9
You can do it through css only without using any image
Demo
ul.nav a:hover {
position: relative;
border-bottom: 4px solid #f39385;
}
ul.nav a:hover:after, ul.nav a:hover:before {
bottom: 0px;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
ul.nav a:hover:after {
border-color: rgba(243, 147, 133, 0);
border-bottom-color: #f39385;
border-width: 3px;
margin-left: -3px;
}
ul.nav a:hover:before {
border-bottom-color: #f39385;
border-width: -6px;
margin-left: -6px;
border-color: rgba(243, 147, 133, 0);
}
In your case, using a background image on hover state is much simpler than using an image for the border.
I made up this example based on you bootply that should show what you are looking for (The background image is the one you posted, you might need to tweak it and remove unused white parts on the left and right of it so that the triangle is centered) :
DEMO
CSS :
a:hover {
color: #f39385!important;
background: url(http://i.stack.imgur.com/fIzS3.png) right bottom no-repeat;}
a {
text-transform: uppercase;
color: #b9b9b9;
font-size: 11px;
padding-bottom: 30px;
width:112px;
display:inline-block;
text-align:center;
}
Here's a FIDDLE if you are interested in CSS solution.
<span class="border"></span>
.border {
position: relative;
display: block;
width: 70px;
background: #f0745f;
border: 4px solid #f0745f;
}
.border:before,
.border:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.border:before {
border-color: transparent;
border-bottom-color: #f0745f;
border-width: 10px;
margin-left: -10px;
}
.border:after {
border-color: transparent;
border-bottom-color: #f0745f;
border-width: 4px;
margin-left: -4px;
}
Related
So I want to create a button that looks like this when it's active (you can see that it has a little arrow pointing to the right)
Currently I have something like that, it stays blue after clicked, text turns white and all that. I used .addClass for that, but I have no idea if I should use it again to glue on a triangle onto my button, there has to be a better way right?
While I'm at it, how can I make the shadow/sidebar?
Please, experienced people, give this beginner some enlightenment
add below css for
.active {
height: 50px;
width: 100px;
background: blue;
height: 50px;
width: 100px;
background: blue;
position: relative;
}
.active:after {
content: "";
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid black;
height: 0;
width: 0;
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
}
<div class="active"></div>
try
.active {
height: 50px;
width: 200px;
background: #0092ff;
}
.active:after {
content: "";
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #0092ff;
display: block;
margin-left: 200px;
transform: translateY(75%);
}
.active:hover:after {
content: "";
border-left: 0px solid #0092ff;
transition: border-left 0.2s ease-in;
}
<div class="active"></div>
Please Check following working example.
$(function() {
$('.btn').click(function() {
$(this).closest('ul').find('.active').removeClass('active');
$(this).addClass('active');
});
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
padding: 10px;
background: teal;
position: relative;
display: block;
width: 60px;
cursor: pointer;
}
.active::after {
content: " ";
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid teal;
height: 0;
width: 0;
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><a class="btn active">Home</a></li>
<li><a class="btn">News</a></li>
<li><a class="btn">Contact</a></li>
<li><a class="btn">About</a></li>
</ul>
you need to add position:relative to the selector ul li.
after that, you can use the following code below to add content through the pseudo element after of the active link.
change the size of the borders, as well as positions for top and right to suit your needs.
ul li.active:after {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #0092ff;
position:absolute;
top: 15px;
right:-15px;
}
I need an outline of a button that is curved on the top and bottom, but not the sides. See the Sample Image below to understand what I'm asking for. I will style all the buttons on my website like this one. I've tried a few ways of doing this with border-radius but I haven't been successful yet. Thank you.
Use :before and :after to button
.btn {
border-top:none;
border-bottom:none;
border-right: 2px solid white;
border-left: 2px solid white ;
background-color: #273649;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
}
body{
background-color: #273649;
}
.btn:after {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 48px;
left: 7px;
border-radius: 40%;
}
.btn:before {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 4px;
left: 7px;
border-radius: 40%;
}
<button class="btn">Info</button>
I know this is not the answer that you expected, but I think that the best way to get this result (being the easiest way to get decent results) is with a backgroung-image.
.button {
background-image: url(https://raw.githubusercontent.com/dknacht/GitHub-Test/master/rect4136.png);
background-size: 100% 100%;
}
I just post it in case that someone with similar needs wants to have an alternative.
here an example: https://codepen.io/dknacht/pen/qKbWaY
Dknacht.
I created a button:
http://jsfiddle.net/fy2zG/#&togetherjs=xaJ1VA8PBN
My css so far is:
.button {
padding: 5px 20px;
background: orange;
position: relative;
float:left;
text-align: center;
border-radius: 10px;
text-decoration: none;
color: white;
}
My goal is to have (only) the right side of the button turning to an arrow peak on hover. The result should be something similar like this:
When hovering out, the button shall transit to its original shape.
Is this something that can be achieved with CSS or is jQuery needed?
Working example
jsfiddle
EDIT, now with transition
jsfiddle
EDIT, now with transition on mouseout
jsfiddle
HTML
login
CSS
.button {
padding: 5px 20px;
background: orange;
position: relative;
float:left;
text-align: center;
border-radius: 10px;
text-decoration: none;
color: white;
position:relative;
}
.button:after {
content: " ";
border: solid transparent;
border-width: 0;
border-left-color: orange;
position: absolute;
-webkit-transition: all 1s ease;
left: 100%;
top: 50%;
}
.button:hover:after {
content: " ";
display:block;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-left-color: orange;
border-width: 25px;
margin-top: -25px;
margin-left: -10px;
}
Can't make that with css or jQuery (unless i don't know some plugin).
Basically you must have two images. One for normal button, one for arrow shaped button. And onNover just change background image using background transition. But i think it will look ugly.
How do you create the arrow that appears when you hover over "Reviews" on this site?
http://mac.appstorm.net/category/reviews/
I want to create this via css but am not sure how to do so. Also what is the correct "term" for that?
Thanks!
You can see an example at Simple Stock Search if you register and hover over one of the menu options.
The CSS for such an arrow is:
.reviews:after
{
content: "";
z-index: 9999;
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -10px;
border-top: 10px solid red;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
Visit this JSFiddle for a demo.
from cssarrowplease.com
demo
HTML
<span class="arrow_box">test</span>
CSS
.arrow_box:hover {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
width: 100px;
display:inline-block;
height: 25px;
}
.arrow_box:hover:after, .arrow_box:hover:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:hover:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #88b7d5;
border-width: 5px;
margin-left: -5px;
}
.arrow_box:hover:before {
border-color: rgba(194, 225, 245, 0);
border-top-color: #c2e1f5;
border-width: 11px;
margin-left: -11px;
}
I'm trying to create a tag shape with the css only so that it looks like:
I'm trying following but unable to use the border for the triangle area.
HTML:
Test
CSS:
a{
float: left;
height: 35px;
position:relative;
border: 1px solid red;
border-right: none;
width: 100px;
}
a:before{
content: "";
position: absolute;
top: -1px;
right: -18px;
width: 0;
height: 0;
border-color: white white white red;
border-style: solid;
border-width: 19px 0 18px 18px;
}
JSFiddle:
http://jsfiddle.net/Sac3m/
You could rotate a square instead, although i doubt the results will be great cross-browser
Modified code:
a {
float: left;
height: 35px;
position: relative;
border: 1px solid red;
border-right: none;
width: 100px;
}
a:after {
content: "";
position: absolute;
top: 4px;
right: -13px;
width: 25px;
height: 25px;
border: 1px solid red;
border-left: none;
border-bottom: none;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
<a></a>
(Latest IE, Firefox and Chrome seems OK with it)
Update
If you need IE8 support, you could try to put a white triangle on top of the (original) red triangle:
a {
float: left;
height: 36px;
position: relative;
border: 1px solid red;
border-right: none;
width: 100px;
}
a:before {
content: "";
position: absolute;
top: -1px;
right: -18px;
width: 0;
height: 0;
border-color: white white white red;
border-style: solid;
border-width: 19px 0 19px 19px;
}
a:after {
content: "";
position: absolute;
top: 0;
right: -17px;
width: 0;
height: 0;
border-color: transparent transparent transparent white;
border-style: solid;
border-width: 18px 0 18px 18px;
}
<a></a>
The below code helps to create a tag shape. It works in all major browsers.
#swc {
position: relative;
margin: 0 5px 0 10px;
display: inline-block;
height: 66px;
padding: 0 35px 0 20px;
font-size: 25px;
line-height: 65px;
cursor: pointer;
font-weight: 100;
margin: 20px 25px;
background: #f3f3f3;
transition: background 0.3s;
}
#swc:after {
position: absolute;
content: "";
right: -19px;
width: 1px;
height: 0px;
border-left: 18px solid #f3f3f3;
border-top: 33px solid transparent;
border-bottom: 33px solid transparent;
transition: border 0.3s;
}
#swc:hover {
background: green;
color: #ffffff;
}
#swc:hover:after {
border-left-color: green;
}
<span class="pricetag-right" id="swc">Tag Content!</span>
We had a slightly different implementation of this that produces rounded corners. This uses a rounded square that's turned 45°.
.tag {
display: inline-block;
border-width: 1px;
border-style: solid;
border-color: #c8d7f2 transparent #c8d7f2 #c8d7f2;
border-radius: .25em 0 0 .25em;
padding: 0.1em 0.6em 0.1em 0.3em;
background-color: #e5ecf9;
line-height: 1.2em;
}
.tag:after {
content: "\25CF";
position: absolute;
display: inline-block;
height: 1.2em;
width: 1.17em;
transform: rotate(45deg);
color: white;
text-indent: 0.3em;
line-height: 1em;
text-shadow: 0 0 1px #333;
background-color: #e5ecf9;
border-radius: 0.33em 0.33em 0.33em 1em;
border-width: 1px;
border-style: solid;
border-color: #c8d7f2 #c8d7f2 transparent transparent;
}
<h1 class="tag">my-tag</h1>
A couple things to note:
The square contains a circle punctuation mark. To adjust it you use line-height and text-indent.
The borders on the square need to be set to transparent color with a width of 1px. If you don't, the other borders (the visible ones) taper off where they go from 1px to 0px.
his works pretty well and it's nearly pixel-perfect, but it does render slightly differently across Chrome and Firefox. I tried to make it work with a transparent background, but you need some sort of color to cover up the funkiness where the square meets the tag. It's not quite perfect.
The nice thing about this is that it can be applied as a class and it can be used on H1-H6, or p tags.