I have this element with this style added:
.checkout-step.current .number {
background-color: #d26d51;
outline: 1px solid #d26d51;
outline-offset: 4px;
}
But I not want square corners in the outline, I want round the corners, like this example:
How can I do this?
My approach is as follows. Please check JSFiddle.
I have added following HTML.
2
I have added following css.
a {
background: #999;
width: 40px;
height: 40px;
border-radius: 20px;
text-decoration: none;
color: #fff;
display: inline-block;
line-height: 40px;
position: relative;
border: 2px solid #000;
text-align: center;
}
a:after {
content: '';
display: block;
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
border-radius: 30px;
border: 2px solid #f00;
}
Use border-radius property to do this.
http://www.w3schools.com/cssref/css3_pr_border-radius.asp
**use this code **
outline we cant use radius property Instead of outline make as border and radius so i changed code like this Try This .
Html
<div class="usecode"><div class=".checkout-step.current .number">2</div></div>
css
.checkout-step.current .number {
background-color: #d26d51;
margin:15px;
}
.usecode
{
border:1px solid #d26d51;
border-radius:25px !important;
}
Related
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 tried to insert into my site a border-radius. It should look like:
I use Font Awesome and Bootstrap (in Fiddle I can’t insert it). This is how I tried to do that: http://jsfiddle.net/24oehpeh/
This is the code:
.ikonka:hover{
border: 2px solid;
border-radius:100%;
}
<div class="ikonka">f</div>
What did I do wrong?
You need to set a width on your element. As it stands, the content f is wrapped in a div, which is a block level element. This will occupy maximum horizontal space available.
.ikonka {
border: #fff 2px solid;
border-radius: 50%;
height: 20px;
text-align: center;
width: 20px;
}
.ikonka:hover {
border-color: #000;
}
<div class="ikonka">f</div>
I choosed to use the pseudo element "before" for this solution.
It gives you the benefit like "a second element", where you can more freely style it without making to many tricks with the main element.
Updated, has a perfectly round circle now.. :)
.ikonka {
position: relative;
border: 2px solid transparent;
display: inline-block;
/*padding: 4px 10px; removed */
background-color: black;
color: white;
width: 24px; /* added */
height: 24px; /* added */
line-height: 24px; /* added */
text-align: center; /* added */
}
.ikonka:hover:before {
border: 2px solid white;
border-radius:100%;
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
<div class="ikonka">f</div>
The div must not be set to auto-width (which would be 100%).
The border should be transparent, so there are two pixels of invisible border.
A border radius of 50% suffices since it bends half of each side.
To make it look like your example, some font styling is necessary.
Result:
body{ background-color:#2C2F34; }
.ikonka{
width:32px;
height:32px;
border: 2px solid transparent;
border-radius:50%;
color:white;
cursor:default;
text-align:center;
font-weight:bold;
font-size:26px;
font-family:sans-serif;
}
.ikonka:hover{ border-color:white; }
<div class="ikonka">f</div>
Try this.
.ikonka:hover{
border: 2px solid white;
border-radius:100%;
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.ikonka {
width: 100px;
height: 72px;
text-align: center;
background-color: black;
font-size: 51px;
color: white;
vertical-align: middle;
position: relative;
display: inline-block;
padding: 16px 8px;
}
<div class="ikonka">f</div>
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.
Please check this Fiddle:
http://jsfiddle.net/5WGLs/
If you hover over basker-holder, you can see that it's child-> shopping-cart top border is not behind it's parent. It should be white. The effect I am looking for is this:
http://i.stack.imgur.com/XBV82.png
Simply add position: relative;, background-color: #fff; and z-index: 2000; to .cart-btn.This way, .cart-btn will be over .shopping-cart and the background-color will hide to border-top.
View exemple: http://jsfiddle.net/5WGLs/3/
Hope this help.
You could use z-index. Demo
But you should read What No One Told You About Z-Index, because using such large z-indices is useless.
jsfiddle DEMO
Playing with the z-index and background; we can acheive that
edited css
.cart-btn {
color: #333;
display: inline-block;
margin-top: 12px;
padding: 5px 22px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
line-height: 30px;
border: 1px solid #fff;
position: relative;
z-index:10;
background:#fff;
}
.shopping-cart {
position: absolute;
background: #FFF;
left: 0;
text-align: left;
width: 160px;
border: 1px solid #fe4365;
top: 52px;
opacity: 0;
transform: translateY(25px) rotateY(50deg);
z-index:-1;
}
I have a css class for centering a heading, and adding vertically centered lines on either side. Problem is, it uses css3 background properties, and not every browser supports those. So I'd like to simplify this for cross browser compatibility, but am not sure how to do that.
Is there a simpler way to achieve this, without the css3 background (and without adding any extra elements or static heights/widths)?
demo here
.section-heading {
display: table;
white-space: nowrap;
}
.section-heading:before {
background: linear-gradient(to bottom, black, black) no-repeat left center / 95% 1px;
content: "";
display: table-cell;
width: 50%;
}
.section-heading:after {
background: linear-gradient(to bottom, black, black) no-repeat right center / 95% 1px;
content: "";
display: table-cell;
width: 50%;
}
<h2 class="section-heading">Example</h2>
You can use fieldset and legend, it's not very beautiful code but you don't need CSS3
http://jsfiddle.net/dASCv/9/
fieldset {
text-align: center;
border: none;
border-top: 1px solid black;
}
legend {
padding: 20px;
}
<fieldset>
<legend>
<h2>Example</h2>
</legend>
</fieldset>
OR this other method whit :after and :before
http://jsfiddle.net/dASCv/10/
div {
text-align: center;
}
h2:before,
h2:after {
border-top: 1px solid black;
display: block;
height: 1px;
content: " ";
width: 40%;
position: absolute;
left: 0;
top: 1.4em;
}
h2:after {
right: 0;
left: auto;
}
<div>
<h2>text TEXT</h2>
</div>
There is my best try.
I have a little isue that I have corrected in Chrome; but I really don't know even why it works.
The CCS is
.test {
display: table-row;
white-space: nowrap;
line-height: 0px;
}
.test:before,
.test:after {
border-color: transparent;
border-top: solid black 1px;
border-left: solid transparent 1px;
border-bottom: solid rgba(0,0,0,0.01) 11px;
border-right: solid transparent 1px;
content: "";
display: table-cell;
width: 50%;
}
.test:before {
border-right: solid 30px transparent;
}
.test:after {
border-left: solid 30px transparent;
}
I am using the border to display the black line, and to have it positioned in place I have reduced the height of the table to 0.
fiddle
In the fiddle, I have kept your original demo, so that you can compare side by side.
And now, the weird part. change rgba(0,0,0,0.01) in the border bottom to rgba(0,0,0,0.001), and it will break (at least in Chrome).
I really would like to understand that ...
new answer
All the above was asuming that the requirement was to have a transparent style (that is , that it was posible to set a background that could be seen thru the h1. If this is not the case, there is another posible solution, using box-shadow instead of gradient barckground:
.test {
display: table-row;
white-space: nowrap;
}
.test:before,
.test:after {
border: solid white 10px;
content: "";
display: table-cell;
width: 50%;
height: 10px;
line-height: 10px;
box-shadow: inset 0px 5px white, inset 0px 6px black;
}
.test:before {
border-right-width: 10px;
border-left-width: 1px;
}
.test:after {
border-left-width: 10px;
border-right-width: 1px;
}
new demo
1-element solution
FIDDLE
div {
display: inline-block;
background: #fff;
padding: 0 10px;
}
div:before {
content: '';
display: block;
position: absolute;
left: 0;
width: 100%;
height: 20px;
border-bottom: 1px solid #c2c2c2;
margin-top: -9px;
z-index: -1;
}
<div>A header</div>
(NB: for this solution to work, you need to set text-align:center on its parent element)
2-element solution (works over a background image)
FIDDLE
.splitHR {
text-align: center;
overflow: hidden;
}
.splitHRText {
display: inline-block;
position: relative;
padding: 0 10px;
}
.splitHRText:before,
.splitHRText:after {
content: '';
display: block;
width: 1000px;
position: absolute;
top: 0.73em;
border-top: 1px solid #c2c2c2;
}
.splitHRText:before {
right: 100%;
}
.splitHRText:after {
left: 100%;
}
<div class="splitHR">
<span class="splitHRText">A header</span>
</div>
Please add Prefix for the CSS
For Webkit browswers
-webkit-gradient
Firefox
-moz-linear-gradient
IE
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
More Details Here http://webdesignerwall.com/tutorials/cross-browser-css-gradient
Using this way also you can achieve the answer, please check this
<p style="display:block; width:100%; text-align:center;
border-bottom:1px #ccc solid; line-height:3px">
<span style="background-color:red; ">Examples</span></p>
http://jsfiddle.net/dASCv/11/
css
h2 {
border-bottom: 1px solid black;
text-align: center;
margin: 0;
padding: 0;
}
h2 span {
display: inline-block;
position: relative;
padding: 0 20px;
bottom: -15px;
background-color: white;
}
markup
<h2><span>text Textsssssssssssssssss</span></h2>
You could set the bottom for span in percentage if you set the height for h2.
you can use this code:
JsFiddle DEMO
HTML:
<h2><span>Title is here</span></h2>
CSS:
h2{
display:block;
text-align:center;
line-height:30px;
}
h2 span{
background:#fff;
padding:0 10px;
}
h2:after{
content:"";
display:block;
border-top:1px solid black;
margin-top:-15px;
}
Update:
you can use this code too: (single element)
JsFiddle
HTML:
<h2>Title is here</h2>
CSS:
h2{
display: table;
margin: 0 auto;
text-align: center;
line-height: 30px;
padding: 0 10px;
background: #FFF;
}
h2:after{
content:"";
display:block;
border-top:1px solid;
margin-top:-15px;
position:absolute;
width:100%;
left:0;
z-index:-1;
}